Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Running FFMPEG with WASM in a Web Worker

Paul Kinlan

私はFFMPEG.jsが大好きです。これは、asm.jsでコンパイルされた素敵なツールです。そして、私はビデオをすばやく編集できるJS Webアプリケーションを作成しましょう。 FFMPEG.jsもWebワーカーと連携して、メインスレッドをブロックせずにビデオをエンコードすることができます。 私はComlinkも大好きです。 Comlinkでは、複雑な postMessageステートマシンを扱わなくても、関数やクラスを公開することで、Webワーカーと簡単にやりとりすることができます。 私は最近、この2つを組み合わせる必要があります。私はFFMPEGをWebアセンブリにエクスポートして実験しました(これはうまくいきます)、現在のFFMPEG.jsプロジェクトでpostMessageの作業をすべてクリーンアップしたかったのです。以下は、コードが今のように見えるものです - 私はそれがかなりきちんとしていると思います。私たちにはffmpeg.jsとcomlinkをインポートするワーカーがいて、単にffmpegインターフェイスを公開するだけです。次に、workerを読み込んだ後、comlinkを使ってffmpeg APIへのプロキシを作成するWebページがあります。 きちんとした worker.js importScripts('https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js'); importScripts('../ffmpeg-webm.js'); Comlink.expose(ffmpegjs, self); client.html let ffmpegjs = await Comlink.proxy(worker); let result = await ffmpegjs({ arguments: ['-y','-i', file.name, 'output.webm'], MEMFS: [{name: file.name, data: data}], stdin: Comlink.proxyValue(() => {}), onfilesready: Comlink.proxyValue((e) => { let data = e.MEMFS[0].data; output.src = URL.createObjectURL(new Blob([data])) console.log('ready', e) }), print: Comlink.proxyValue(function(data) { console.log(data); stdout += data + "\n"; }), printErr: Comlink.proxyValue(function(data) { console.

Read More

Ideas for web apps with FFMPEG and ffmpeg.js

Paul Kinlan

私は最近、[FFMPEG.js]を使ってAndroidデバイスからスクリーンキャストしてデバイスフレームにビデオをラップするというProgressive Web Appを作成しました(https ://github.com/Kagami/ffmpeg.js)ように: また、building ffmpeg.jsを整理して、比較的容易にffmpegのカスタム最適化ビルドを作成できるようにしましたブラウザで実行します。 私が考えている2つのことは、オーディオとビデオの操作に関してWebができると思うものを押し進める、新しい小さなプログレッシブなWebアプリケーションを構築する機会がたくさんあると思います。 Web上には多くのWebベースのビデオユーティリティがありますが、私の目には多くのものが古いWebサイトのように構築されており、クライアント側の処理の進歩を利用せず、広告を積んでいてオフラインで作業することはできません。 私は、Unixの哲学である「一つのことをやって、うまくやる」(https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well)を大変盛り込んでいます。簡単かつ迅速に構築できるさまざまなWebアプリがたくさんあると思う: *ビデオをトリムする(前面から5秒掛かる、バックから3秒かかるなど)*すべてのビデオフォーマット - > GIF *たくさんの画像 - >任意のビデオフォーマット*任意のビデオフォーマット - >任意のビデオフォーマット*ウォーターマークの追加*ビデオのサイズ変更*ビデオを縮小する*ビデオにウォーターマークを加える*お互いの上にビデオを重ねるビデオを一緒にスプライスする FFMPEGプレイグラウンド(ソースとスクリプトをドロップする)* アイデアがあればこのリストに追加する 私は私のDevice Frames repo on Githubを使ってこのためのUIハーネスとしてコードの大部分を整えていると思います。多くの場合、それは調整の問題ですffmpeg処理グラフといくつかの設定を可能にするためにUIを更新する。 誰かが参加したいと思ったら、今後数週間にわたってこれらの2つを作成し、連絡を取り合おうと思います!

Read More

Building ffmpeg.js for Ubuntu

Paul Kinlan

FFMPEG.jsはすばらしいプロジェクトです。私の最新プロジェクト「Device Frame」(https://paulkinlan.github.io/)の構築に役立ちました。 deviceframe.es/)。これは基本的にffmpegを構築します(サイズを小さくしておくためのデフォルトの良いセットを使用しています)。デフォルトのビルドが必要なフィルタとエンコーダをサポートしていない場合は、それを自分で構築する必要があります。 これは私の将来のメモですが、これは私がそれを働かせるためにしたものです。 (注:私はmacOS sierraを試して、コンパイルエラーを起こしていました)。 ####インストールDeps sudo apt-get install automake libtool build-essential cmakeを実行します。 ffmpeg.jsをダウンロード git clone git@github.com:Kagami / ffmpeg.js.git 2.cd ffmpeg.js 3. git submodule init 4.git submodule update --recursive ####インストールEmscripten: Linux:ダウンロード2. ./emsdk update 3../emsdk install latest4.待って… 5../emsdk activate latest 6. ソース。/ emsdk_env.sh ####ビルドffmpeg.js すべてを作る fribidiにエラーがある場合: cdビルド/ fribidi / && ./bootstrap && configure 次のようなエラーが表示されることがあります。 ./configure: line 4255: syntax error near unexpected token `2.

Read More