Monday, 5 July, 2021 UTC
Summary
この記事は、プロダクト管理担当のDonal Toomeyが、こちら(英語)で執筆した記事を日本語化したものです。
ウェブ会議の分野では、仮想背景は目新しいものではありません。主なSaaSサービスプロバイダーは、カスタム背景の挿入やぼかしの機能を提供しています。しかし、これまでは、ブラウザベースのビデオアプリケーションを開発する開発者にとって、この機能は簡単には利用できませんでした。
今回、Twilio Video上で構築されたビデオアプリケーションに仮想背景機能を追加する、Video Processor JavaScriptライブラリが新たに利用可能になりました。仮想背景機能は、現在ChromeとEdgeブラウザで利用可能です。
仮想背景機能は、金融、医療、教育、接客などの分野のプロフェッショナルから、ソーシャルビデオなどの遊び心のある分野まで、さまざまな用途に応用できます。
主要な機能メリット - リモートおよびハイブリッドコラボレーションをサポート - エンドユーザーが自宅で仕事をしていても、プロフェッショナルな外観を損なうことはありません。
- 一貫したユーザーエクスペリエンス - 標準またはブランドの背景を使用することで、カスタマーエクスペリエンスを管理できます。
- アプリケーションのダウンロードが不要 - 仮想背景のサポートは、JavaScript SDK自体で提供されるため、ダウンロードやプラグインは必要ありません。
- 整備された開発ツールキット - シンプルで使いやすいAPIとライブラリにより、背景のぼかしや背景の差し替えが可能
以下で、この新しいライブラリを使った上記の機能メリットをエンドユーザーに提供する方法を説明いたします。
Video Processor APIおよびライブラリ Video Processor APIは、Twilio Video JavaScript SDKの一部であり、ウェブカメラを通して公開されたビデオトラックに対して動作します。ビデオフレームはプロセッサモジュールに渡され、画像の拡張を行い、更新されたフレームを返します。更新されたフレームは、Video SDKによってエンコード(符号化)され、ネットワーク経由で送信されます。開発者は、新しいTwilio Video Processorライブラリを使用するもよし、あるいは、帽子やマスクなどの遊び心のある要素を含めるなど、背景の単純な置き換え以上に何かしたい場合は、独自のビデオプロセッサコードを書くことができます。
Twilio Video Processorライブラリは、画像のセグメンテーションを行い、ガウスぼかしや仮想背景のメソッドを備えています。開発者は、この機能を動的に有効または無効にしたり、独自の背景代替画像を提供することができます。
Video Processorライブラリの使用方法 このライブラリは、NPMパッケージとして提供されていますが、scriptタグを使用することもできます。
NPM
npm install @twilio/video-processors --save この方法を使うと、以下のようにtwilio-video-processorsをインポートすることができます。
import * as VideoProcessors from '@twilio/video-processors'; Scriptタグ
<script src="https://my-server-path/twilio-video-processors.js"></script> この方法を使うと、twilio-video-processors.jsはブラウザのグローバルスコープの下にVideoProcessorsインスタンスを設定します。
const VideoProcessors = Twilio.VideoProcessors; 以下は、
VirtualBackgroundProcessorクラスを使用して、Webカメラのビデオストリームの背景を、指定した背景画像に置き換える例です。仮想背景プロセッサのインスタンスは、プロセッサとしてビデオトラックに追加されます。import { createLocalVideoTrack } from 'twilio-video'; import { VirtualBackgroundProcessor } from '@twilio/video-processors'; let virtualBackground; const img = new Image(); img.onload = () => { virtualBackground = new VirtualBackgroundProcessor({ assetsPath: 'https://my-server-path/assets', backgroundImage: img, }); virtualBackground.loadModel().then(() => { createLocalVideoTrack({ width: 640, height: 480, frameRate: 24 }).then(track => { track.addProcessor(virtualBackground); }); }); }; img.src = '/background.jpg'; その仕組み
Webカメラの映像は、機械学習モデルに渡され、背景から参加者の体を分離する(=セグメンテーション)処理が行われます。この処理は、ビデオフレームごとに行われます。このセグメンテーションにより、参加者のビットマップマスクが作成され、どのピクセルが参加者の一部で、どのピクセルが背景の一部であるかが示されます。
マスクが使えるようになると、背景にぼかし効果をかけたり、マスクを変えずに背景を入れ替えたりすることができます。
最後に、更新されたテクスチャはブラウザに渡され、エンコードされてビデオ通話の他の参加者に配信されます。開発者が定義した背景画像が提供されている場合も、同様の手法が用いられます。
このバージョンのビデオプロセッサで使用されているセグメンテーション機械学習モデルは、Google社のMediaPipe Selfie Segmentationモデルです。ブラウザのパフォーマンスを最適化するために、このモデルはTensorFlowLite上で実行され、WebAssembly形式で構築されています。また、パフォーマンス向上のためにWebAssemblyのSIMD命令を使用した実装になっています。このバージョンのVideo Processorライブラリは、ChromeとEdgeブラウザでのみサポートされています。
今スグお試しいただけます Video Processor APIは、Twilio Video JavaScript SDK 2.15.0で導入済みで、Video Processor JavaScript Libraryは今スグにでも利用可能です。その他の情報は、こちらの開発者向けドキュメントをご確認ください。この API とライブラリにより、開発者は ビデオ アプリケーションを開発する際に、ユーザーエクスペリエンスをカスタマイズする新しい方法を得ることができます。皆様がどのようなビデオアプリケーションを創造されるか楽しみにしています。