みなさん、おはようございます。TencentLIVEDeveloperConferenceに参加できてとてもうれしく思います。今日共有したビデオ編集シーンでのウェブマルチメディアテクノロジーの適用は非常に興味深いトピックです。皆さんが何かを得ることができることを願っています。
最初に自己紹介をします。私はYuanYunhuiです。2010年にTencentに入社しました。現在、Tencent Cloud VideoCenterのWebチームを担当しています。
Video CloudのWebチームは、マルチメディアフロントエンドテクノロジーチームであり、より革新的なシーンベースのクラウドサービスをお客様に提供することをお約束します。最近、ビデオ制作の分野でいくつかの実践的な経験があります。これは、フロントエンドテクノロジーと会議のテーマに関連していると思います。ぴったりフィットするので、ぜひここに来てみんなと共有したいと思います。
私の共有は主に4つの部分に分かれています。最初の部分ではビジネスの背景を紹介し、2番目の部分ではWeb側のビデオ制作プラットフォームであるクラウドクリップを紹介し、3番目の部分では小さなプログラムのビデオ編集プラグインであるマイクロクリップを紹介します。いくつかのフォローアップ計画とフロントエンドの技術的課題を共有します。
まず、Tencent VideoCloudが精力的に開発しているプロダクションクラウドフレームワークを紹介します。デジタル化の継続的な進歩により、コンテンツメディア業界はクラウド化とインテリジェントな変革のトレンドになっていることがわかります。プロダクションクラウドは、Tencent Cloudの強力なライブブロードキャスト、オンデマンド、ビデオAI、およびその他の機能に基づいており、業界に統合されたコンテンツの制作と配信を提供します。クラウドサービス。クラウド編集、クラウドディレクティング、クラウドリツイート、クラウドメディアリソースなどの豊富なシーンベースのアプリケーションを含み、顧客が「収集、編集、ブロードキャスト、配布、保存」などのフルリンククラウドの変換とアップグレードを実現し、開業医向けのコンテンツ制作を改善するのに役立ちます配布効率。今日共有したクラウドクリップとマイクロクリップは、この大きなフレームワークの重要な部分です。
最初にクラウドクリップを紹介します。インターフェイスが非常に優れていることがわかります。これは、MacクライアントiMovieと同様に、オーディオとビデオのカット、画面調整、タイトルの追加、音楽、サブタイトル、ステッカー、特殊効果を提供するWeb上のオンラインビデオ編集ツールです。フィルタ、トランジション、その他の機能は、ビデオの非線形編集のニーズのほとんどを満たすことができます。
ビデオ編集に関しては、一般的にネイティブクライアントソフトウェアアプリを思い浮かべますが、ネイティブテクノロジーでどのように実装されていますか？ここでは、Androidのフローチャートを例として紹介します。他のプラットフォームの基本原則も同様です。
まず、ビデオを解凍し、デコードのためにビデオトラックを抽出し、openglを使用して画像データを描画する必要があります。これは、ビデオの後処理では、openglの強力なグラフィックレンダリング機能を使用して、特殊効果、フィルター、その他のマルチメディア要素の追加を容易にする必要があるためです。次に、OpenGL描画コンテンツをエンコードし、最後にオーディオとともにメディアファイルにカプセル化します。これは基本的な原則に過ぎず、もちろん実際のアプリケーションでははるかに複雑になります。
それで、ブラウザ側でそれを実装する方法、ブラウザはコーデックの高レベルのインターフェースをネイティブにサポートしておらず、mediaExtractorとmediaMuxerはmediaStreamに対応しています。それを使用できますか？全体をどのように設計しますか？
質問では、3つの質問を共有します：上記のプロセスのようにビデオフレームをレンダリングする方法、ブラウザwebglでビデオを描画する方法、リアルタイムでプレビューを操作する方法、つまり、ビデオクリップのさまざまな操作のリアルタイムプレビューを容易にするコード構造を設計する方法;そして共有してエクスポートするいくつかの方法。
ビデオフレームをレンダリングするための最初のソリューションは、ffmpegのWebアセンブリバージョンを使用して、ビデオをデコードし、yuvデータをデコードし、rgbに変換してから、キャンバスに描画することができます。このソリューションを使用して、サポートされていないh265エンコーディングとflvを再生する業界も数多くあります。ビデオをフォーマットします。注意すべき点が2つあります。1つは、wasmのパフォーマンスはjsよりも優れていますが、フレームあたり約25〜30ミリ秒かかるソフトソリューションでもあります。2つ目は、ブラウザビデオと同様のオーディオとビジュアルの同期スキームを実装する必要があり、非常に複雑になります。 。
2番目の解決策は、使用しているものです。webglインターフェイスで、texImage2Dは、テクスチャがビデオオブジェクトを受信できることを指定しているため、オフスクリーンビデオを介してwebglに描画できます。ブラウザビデオはネイティブハードウェアによってデコードされ、パフォーマンスが向上します。wasmソリューションは30フレームしか達成できません。ビデオ編集シーンでは見た目がスムーズではなく、複雑であるため、ビデオテクスチャソリューションの方が費用対効果が高くなります。もちろん、誰もが2DキャンバスdrawImageも使用できると言うでしょうが、これはwebglのより多くの機能を使用するのに便利ではありません。
プレビューをリアルタイムで操作する方法を見ると、ゲームをプレイしたことのある学生は、実際には、ビデオ編集ソフトウェアがゲームやアニメーション制作ツールに似ていることに気付くかもしれません。すべてにタイムラインシーケンスがあり、ドラッグアンドドロップでリアルタイムプレビューを生成し、ドライブするメインタイマーがあります。私たちの現在のプレーヤーはゲーム開発のアイデアを採用しています。それは時間軸を操作することによってリアルタイムでトラックデータを入力し、プレーヤーはシーン内の編集オブジェクトを管理およびディスパッチして、最終的に映画のシーケンスを形成します。
フロントエンドがエクスポートできるかどうか、最も重要なエクスポートについて話してください、答えはイエスです！
2つのオプションを紹介します。
1つ目は、ネイティブエンドの処理フローを完全にシミュレートできるffmpeg wasmバージョンを使用する方法です。ffmpegrunは、非常に強力な有名なffmpegコマンドラインインターフェイスを参照します。
2番目のタイプは、captureStreamやmediaStreamなどのブラウザーネイティブインターフェイスを介して実装できます。
これらの2つのインターフェイスは通常、画面記録アプリケーションに使用され、クラウドクリップも画面記録資料を使用します。画像と音声の両方で、captureStreamを介してmediaStreamオブジェクトを取得し、そのaddTrackメソッドを介して結合できます。ただし、この方法は1つのオーディオストリームにしか組み合わせることができず、複数のオーディオがある場合は少し拡張されます。現時点では、動的接続などの高度なWebオーディオ技術を使用してストリームを維持できますが、これは実際に実現できます。
全体として、フロントエンドエクスポートの場合、captureStreamメソッドは単純ですが、複雑なシナリオでさらに検証する必要があります。エクスポートの品質が問題になります。ffmpegはより強力になります。一般的な問題は、ffmpegがブラウザのパフォーマンスによって制限されるのに対し、captureStreamはキャンバスの再生が正常に終了するまで待機する必要があるため、エクスポートのパフォーマンスが1：1になる可能性があることです。
3番目の方法は、バックエンドをエクスポートすることです。ffmpeg、opencv、およびopenglはすべて成熟したバックエンドコンポーネントです。バックエンドの利点は、ネイティブのコンパイル済みプログラムのパフォーマンスが向上し、API呼び出しまたはaiを介した大量生産に便利なことです。あまり便利ではないのは、フロントエンドとバックエンドの効果を揃えるのが面倒なことです。ビジネス全体を検討しており、現在このオプションを選択しています。
全体的なアーキテクチャの観点から、さまざまな顧客の使用シナリオも十分に検討しました。複数レベルのpaas統合ソリューションをサポートできます。たとえば、SDKを使用すると、クラウドクリップエディターをiframeに完全に埋め込むことができ、開発者のビジネスプロセスを完全なクラウドapiインターフェイスで開くことができます。有能な開発者のために、二次開発用のプレーヤーなどのコアコンポーネントを提供することもできます。同時に、saasを使用してスキンを変更することもサポートします。saasバージョンでは、ブロードキャストディレクターやメディア資産管理など、より多くのシーンベースのアプリケーションを使用して、プロダクションリンク全体を開くことができます。
パフォーマンスに関しては、コアプレビュー再生シーンでエディターのレンダリング効率が60フレームに近いことがわかります。マテリアルのインポートに関しては、ブラウザのローカルファイル機能も可能な限り利用されます。つまり、アップロードと編集、クラウドの同期により、あらゆる場所での編集と使用の効率が保証されます。
次に、マイクロカッティングを紹介しましょう。Micro Clipは、小さな端末用のビデオ編集プラグインです。開発者は、Micro Clipを独自の小さなプログラムに埋め込んで、ビデオ編集ビジネスロジックを完成させることができます。マイクロクリップを検索したり、QRコードをスキャンしたりすることで体験できます。現在、ネイティブのショートビデオ編集機能の簡易版を実現しています。
興味のある技術原則についてお話しします。図から、先に紹介したネイティブ処理フローと非常によく似ていることがわかります。ここでの核心は、WeChatが最近デコーダモジュール用の小さなプログラムインターフェイスを提供したことです。この方法で編集プレビューを取得できます。ビデオフレームの画像はwebglに描画されます。
エクスポート時には、キャンバス画面を記録するためのMediaRecorderが提供され、最後にオーディオと組み合わされてパッケージ化されます。これは小さなプログラムの基本原則であり、公式文書で見ることができます。
フロントエンドソリューションでは、CloudClipと同じ行にあるwebglに基づくWebソリューションでもあります。しかし、物事はそれほど単純ではありません。
私たちはさまざまな課題に直面し、非常に感銘を受けました。最初のポイントは環境への適応です。私たちのタイプのゲームは小さなプログラムプラグインの形式です。WeChatの小さなプログラムと小さなゲームは完全に分離されています。ここでは、小さなゲームで数年にわたって開発されてきたインターフェースやプラクティスを使用できません。たとえば、キャンバスやビデオを動的に作成したり、ワーカーを使用したりすることはできません。また、回避して互換性を持たせるにはさまざまな方法が必要です。2つ目のポイントは、レンダリングと再生です。上記のデコーダーなどのWeChatの低レベルのインターフェースは、当面は完璧ではなく、シークの混乱やオーディオとビデオの同期などの多くの問題が発生します。3つ目のポイントは、ビデオ編集を行う場合は、マイクロビジョンビブラトなどの特殊効果を使用する必要があるということです。これを使用する必要があります。シェーダーに関して言えば、この領域はフロントエンドとの接触が少ない領域でもあります。従来の設計者はそれをまったく行うことができません。問題を解決するために多くのエネルギーを費やす必要があります。4番目のポイントは、複雑なエクスポート、複数のビデオ画像のマージ、複数のオーディオの場所などです。 WeChatはまだ準備ができていませんが、当面は最も基本的な原子能力しか与えられず、それを達成するには多くのスキルが必要です。私たちは基本的にこれらの問題を努力によって解決しました。
結果として、メディアの選択、カメラ、複数のビデオ画像の切り取りとマージ、テキスト、特殊効果、フィルター、音楽の追加、クライアント側のエクスポートまで、コアプロセスの完全なセットを実装した最初の企業です。機能を引き続き強化し、パフォーマンスエクスペリエンスはWeChatの同僚と引き続き磨かれます。
マイクロカットプラグインアーキテクチャの設計に関して、開発者は、箱から出して使用するクリップコンポーネントを使用して、カット時間、UIスタイル、ウォーターマークなどの豊富なパラメータを構成できます。同時に、カメラ、クロッパー、プレーヤーなどの二次開発用のサブコンポーネントを使用することもできます。これらのサブコンポーネントをオンデマンドで使用して、独自のビジネスシナリオに適合する編集ツールを開発できます。私たちはコンポーネントのセットです。編集ツールを作成しなくても、プレーヤーコンポーネントをマルチメディアディスプレイソリューションとして使用するなど、多くのビジネスシナリオがあります。ぜひお試しください。
最後に、計画の見通しを共有します。テクノロジーのこの分野では、いくつかの方向性があると思います：
最初のポイント：編集経験
現在の編集ツールの機能は完全ではありません。プロのネイティブツールに匹敵し、より多くのユーザーが喜んで使用できるようにするには、多大な労力が必要です。編集能力、使いやすさ、そして技術と経験におけるいくつかの革新は非常に重要です。
2番目のポイント：コンテンツエコロジー
to bのサービスプロバイダーとして、グラフィックアニメーション、ダイナミックステッカーなど、マテリアルソリューションをどのように顧客に提供するか。実際、この作品は非常に難しいものです。まず、技術的には標準ではありません。詳細があります。これは、設計とプラットフォームテクノロジアーキテクチャの統合です。自分たちでやるのは難しいですが、お客様にとってはさらに難しいので、ここには多くのユーザー価値があると思います。
3番目のポイント：インテリジェント
フロントエンドとAI / ARの組み合わせは、モバイル側ではすでに非常に一般的であるため、Webや小さなプログラムで大規模に使用できるかどうかは、シナリオを継続的に調査する必要があり、ここでもパフォーマンス上の大きな課題があります。また、いくつかのシナリオベースのテンプレート、バックエンドのインテリジェントな制作なども不可欠です。
4番目のポイント：オンラインコラボレーション
流行のため、この用語は現在特に人気があります。コンテンツメディア業界を含め、どの業界でもコラボレーションが必要です。レビュー、変更、注釈など、業界にはすでにいくつかのワークフローアプリケーションがあり、より複雑なコラボレーション、マルチターミナル同期、多くのメディアの技術的な詳細など。
これらはフロントエンドテクノロジーにとって大きな課題ですが、チャンスもたくさんあります。現在、多くのフロントエンドがサーバーレスを研究していることがわかりました。これは未来であり、将来的には、webgl、メディアテクノロジー、webgl、フロントエンドAI、VR、AR、ゲームなどのWebアセンブリなど、私たちが精通しているものと切り離せないものになる可能性があります。シェーダーだけでも十分に複雑で、プログラミング言語の知識、数学の知識、グラフィックスの知識を含む多くの高度な特殊効果、アニメーション、その他の視覚的なことを行うために使用でき、特定の美学さえ必要とします。したがって、学習は無限であり、フロントエンドテクノロジーの上限は常に高くなっています。
最後に、すべてに感謝します、これは私が今日共有したものです。
舞台裏の返信キーワード[TLC]は、ゲストにPPTを共有させることができます。