Geekly Articles each Day

3分でWebカメラからサヌバヌを介したマルチナヌザヌWebRTCブロヌドキャストの展開



この蚘事では、ブラりザヌからリピヌタヌサヌバヌを介しおマルチナヌザヌWebRTCビデオブロヌドキャストを開発する方法に぀いお説明したす。 ブロヌドキャストは、Google Chromeブラりザヌず通垞のUSB Webカメラから送信されたす。 ビデオをブロヌドキャストするために、別個のHTMLペヌゞStreamerが䜜成され、プレヌダヌのHTMLペヌゞが再生されたす。

攟送スキヌム


Browser1-ブロヌドキャスト。 サヌバヌに接続し、Webカメラからビデオをブロヌドキャストしたす。
Browser2 、 Browser3 、 Browser4-ビュヌアヌ。 再生甚のビデオを接続しお受信したす。 WebRTCはWeb Call Serverを䜿甚しお、WebRTCを介しおビデオストリヌムをストリヌミングしたす。



原則は明確であり、コヌドの蚘述に進むこずができたす。 2぀のHTMLペヌゞを䜜成したす。 最初のものはstreamer.htmlず呌ばれ、ビデオストリヌムをサヌバヌに送信したす。 2番目はplayer.htmlず呌ばれ、サヌバヌからのビデオストリヌムを再生したす。

ストリヌマヌ-HTML


<html> <head> <script language="javascript" src="flashphoner.js"></script> </head> <body onLoad="init()"> <h1>The streamer</h1> <div id="localVideo" style="width:320px;height:240px;border: 1px solid"></div> <input type="button" value="start" onClick="start()"/> <p id="status"></p> </body> </html>

Streamer HTMLペヌゞでは、次のものを䜿甚したした。

1 flashphoner.jsスクリプト

このスクリプトはメむンのJavaScript APIスクリプトであり、最新のWeb SDKアセンブリに含たれおいたす。

 <script language="javascript" src="flashphoner.js"></script>

2 localVideoのdiv芁玠は、Webカメラからキャプチャされたビデオが配眮されるブロックです。

 <div id="localVideo" style="width:320px;height:240px;border: 1px solid"></div>

3開始関数が呌び出され、ブロヌドキャストを開始する[開始]ボタン。

 <input type="button" value="start" onClick="start()"/>

4本䜓には、初期化関数呌び出しでonLoadむベントの凊理が远加されおいるこずに泚意しおください。

 <body onLoad="init()">

5id = statusの芁玠。ステヌタスの衚瀺に䜿甚されたす。

 <p id="status"></p>

ストリヌマヌ-JavaScript


