Geekly Articles each Day

WebRTC、Safari


昨年4月、プレスリリースがネットワークを席巻し、AppleがMac OSおよびiOS用のSafariブラウザでWebRTCサポートを展開していることが明らかになりました。 プレスリリースがリリースされてから、AppleがSafari用にWebRTCを展開し続けてからちょうど1年が経ちます。 待っています。


しかし、誰もが待っているわけではありません。 現在、Safariでリアルタイムビデオが必要な人がいます。この記事では、iOS SafariおよびMac OS SafariでWebRTCを使用しない方法と、それを置き換える方法について説明します。

これまで、次のオプションがあります。


RTC（リアルタイム通信）に代わるものを探しているので、これらのオプションをiOS / Mac OSプラットフォームだけでなく、平均レイテンシ（秒単位）も比較します。
iOSMac OS待ち時間
HLS、ダッシュはいはい15
フラッシュrtmpいやはい3
フラッシュRTMFPいやはい1
Websocketはいはい3
WebRTCプラグインいやはい0.5

Hls


この表からわかるように、HLSは15秒以上の遅延で完全にリアルタイムから脱落しますが、両方のプラットフォームでうまく機能します。

フラッシュrtmp


「Flashが死んだ」という事実にもかかわらず、Mac OSでは引き続き動作し、リアルタイムの遅延が発生します。 しかし、Safariのフラッシュケースは実際にはあまり良くありません。 Flashがオフになっているだけです。

フラッシュRTMFP


Flash RTMPと同じことですが、唯一の違いはUDP上で動作し、パケットをドロップする方法を知っていることです。これは間違いなくリアルタイムで優れています。 良い遅れ。 iOSでは機能しません。

Websocket


比較的低いレイテンシが必要な場合のHLSの代替手段。 iOSおよびMac OSで動作します。

この場合、ビデオストリームはWebsockets（RFC6455）を経由し、JavaScriptレベルでデコードされ、 WebGLを使用してHTML5キャンバスにレンダリングされます 。 この方法はHLSよりはるかに高速に動作しますが、欠点があります。

  1. 一方向配信：ストリームはリアルタイムでのみ再生できますが、デバイスのカメラからキャプチャしてサーバーに送信することはできません。
  2. 許可の制限。 800x400以上の解像度では、JavaScriptでこのようなストリームをスムーズにデコードするために、最新のiPhoneまたはiPadに強力なCPUがすでに必要です。 iPhone5およびiPhone6では、解像度が640x480を超えることはほとんどなく、滑らかなままです。

WebRTCプラグイン


Mac OSでは、WebRTCを実装するWebRTCプラグインをインストールできます。 これにより間違いなく最良の遅延が得られますが、ユーザーがサードパーティソフトウェアをダウンロードしてインストールする必要があります。 Adobe Flash Playerもプラグインであり、手動インストールが必要な場合もありますが、Adobeの「デッドフラッシュ」プラグインは、Noname WebRTCプラグインよりも人気の点で明らかに優れています。 さらに、WebRTCプラグインはiOS Safariでは機能しません。

iOS用のその他のWebRTCの代替


Safariブラウザーに限定されない場合は、次のオプションを検討してください。

iOSネイティブアプリ


WebRTCをサポートするiOSアプリケーションを実装し、低遅延とWebRTCテクノロジーのすべてのパワーを取得します。 ブラウザではありません。 App Storeからのインストールが必要です。

クッパ


iOS用のWebRTC対応ブラウザ。 彼らはそれがWebRTCをサポートすると言いますが、私たちはそれをテストしていません。 非常に人気のあるブラウザではありません。 ただし、ユーザーに強制的に使用させることができる場合は、試してみることができます。

エリクソン


クッパと同じ。 WebRTCでどのように機能するかは不明です。 iOSでは人気がありません。

待ってる


AppleのWebRTC実装を待つことができます。 1年が経過しました。 たぶん、そう長くはかからないでしょう。 たぶん誰かがインサイダーを持っていますか？

iOS上のWebRTCの代替としてのWebsocket


