Hello.

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 Screenflowに似たユーザーインターフェイスを提供することで、複数のビデオ、画像、およびオーディオを1つのビデオにまとめて、YouTubeなどのサービスにアップロードできる出力ビデオを作成できるようにする必要があります。 この投稿は本当に単なる声明です。私はプラットフォーム上で利用できるものと利用できないものを整理し、今日までにどのくらい得ることができるかを見るための長いプロセスを開始するつもりです。 このプロジェクトのいくつかの考えの中で、私はカール・セイガンの瞬間を持っていました。つまり、リンゴ・パイを作るために宇宙を発明する代わりに、少なくともビデオ・エディタを構築するのに必要なすべてのツールを作成する必要があります。それを行うプロセス。この記事が存在するという事実は、私がいくつかの作品を用意して準備ができていることを知っているからです。 私は、他の誰かのためのビジネスでもある大規模なモノリシックな「ビデオエディタ」を作り出すつもりはないと思っていますが、私はそれを簡単にするために必要なすべての部分を工夫するつもりですウェブ上で素晴らしい動画を作成し、多くの人にウェブ上で可能なことを見せてもらいましょう。 以下は私の大まかな1ページプロジェクト計画です： 私が持っている使用例： *私は通常、Google I / OとChrome DevSummitのすべてのデバイスデモを記録し、オーバーレイなどを追加する必要があります。チームの全員がこれを行うことができます。 *チームはしばしばスクリーンキャストを記録し、シンプルなウェブサイトからすぐにそれを行い、最終的な出力をクリーンアップできるようにしたいと考えています。 *私は鋭く保つためにいくつかの製品を作る必要があります。 ;） 入力： [p0]マイクから音声を録音する [p0]ウェブカメラからビデオを録画する[完了 - 下記参照] [p0]ウェブ上にホストされている外部動画を埋め込む [p0]デスクトップを記録する [p1]リモートストリームを記録する [p1]＆lt; canvas＆gt;を記録します。素子 [p0]ローカルデバイスからファイルをロードする [p1]ローカルデバイスからファイルを共有する（android share intent） 操作： [p1]ウォーターマークを追加する [p1]フィルター効果を画像に追加する [p0]カスタム画像をレイヤーとして追加する [p0]ビデオとオーバーレイをキューに入れる [p0]オーディオとビデオの別々のトラックをオーバーレイする [p1]特定の時間にテキストを重ねる [p0]ビデオをサイズに切り抜く [p0]ビデオの位置決めとサイズ変更を有効にする [p0]ビデオ/オーディオのトリム [p0]スプライスビデオ/オーディオ 出力： [p0] webm形式のビデオファイル [p1] MTB情報 [p1] xyz形式のビデオファイル このビデオのコードデモ const init = () => { let blobs; let rec; let stream; captureBtn.onclick = async () => { stream = await navigator.

私は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.

Dev.toのSam Thorogoodは次のように書いています。 Why did I write this post? Emscripten is a wonderful tool, but it has a long history (for asm.js), and isn’t perfect. I think it errs too much on the side of “magic”, and many posts rave about how it’s so easy to EMASM or use binding-fu, but this all comes at a cost, and can introduce huge amounts of inadvertent overhead—think copying huge memory buffers around because we’re trying to make them immutable or easily exposed.

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.