Clever Geek Handbook

WebRTCビデオストリームのプレビュー画像をPNG画像で作成します

WebRTCを介してWebカメラビデオをストリーミングするユーザーは10人です。 次のように表示するには、1つのWebページにストリームのスナップショット（サムネイル）を表示する必要があります。









写真の代わりにビデオを再生するだけでかまいませんが、各ストリームが1 Mbps帯域を使用する場合のビットレートはどうなるかを考えてみましょう。 10個すべてをプレイすると、10 Mbpsになります。 プレビューするには多すぎませんか？



サーバーからのビデオストリームからフレームを要求し、それをPNGの形式で取得し、ブラウザで画像を表示する方がはるかに良いでしょう。









まず、リクエストに応じてPNG画像の読み込みを実装しました。



  1. 非同期リクエストを作成します。 



    stream.snapshot();


  2. サーバーは、画像をファイルシステムに保存します。
  3. スナップショットをリクエストしたユーザーは、画像のURLを受け取り、HTMLタグで画像を挿入できます。 



     <img src="{url}"/>


このオプションは機能しましたが、私たちは何かが好きではありませんでした。 サーバーに画像を保存するか、NginxまたはApacheにアップロードして後で静的に配布するためにそれらを発明する必要がある可能性があります。



その結果、PNGをBase64でラップし、この形式でクライアントにスナップショットを送信することにしました。 この方法では、ファイルはhttpを介してサーバーから配布されません。 PNGファイルのコンテンツが生成され、リクエスト時にWebsocketを介してクライアントに送信されます。



JavaScriptコードを使用したプロセスの段階的な説明：



1. AliceはWebRTCを介してWebカメラからサーバーにビデオストリームを送信し、ストリームstream1に名前を付けます。 



 session.createStream({name:"stream1"}).publish()


2.ストリームの名前を知っているボブは、次の方法でスナップショットを要求できます。 



 var stream = session.createStream({name:"stream1"}); stream.snapshot();


スナップショットを取得するために、BobはSTREAM_STATUS.SNAPSHOT_COMPLETEリスナーを切断し、ページにある要素にBase64イメージを挿入します。 



 stream.on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){ snapshotImg.src = "data:image/png;base64,"+stream.getInfo(); }


完全なスナップショットのサンプルコードはこちらから入手できます 。



この例では、ビデオストリームをサーバーに送信し、[ テイク ]ボタンを定期的にクリックすることにより、このビデオストリームからスナップショットを取得できます。 もちろん、必要に応じて、たとえば1分間に1回、ストリームからスナップショットを削除する適切なスクリプトを記述することにより、これを自動化できます。









サーバー側でスナップショットを取得するには、ビデオストリームのデコードが必要です。 着信WebRTCストリームはデパケット化され、デコードされ、この時点でその写真を撮ることが可能になります。 デコードと通常の再生のスキームは次のようになります。









通常の再生では、ストリームはデコードされず、そのまま視聴者に届きます。 スナップショットが必要な場合は、デコードに使用されたビデオストリームのブランチから取得されます。



スナップショットを操作する場合、WebRTCサーバーWeb Call Server 5とWeb SDKが使用されます 。これは、オンラインブロードキャストのスナップショットを操作するためのJavaScript APIを提供します。


More articles:


All Articles