ビデオライブストリーミングについては、初期段階でWebSocketを含む多くのソリューションを検討しましたが、さまざまな理由により、最終的にはこのソリューションを採用しませんでしたが、その学習経験を記録したいと思います。
WebSocket は、HTML5 が提供し始めた、単一の TCP 接続上で全二重通信を行うためのプロトコルです。
WebSocket API では、ブラウザとサーバーはハンドシェイク アクションを実行するだけで、ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接送信できます。
ブラウザは、JavaScript を介して WebSocket 接続を確立するリクエストをサーバーに送信します。接続が確立されると、クライアントとサーバーは TCP 接続を通じて直接データを交換できます。
Web Socket 接続を取得したら、send() メソッドを通じてサーバーにデータを送信し、onmessage イベントを通じてサーバーから返されたデータを受信できます。
プロセス中の主なアイデアは、録画ページで setTimeout() を使用して、一定の間隔でキャンバスを介してビデオをフレームごとの画像に変換し、WebSocket のソケット.send() を使用して画像データを送信することです。サーバー。ライブブロードキャストページでは、まず<img>構造体を作成し、websocketのsocket.onmessage()で画像データを取得し、それを<img>タグに表示することでライブブロードキャストを形成します。
付属コード
動画ページのHTML構造
<video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
ビデオページjs
<script type=text/javascript charset=utf-8> // + インスタンスを作成します varソケット = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /キャンバスに描画するための環境を返します。 var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var success = function(stream){ //ビデオストリームを取得し、URL に変換します video.src = window.URL.createObjectURL(stream); } // ソケットをオープンします。 Canvas オブジェクトにビデオ フレームを描画すると、Canvas は 100 ミリ秒ごとにフレームを切り替えて、裸眼ビデオ効果を形成します。 ; }catch( e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100) } else { throw e; if(video.src){ //Canvas の内容を PNG データ URI に変換してサーバーに送信します。圧縮係数は 0.5 です。 , 100) ; } //デバイスのカメラを呼び出し、リソースをビデオタグに配置します navigator.getUserMedia = navigator.webkitGetUserMedia || || navigator.mozGetUserMedia || navigator.msGetUserMedia({video:true, audio:false}, 成功, console.log);ライブページのHTML構造:
<img id=receiver style=width:1600px;height:900px/>
ライブページJS
<script type=text/javascript charset=utf-8> //ソケットインスタンスを作成します varReceiver_socket = new WebSocket(ws://+document.domain+:8008); var image = document.getElementById('receiver'); // メッセージをリッスンしますreceiver_socket.onmessage =関数(データ) { 画像.src=データ.データ } </script>要約する上記は、編集者が紹介する HTML5 での WebSocket の実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！