上記の表は、iOS SafariにはHLSとWebsocketsの 2つのオプションしか残っていないことを示しています。 最初の遅延は15秒以上です。 2番目には制限と約3秒の遅れがあります。 まだMPEG DASHがありますが、これはリアルタイムの点では同じHLS / HTTPです。

上記の制限のため：


もちろん、Webソケットは、iOS SafariブラウザーのWebRTCの完全な代替であると主張することはできませんが、リアルタイムストリームを今すぐ再生できます。

この場合、リアルタイム翻訳のスキームは次のようになります。

  1. WebRTCビデオストリームを、たとえばMac OSまたはWin、ChromeブラウザーからWebソケットへの変換をサポートするWebRTCサーバーに送信します。
  2. WebRTCサーバーはストリームをMPEG + G.711に変換し、Websocketsトランスポートプロトコルでラップします。
  3. iOS Safariは、Websocketプロトコルを使用してサーバーへの接続を確立し、ビデオストリームを取得します。 次に、ビデオストリームを解凍し、オーディオとビデオをデコードします。 オーディオはWeb Audio APIを通じて再生され、ビデオはWebGLを使用してCanvasにレンダリングされます。



iOS SafariでWebsocketの再生をテストする


サーバーはWeb Call Server 5を使用します。これは、そのような変換をサポートし、Websocketを介してiOS Safariにストリームを提供します。 リアルタイムビデオストリームのソースは、ビデオをサーバーに送信するWebカメラまたはRTSPで実行されているIPカメラです。

これは、デスクトップからGoogle ChromeブラウザーでリアルタイムWebRTCビデオストリームをサーバーに送信する方法です。


そして、これは同じビデオストリームのリアルタイムでの再生がiOS Safariブラウザーでどのように見えるかです。


ここでは、ビデオストリームの名前としてd3c6を指定しました 。 WebRTCを介してChromeブラウザーから送信されたビデオストリーム。

ビデオストリームがIPカメラから取得される場合、iOS Safariでは次のようになります。


スクリーンショットからわかるように、ビデオストリームの名前としてRTSPアドレスを使用しました。 サーバーはRTSPストリームを取得し、iOS Safari用のWebsocketに変換しました。

WebページでのiOS Safariのプレーヤーの統合


プレーヤーのソースコードはこちらから入手できます 。 ただし、参照によるプレーヤーはiOS Safariだけで機能しません。 3つのテクノロジー（WebRTC、Flash、Websockets）を優先順に切り替えることができ、iOS Safariでの再生に必要なコードよりも少し多くのコードが含まれています。

プレーヤーコードを最小化して、iOS Safariで再生する最小構成を実証してみましょう。

最小限のHTMLページコードは次のようになります。player-ios-safari.html

<html> <head> <script language="javascript" src="flashphoner.js"></script> <script language="javascript" src="player-ios-safari.js"></script> </head> <body onLoad="init_page()"> <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>

このコードは、ページのメイン要素がdivブロックであることを示しています。

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

APIスクリプトがHTML5 Canvasをそこに貼り付けた後にビデオを再生するのは、このブロックです。

