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日