ピアへの接続と映像の描画¶

この章では、ピアへの接続と映像の描画を行う API について説明します。

シグナリングについて¶

WebRTC では、リモートのピアへの接続前にシグナリングサーバーを利用してシグナリングを行う必要があります。しかし、 WebRTC の仕様ではシグナリングの具体的な実装について定義されておらず、個々のシグナリングサーバーによってシグナリングの仕様が異なります。本ライブラリはシグナリングについて特に実装を用意していないので、利用するシグナリングサーバーに応じてシグナリングを実装する必要があります。

接続の準備を行う¶

RTCPeerConnection を生成します。 RTCPeerConnection はピアへの接続を管理するオブジェクトです。

例:

var pc = new RTCPeerConnection();

イベントの処理が必要な場合は、接続前にイベントハンドラを指定してください。

接続の開始と状態¶

RTCPeerConnection には接続を開始する API がありません。ピアに接続するには手動で Offer/Answer SDP を送受信してシグナリング処理を行い、イベントハンドラを使って ICE の処理を行う必要があります。どちらの処理も、利用するシグナリングサーバーと ICE サーバーの仕様に従って実装してください。

RTCPeerConnection は次の複数の状態を持ちます。

シグナリング (signalingState)
ICE 接続 (iceConnectionState)
ICE ギャザリング (iceGatheringState)
ピア接続 (connectionState)

connectionState は本ライブラリで追加したプロパティであり、 libwebrtc の RTCPeerConnection にはありません (ブラウザの API にはあります) 。 connectionState は他の状態が次の値になった場合に接続完了 (connected) とみなします。

signalingState == 'stable'
iceConnectionState == 'connected'
iceGatheringState == 'complete'

Offer/Answer SDP を指定する¶

Offer/Answer SDP は次のメソッドで指定できます。

setLocalDescription()
setRemoteDescription()

Offer/Answer SDP を生成する¶

Offer/Answer SDP は次のメソッドで生成できます。

createOffer()
createAnswer()

カメラの映像を取得する¶

カメラの映像とマイクの音声を扱うトラックは getUserMedia() で取得できます。 getUserMedia() が返す Promise の結果は、複数の入力トラックとストリーム ID を持つ RTCUserMedia です。取得したトラックを RTCPeerConnection に追加すると、映像と音声がピアに送信されるようになります。

例:

getUserMedia(null).then((info) => {
  var pc = new RTCPeerConnection();
  info.tracks.forEach(track =>
    pc.addTrack(track, [info.streamId])
  );
  ...
});

映像を描画する¶

VideoView の track プロパティに映像トラックを指定します。音声トラックを指定する必要はありません。映像トラックを指定すると音声も再生されます。

取得したトラックのリストについて¶

getUserMedia() で取得できる入力トラックのリストや、 RTCPeerConnection の sender, receivers, transceivers プロパティ (それぞれトラックを保持します) のリストは順不同です。必ずしも「映像、音声」の順に並ぶとは限らないので、接続数が 1 の場合でもトラックの種別を調べてください。

例: 描画する映像トラックを指定する:

// リストの先頭のレシーバーが映像トラックとは限りません
videoView.track = pc.senders[0].track;

// 映像トラックを検索する必要があります
var sender = pc.senders.find(each => {
    return each.track.kind == 'video'
});
videoView.track = sender.track;

音声の出力先をスピーカーフォンに変更する¶

setAudioPort() を使うと音声の出力先を変更できます。出力先をスピーカーにしたい場合 (スピーカーフォン) は speaker を指定します。

例: 音声の出力先を変更する:

// スピーカーフォンにする
setAudioPort('speaker');

// 元に戻す
setAudioPort('none');