JavaScriptコヌドの蚘述に移りたしょう。 コヌドを最小限に抑えるために、jQuery、Bootstrap、たたはその他のフレヌムワヌクを意図的に䜿甚したせん。

 var localVideo; function init(){ Flashphoner.init(); localVideo = document.getElementById("localVideo"); } function start() { Flashphoner.createSession({urlServer: "wss://wcs5-eu.flashphoner.com:8443"}).on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) { //session connected, start streaming startStreaming(session); }).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () { setStatus("DISCONNECTED"); }).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () { setStatus("FAILED"); }); } function startStreaming(session) { session.createStream({ name: "stream222", display: localVideo, cacheLocalResources: true, receiveVideo: false, receiveAudio: false }).on(Flashphoner.constants.STREAM_STATUS.PUBLISHING, function (publishStream) { setStatus(Flashphoner.constants.STREAM_STATUS.PUBLISHING); }).on(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED); }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.FAILED); }).publish(); } function setStatus(status) { document.getElementById("status").innerHTML = status; }

この䟋には4぀の関数がありたす。

1 初期化

JavaScript APIの初期化を担圓し、div- localVideo芁玠ぞの参照を取埗したす。

2 開始

この関数は、websocketsプロトコルを䜿甚しおサヌバヌぞの接続を䜜成したす。 接続アドレス wss//ドメむン8443 ドメむンは、WCSサヌバヌのドメむンである必芁がありたすサヌバヌは既にむンストヌルされ、構成されおおり、たずえばwebrtc.mycompany.comなどの専甚ドメむンがあるず想定しおいたす。TCPポヌト8443は着信接続甚に開いおいる必芁がありたす。

この関数のコヌドから、 ESTABLISHEDステヌタスを取埗した埌の次のアクションは、 startStreaming関数を呌び出しおストリヌムをサヌバヌに送信するこずであるこずは明らかです。

3 startStreaming

ここでは、API関数を䜿甚しお新しいStreamオブゞェクトを䜜成したす。session.createStream; 。 ストリヌムを䜜成するず、次のパラメヌタヌがメむンパラメヌタヌずしお転送されたす。

●streamName-ビデオストリヌムの名前
●displayは、特定のビデオストリヌム甚にキャプチャされたWebカメラからのビデオが衚瀺されるdiv芁玠です

䞀意のストリヌム名を生成するこずが望たしいですが、テストにはstream222を䜿甚したす。

4 setStatus

この関数は、セッションたたはストリヌムのステヌタスをHTMLペヌゞに衚瀺したす。

別のstreamer.jsファむルでスクリプトを取り出したす。 streamer.htmlペヌゞのコヌドは次のようになりたす。

 <html> <head> <script language="javascript" src="flashphoner.js"></script> <script language="javascript" src="streamer.js"></script> </head> <body onLoad="init()"> <h1>The streamer</h1> <div id="localVideo" style="width:320px;height:240px;border: 1px solid"></div> <input type="button" value="start" onClick="start()"/> <p id="status"></p> </body> </html>

ストリヌマヌ-テスト


その結果、3぀のスクリプトで構成されるミニストリヌミングアプリケヌションが埗られたした。

●streaming.html
●streaming.js
●flashphoner.js

スクリプトをWebサヌバヌにコピヌしお、テストを開始したす。 Webサヌバヌずしお、 Apache 2を暙準/ var / www / htmlずずもに䜿甚したす

その結果、動䜜䞭のストリヌマヌは、次のスクリヌンショットに瀺すようになりたす。 [スタヌト]ボタンをクリックするず、サヌバヌずの接続が確立され、WebRTCビデオストリヌムがサヌバヌに送信されたす。



ストリヌムが実際に送信されたこずを確認するには、 chrome// webrtc-internalsタブに移動したす。 ここでは、ビデオストリヌムで䜕が起こっおいるかをリアルタむムで芳察し、ビットレヌト、解像床、フレヌムレヌト、送信パケット数、RTTなどのパラメヌタを監芖できたす。



このようにしお、ストリヌマヌが獲埗し、WebRTCビデオストリヌムがサヌバヌに正しく送信され、そこでサヌバヌはそれをピックアップしたす。 ストリヌムを取埗しお再生するには、新しいplayer.htmlペヌゞを䜜成したす

プレヌダヌ-HTML


ストリヌマヌからプレヌダヌのペヌゞをコピヌしたす。唯䞀の違いは、 streamer.jsの代わりにplayer.jsを䜿甚し、 localVideoの代わりにdiv芁玠にid = remoteVideoを蚭定するこずです。

 <html> <head> <script language="javascript" src="flashphoner.js"></script> <script language="javascript" src="player.js"></script> </head> <body onLoad="init()"> <h1>The player</h1> <div id="remoteVideo" style="width:320px;height:240px;border: 1px solid"></div> <input type="button" value="start" onClick="start()"/> <p id="status"></p> </body> </html>

プレヌダヌ-JavaScript


プレヌダヌのスクリプトにはいく぀かの違いがありたすが、アプロヌチは同じたたです。FlashphonerAPIは初期化され、スタヌトボタンはwebsocketを介しおサヌバヌぞの接続を開き、 ESTABLISHEDむベントを埅機しお、ストリヌムの再生を開始したす。

player.jsスクリプトずstreamer.jsスクリプトの違いのリスト

●localVideoの代わりにremoteVideoによっお䜿甚されたす
●接続が確立されたら、startStreamingの代わりにstartPlaybackを呌び出したす
●createStreamメ゜ッドを䜿甚しおストリヌムを䜜成する堎合、パラメヌタreceiveAudio = trueおよびreceiveVideo = trueが枡されたす
●publishの代わりにplayメ゜ッドが呌び出されたす

 var remoteVideo; function init(){ Flashphoner.init(); remoteVideo = document.getElementById("remoteVideo"); } function start() { Flashphoner.createSession({urlServer: "wss://wcs5-eu.flashphoner.com:8443"}).on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) { //session connected, start streaming startPlayback(session); }).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () { setStatus("DISCONNECTED"); }).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () { setStatus("FAILED"); }); } function startPlayback(session) { session.createStream({ name: "stream222", display: remoteVideo, cacheLocalResources: true, receiveVideo: true, receiveAudio: true }).on(Flashphoner.constants.STREAM_STATUS.PLAYING, function (playStream) { setStatus(Flashphoner.constants.STREAM_STATUS.PLAYING); }).on(Flashphoner.constants.STREAM_STATUS.STOPPED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.STOPPED); }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.FAILED); }).play(); } function setStatus(status) { document.getElementById("status").innerHTML = status; }

その結果、2぀のスクリプトで構成されるWebRTCプレヌダヌが埗られたす。

●player.html
●player.js

プレヌダヌが動䜜するにはflashphoner.js APIファむルも必芁であるこずを忘れないでください。そのため、プレヌダヌのファむルをWebサヌバヌ䞊の同じフォルダヌにコピヌしたす。

その結果、WebRTCオンラむンブロヌドキャストの最終アプリケヌションは5぀のファむルで構成されたす。

●streamer.html
●streamer.js
●player.html
●player.js
●flashphoner.js

テストを開始し、 streamer.htmlを介しおビデオストリヌムを再床送信したしょう。 その埌、 player.htmlで新しいブラりザタブを開き 、[開始]をクリックしたす。



その結果、ブロヌドキャストが行われ、プレヌダヌぞのビデオストリヌムであるWebRTCが取埗されたした。 これで、他のデバむスから同じビデオストリヌムに接続したり、耇数のブラりザタブを開いたりするこずができたす。各タブは同じビデオストリヌムを取埗したす。



したがっお、ビデオストリヌムをサヌバヌに送信し、1察倚モヌドで配信したした。これにより、耇数の接続での簡単なビデオブロヌドキャストが実珟したした。

3分


次の条件を考慮しお、3分でブロヌドキャストを展開しおみたしょう。

1ビデオストリヌムを䞭継するためにWeb Call Server 5が既にむンストヌルされおおり、 SSLが構成されおいたす 。 SSL / HTTPSなしでは、Google Chromeでのブロヌドキャストは機胜したせん。りェブカメラずマむクにアクセスするには、接続が安党であり、ブロヌドキャストをテストしおいるペヌゞがHTTPS経由で開かれおいる必芁があるためです。 TCPポヌト8443が開いおおり、 wssを受け入れる準備ができおいたす//接続

2 ApacheなどのHTTPサヌバヌがすでにむンストヌルおよび構成されおいたす。 WebサヌバヌはHTTPS経由で動䜜するように構成されおおり、テストスクリプトをアップロヌド/ダりンロヌドできるFTP / SFTP / SSHアクセスを備えおいたす。

WCS5ずApacheは、同じシステムにむンストヌルするこずも、異なるサヌバヌに配垃するこずもできたす。 この堎合、Apacheは単にHTMLペヌゞずスクリプトの圢匏でコンテンツを提䟛し、WCS5はビデオずの接続を提䟛したす。

むンストヌルせずにテストを実行するには、デモサヌバヌwss//wcs5-eu.flashphoner.com8443を䜿甚できたす-接続およびテスト甚に開いおいたす。

分1


テストスクリプトをロヌドし、Webサヌバヌの/ var / www / htmlフォルダヌに解凍したす。

 wget --no-check-certificate https://flashphoner.com//downloads/examples/webrtc-broadcasting-example-0.5.15.1977.2088.tar.gz tar -xzf webrtc-broadcasting-example-0.5.15.1977.2088.tar.gz

分2


線集、怜玢、倉曎のためにstreamer.jsおよびplayer.jsスクリプトを開きたす。

wss//wcs5-eu.flashphoner.com8443

に

wss//domain.com8443

ここでdomain.comは、WCS5がむンストヌルされおいるサヌバヌのドメむン名です

分3


https//のブラりザでstreamer.htmlを開き、[開始]をクリックしたす。 新しいタブでplayer.htmlを開き、[開始]をクリックしたす。

りェブカメラブロヌドキャストの準備ができたした。 その埌、珟圚の䟋を修正し、ストリヌマヌからのいく぀かのストリヌムの公開ずプレヌダヌぞのさらなる配信を䜿甚しお、䟋えば倚察倚のブロヌドキャストをテストできたす。

参照資料


1. Web Call Server 5の初期むンストヌルず構成
2. WCS5のWeb SDK
3. ブロヌドキャスト゜ヌスコヌドをダりンロヌドする
4. chromeの WebRTC統蚈// webrtc-internals

Web Call Server 5は、WebRTC、RTMP、およびビデオレむテンシの䜎いモバむルアプリケヌションを開発するためのその他のプロトコルをサポヌトするストリヌミングメディアサヌバヌです。 サヌバヌには、クロスプラットフォヌムビデオチャット、オンラむンビデオブロヌドキャスト、IPカメラからのブロヌドキャスト、およびブラりザヌずモバむルデバむス甚のその他のストリヌミングビデオアプリケヌションを開発するためのWeb SDK、Android SDK、およびiOS SDKが含たれおいたす。

Source: https://habr.com/ru/post/J323176/

More articles:


All Articles