WebRTC API: カメラのフィードとレコーディングの埋め込み

現在、"aiROKU"は、あらゆる動画をブラウザにストリーミングするためのWebRTCをサポートしており、視聴者にとってはより一貫した体験を、サーバーにとっては全体的な負荷を軽減することができます。さらに、"aiROKU"のWebRTCビデオをWebサイトやサードパーティのアプリケーションで使用できるようになり、新しい統合の選択肢が広がりました。この記事では、そのような統合を実現する方法を、具体的に"aiROKU"の新しいWebRTC APIに見ていきます。リクエストとレスポンスの構造は、JSON APIとほぼ同様であることに注意してください。以下のコマンドはすべてGET-リクエストです。"aiROKU"サーバーは、WebRTC APIが正常に機能するために、STUNサーバーへの安定した接続を必要とします。

このAPIは、オンラインビューとアーカイブビューの2つの主要部分に分かれています。

すべてのコマンドは http://IP:10090/ - IP はサーバーの IP-address で始まります。各リクエストの最後は、以下にリストアップして説明します。

この機能は、XeomaのPRO版で利用可能です。トライアル版でもお試しいただけます。

オンラインビュー

1. ?get_available_webrtc_streams=
   このリクエストでは、サーバー上のカメラの現在のリストと、ビデオを取得するために必要なパラメーターを要求します。応答は次のようになります。 この応答の重要な部分は、パラメーターsourcewebrtcとwebServerIdです。IPとカメラ名は、特定のカメラを識別するためだけにあります。
   {
"192.168.0.77 Cam_2": "?sourcewebrtc=687474703A2F2F6C6F63616C686F73743A31303039302F766964656F322E6D6A70673F757365723D&webServerId=WebconnectorTransmitter.2"
}
   
2. ?sourcewebrtc=687474703A2F2F6C6F63616C686F73743A31303039302F766964656F322E6D6A70673F757365723D&webServerId=WebconnectorTransmitter.2&example=
   この要求は、指定されたカメラからのWebRTCストリーム（の値を求めるsourcewebrtc所与有する）ウェブサーバーモジュール（値webServerIdその鎖中に）。ブラウザでは、応答は、それ以外の場合は空白のページにあるカメラからのオンラインビデオになります。
3. 外部サイトまたはアプリがストリームにアクセスする前に、WebRTC APIとの最初の対話を行う必要があります。このジョブは、JSスクリプトwebrtc_view_common.jsに含まれます（メインディレクトリの一部である"aiROKU"Webフォルダーにあります）。このスクリプトには、connectWithWebrtcServerメソッドが含まれています。ページが読み込まれたときに呼び出す必要があります。この同じスクリプトが、ビデオをフェッチするための残りのすべての作業を処理します。
4. このページをロードするには、もう1つのJSスクリプトが必要です。webrtc_adapter_min.jsは、前のディレクトリと同じディレクトリにあります。
5. 結果のストリームは、<video>タグを使用して書き込む必要があります。webrtc_view_common.jsの別のメソッド（具体的には、onRemoteTrack）は、ストリームをこのタグに添付します。したがって、HTMLファイルには次の行が必要です。
   <video id="remote-video" autoplay></video>
<audio id="remote-audio" autoplay></audio>

アーカイブビュー

1. ?archive_list=
   この要求は、サーバー上で使用可能なすべてのアーカイブの名前を要求します。応答は次のようになります。
   Preview+Archive.12
Preview+Archive.18
Preview+Archive.7
Preview+Archive.21
Preview+Archive.24
2. ?archive_date_list=&archive=NameArchive
   NameArchive –指定されたアーカイブの名前。
   このリクエストでは、そのアーカイブ内に現在記録があるすべての日付（日）を要求します。Preview + Archive.12がPreview％2BArchive.12に変わることに注意してください。応答は次のようになります（日付はyyyy-mm-ddの形式です）：
   2020-08-22
2020-08-23
2020-08-24
2020-08-25
2020-08-31
3. ?archive_minutes=&archive_date=2020-08-24&archive=NameArchive
   2020-08-24 –必要な日付。
   このリクエストは、その日に録音されたすべての分のリストを要求します。ここでのタイムゾーンはサーバーから取得されます。応答は次のようになります（タイムコードはhh：mm：ssの形式です）：
   16:39:14
16:40:14
16:41:14
16:42:13
16:43:13
16:44:13
…
4. ?start_webrtc_archive=&archive=NameArchive&peer_id=123&archive_date=2020-08-24&archive_minute=16:40:00&archive_millis=1400
   123 – WebRTCサーバーから受信した一意のID（詳細は項目9を参照）。
   16:40:00 –必要な分。
   14000 –分の先頭からカウントするミリ秒数。
   このリクエストは、特定のミリ秒からアーカイブの特定の部分のストリーミングを開始するように要求します。archive_millisパラメーターは60000を超えることはできず、1分ごとにリセットする必要があることに注意してください。
5. ?stop_webrtc_archive=&archive=NameArchive&peer_id=123
   このリクエストは、指定されたアーカイブのストリーミングを停止するように要求します。
6. ?get_last_archive_time=&archive=NameArchive&peer_id=123
   この要求は、特定のアーカイブで現在再生されているミリ秒数を要求します。これは、同期に特に役立ちます（たとえば、再生ページのタイムラインバーなど）。応答は次のようになります。
   {
"EOF":false,
"millisFromMinuteStart":15018,
"time":"16:40"
}
7. ページはアーカイブビューにアクセスする前に、それは以下のJSスクリプトをロードする必要があります。
   webrtc_view_common.js
   webrtc_adapter_min.js
8. "aiROKU"のWebRTCサーバーとの初期接続を確立するには、クライアントはwebrtc_view_common.jsからメソッドgetRequestUrlおよびonConnectを呼び出す必要があります。コードサンプル：
   $.ajax({
url: getRequestUrl("connect"),
success: onConnect,
error: function(xhr, status, error) { onError("Connect failed: " + error); }
});
9. onConnectはwebrtcidパラメーターを設定します。その値はpeer_idパラメーターに割り当てる必要があります（項目4〜6を参照）。WebRTC APIは、STUNサーバーから値自体をフェッチします。デフォルトでは、"aiROKU"はstun.l.google.com:19302を使用します。webrtc_view_common.js（2行目）で別のもの（自分のものでも）に変更できます。
10. 結果のストリームは、<video>タグを使用して書き込む必要があります。webrtc_view_common.jsの別のメソッド（具体的には、onRemoteTrack）は、ストリームをこのタグに添付します。したがって、HTMLファイルには次の行が必要です。
    <video id="remote-video" autoplay></video>
<audio id="remote-audio" autoplay></audio>

2020年9月15日