Vonage Video APIによる公開ビデオ通話の自動ズームと中央揃え

はじめに

ビデオ通話の会議では、対面式の会議と比べて相手とのつながりを感じにくいことがある。ビデオ通話の間中、相手の感情や気持ち、ボディランゲージを注意深く観察することができないからだ。さらに、人は常に自分とウェブカメラの間にある程度の距離を保っている。そのため、プレゼンターは聴衆に即座に反応することが難しくなる。

そこで、Vonage ml-transformersとメディア・プロセッサ・ライブラリを使用して、ビデオ通話中に通話相手の顔を拡大する機能が導入された。これは、医療コンサルタントのセッション中に特別なケアを提供できる素晴らしい機能である。ml-transformersは患者の顔を検出し、メディア-プロセッサは相談セッション中に患者の顔に焦点を合わせるために使用することができます。そのため、医師は患者の顔の反応やボディランゲージ、あるいは顔面蒼白や顔面腫脹のような病気のシグナルを通話中にはっきりとモニターすることで、より深い診断ができるようになった。

この記事では、Vonage Video APIとVonage ml-transformersおよびメディアプロセッサーライブラリを統合し、パブリッシャーを自動的にズームし、中央に配置するビデオ通話を作成する方法を紹介します。

前提条件

1. Video APIアカウント。まだアカウントをお持ちでない場合は ビデオダッシュボード.

2. Node.jsのバージョン >= 16.8

3. Vite.jsのバージョン >= 2.9

セッションに参加する

Video 通話セッションに参加するには、セッション ID、JWT、および API キーが必要です。セッションIDとトークンは、Vonage Video API Accountのプロジェクトの "Create Session ID "と "Generate Token "で生成できます。

次に、その情報を使って、生成されたセッションを初期化し、接続するために initSessionそして connect.を追加することを忘れないでください。 Video API ライブラリを HTML ファイルに追加することを忘れないでください。Vonage Video API ライブラリの詳細については、以下をご覧ください。 Vonage Video API Client SDKsをご覧ください。.

session = OT.initSession(apiKey, sessionId);

 // Connect to the session

 await session.connect(token, function(error) {

   // If the connection is successful, publish to the session
   if (error) {
     console.log("SESSION CONNECT ERROR", error);
     handleError(error);
   } else {
     console.log("SESSION CONNECT SUCCESS");
     initializeStream();
     layout.layout();
   }
 });

を追加するとよい。 streamCreated, streamDestroyedそして streamPropertyChangedイベントリスナーを追加するとよいでしょう。Video 通話中によりよいレイアウトを表示するために、ブラウザでレイアウトを変更する必要があるかもしれないからです。

StreamCreatedイベントは、他のユーザー(別名サブスクライバー)が同じセッションに参加した 場合にトリガーされる。一方 streamDestroyedイベントは、サブスクライバがセッションを抜けたことを通知する。一方 streamPropertyChangeイベントは、サブスクライバの Video ディメンジョン、Audio ステート、または Video ステートなどの Video プロパティが変更されたことを通知します。

MLトランス

をご覧ください。 vonage/ml-transformersライブラリは複数の関数で構成されている。例えば、顔メッシュ、顔検出、背景ぼかし効果、仮想背景置換など。

このチュートリアルでは、ml-transformersライブラリを使って出版社の顔を検出する方法を紹介します。

まず、mediaPipeHelperを "face_detection "モデルで初期化する。次に、ウェブカメラの画像を定期的にmediaPipeHelperに送信します。 mediaPipeHelper.send(image).

ライブラリが検出処理を完了すると、初期化時に作成したリスナー関数に結果を渡します。この場合、リスナー関数は顔検出結果を受け取り、後処理のために結果をウェブワーカーに渡します。

    import { isSupported, MediapipeHelper } from '@vonage/ml-transformers';

    const mediaPipeHelper = new MediapipeHelper();

    mediaPipeHelper.initialize({
     mediaPipeModelConfigArray: [{modelType: "face_detection", options: {
         selfieMode: false,
         minDetectionConfidence: 0.5,
         model: 'short'
       },
       listener: (results) => {
          if (results && results.detections.length !== 0) {
            worker.postMessage({
              operation: "faceDetectionResult",
              result: results.detections[0].boundingBox
            });
          }
       }}]
    });

結果は、正規化された寸法に変換された検出された顔の寸法の情報を含むバウンディングボックスである。実際の値は、この結果にVideo寸法を乗算することで得られる。 faceWidth = resultWidth * videoWidth.

クロップされた寸法は、ビデオをズームするために適用されます。通常、クロップされた寸法は、検出された顔の寸法に調整する必要があり、顔の周囲に背景が含まれるように、適度なマージンを持たせる必要がある。新しい計算寸法は、ストリーム変換時にVideoをクロップするために使用される。

メディア・プロセッサー

従来は、ビデオを操作するために <canvas>要素のような仲介要素が必要でした。対照的に、挿入可能ストリームでは、開発者は、ビデオのサイズを変更したり、仮想背景を追加したり、音声効果を追加したりするなど、ビデオ/オーディオストリームを直接処理することができます。そのため vonage/メディア・プロセッサライブラリは、挿入可能ストリームをバックグラウンドで利用して、Videoストリームを操作する。

このライブラリは、ストリーム操作の際に大量の変換関数を処理することができる。この場合、希望する寸法の新しいVideoストリームを生成するのに必要な変換関数は1つだけです。

まず、メディアプロセッサを初期化し、transform関数で設定します。 setTransformers関数を呼び出す。このtransform関数は、先ほど計算した寸法を持つ新しいvideoFrameを生成します。これで、新しいVideoFrameを使用して、ビデオ通話でパブリッシュできるようになります。

import { MediaProcessor } from '@vonage/media-processor';

    mediaProcessor = new MediaProcessor();
    let transformers = [];
    transformers.push({transform});
    mediaProcessor.setTransformers(transformers);
 
    function transform(videoFrame, controller) {
       const cropVideo = new VideoFrame(videoFrame, {
           visibleRect: {
               x: visibleRectDimension.visibleRectX,
               y: visibleRectDimension.visibleRectY,
               width: visibleRectDimension.visibleRectWidth,
               height: visibleRectDimension.visibleRectHeight
           },
           alpha: 'discard'
       });

       videoFrame.close();
       controller.enqueue(cropVideo);
    }

ストリームを公開する

上記の手順をすべて実行すると、パブリッシャーの顔に焦点を当てた Video を生成できるはずです。次に、ビデオをセッションに公開し、同じセッションにいるすべてのユーザーにビデオストリームが見えるようにする必要があります。

Video を公開するには、生成された Video トラックを使ってパブリッシャーオブジェクトを作成し、次に publishを呼び出してパブリッシャーオブジェクトをセッションに発行します。パブリッシャーオブジェクトをセッションに発行するには ドキュメントを参照してください。

let publisher = OT.initPublisher('croppedVideo', {
        insertMode: 'append',
        videoSource: videoTracks[0]

    }, handleError);
    session.publish(publisher, handleError);

結論

これで、ビデオ通話で顔フォーカス・ビデオを公開する準備ができました！ml-transformersとmedia-processorライブラリを使って、顔にフォーカスしたビデオをすばやく作成する方法がお分かりいただけたでしょうか。

詳細とコードサンプルは GitHub リポジトリ.

ご質問がある場合は コミュニティ・スラックに参加するか ツイッター.