次はプレーヤースクリプトです。 スクリプトのボリューム：80行： player-ios-safari.js

 var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var remoteVideo; var stream; function init_page() { //init api try { Flashphoner.init({ receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js', decoderLocation: '../../dependencies/websocket-player/video-worker2.js' }); } catch(e) { return; } //video display remoteVideo = document.getElementById("remoteVideo"); onStopped(); } function onStarted(stream) { //on playback start } function onStopped() { //on playback stop } function start() { Flashphoner.playFirstSound(); var url = "wss://wcs5-eu.flashphoner.com:8443"; //create session console.log("Create new session with url " + url); Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ setStatus(session.status()); //session connected, start playback playStream(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ setStatus(SESSION_STATUS.DISCONNECTED); onStopped(); }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED); onStopped(); }); } function playStream(session) { var streamName = "12345"; var options = { name: streamName, display: remoteVideo }; options.playWidth = 640; options.playHeight = 480; stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) { setStatus(stream.status()); onStarted(stream); }).on(STREAM_STATUS.STOPPED, function() { setStatus(STREAM_STATUS.STOPPED); onStopped(); }).on(STREAM_STATUS.FAILED, function() { setStatus(STREAM_STATUS.FAILED); onStopped(); }); stream.play(); } //show connection or remote stream status function setStatus(status) { //display stream status }

このスクリプトの最も重要な部分には、APIの初期化が含まれます。

 Flashphoner.init({ receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js', decoderLocation: '../../dependencies/websocket-player/video-worker2.js' });


初期化中に、さらに2つのスクリプトがロードされます。


これらのスクリプトは、プレーヤーのWebソケットの中核です。 最初はビデオストリームの配信を担当し、2番目はその処理を担当します。 flashphoner.js 、 WSReceiver2.js 、およびvideo-worker2.jsスクリプトは、Web Call ServerのWeb SDKアセンブリでダウンロードでき、iOS Safariでストリームを再生するには接続する必要があります。

したがって、次の必要なスクリプトがあります。


サーバーへの接続は、次のコードを使用して確立されます。

 Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ setStatus(session.status()); //session connected, start playback playStream(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ setStatus(SESSION_STATUS.DISCONNECTED); onStopped(); }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED); onStopped(); }); }

ビデオストリームは、 createStream（）。Play（） APIメソッドを使用して直接再生されます。 ビデオストリームを再生すると、HTML要素CanvasがremoteVideo div要素に埋め込まれ、ビデオストリームがレンダリングされます。

 function playStream(session) { var streamName = "12345"; var options = { name: streamName, display: remoteVideo }; options.playWidth = 640; options.playHeight = 480; stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) { setStatus(stream.status()); onStarted(stream); }).on(STREAM_STATUS.STOPPED, function() { setStatus(STREAM_STATUS.STOPPED); onStopped(); }).on(STREAM_STATUS.FAILED, function() { setStatus(STREAM_STATUS.FAILED); onStopped(); }); stream.play(); }

コードには2つのことをハードコーディングしました。

1）サーバーURL

 var url = "wss://wcs5-eu.flashphoner.com:8443";

これはパブリックWeb Call Server 5デモサーバーであり、何か問題がある場合は、テスト用に独自のものをインストールする必要があります。

2）再生するストリームの名前

  var streamName = "12345";

これは、再生しているビデオストリームの名前です。 これがRTSP IPカメラからのストリームである場合、次のように登録できます。

 var streamName = "rtsp://host:554/stream.sdp";

最も目立たないが、非常に重要な機能：

 Flashphoner.playFirstSound();

モバイルプラットフォーム、特にiOS Safariでは、Web Audio APIの制限があります。これは、ユーザーが指でWebページの要素をクリックするまで、スピーカーからサウンドが再生されないようにします。 そのため、[スタート]ボタンを押すと、playFirstSound（）メソッドを呼び出します。このメソッドは、生成されたオーディオの短い部分を再生し、最終的にビデオがオーディオで再生できるようにします。

最終的に、4つのスクリプトと1つのHTMLファイルplayer-ios-safari.htmlで構成されるカスタムミニマルプレーヤーは次のようになります。



プレーヤーのソースコードはこちらからダウンロードできます。

したがって、iOS Safari用のWebRTCの現在の代替案について話し、Websocketテクノロジーを使用したビデオ伝送を備えたリアルタイムプレーヤーの例を検討しました。 おそらく、彼は誰かがWebRTCがSafariに来るのを待つのを助けるでしょう。

参照資料


プレスリリース -AppleがSafari用のWebRTCを公開
Websocket -RFC6455
WebGL仕様
Web Call Server -iOS Safariで再生するためにストリームをWebsocketに変換できるWebRTCサーバー
WCSのインストール -ダウンロードとインストール
Amazon EC2で起動-Amazon AWSでビルド済みサーバーイメージを起動します
ソースコード -プレーヤーの例：player-ios-safari.jsおよびplayer-ios-safari.html
Web SDK -flashphoner.js、WSReceiver2.js、video-worker2.jsスクリプトを含むWCSサーバー用のWeb API

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

More articles:


All Articles