初めに

本稿は、「PeerJSを使ったリアルタイムビデオ通話のデモを実装してみたシリーズ」のPART(3)である。

PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(1) - mediaDevices.getUserMedia()の使い方
PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(2) - PeerJS疎通確認
PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(3) - カメラ映像をストリーミング

前回までの記事では、テキストデータの授受までを記載しました。

今回は、さらにもう一歩踏み込んで、カメラ映像のリアルタイムストリーミング(デモ)を実装してみようと思います。

リアルタイムストリーミング(デモ)実装手順

カメラ映像にアクセスし、ストリームデータを取得する。
双方でのコネクションを確立する。
2. で取得したカメラ映像を相手に送る。

1. カメラ映像にアクセスし、ストリームデータを取得する。

相手のPeerIDを指定してpeer.callを実行することで、その相手を呼び出すことができます。
※相手を呼び出す時、または、呼び出しに応答する時には、MediaStreamを提供する必要があります。
Skyway - 公式ドキュメント

ソースコードは、以下の通り。

sample.html

<script type="text/javascript">
　let localVideo;

  // カメラ、オーディオ等のリソースへアクセス
  navigator.mediaDevices.getUserMedia({video : true, audio : true})
  .then(function (stream) {
    // カメラ、オーディオリソースへのアクセス成功時
    // 変数videoStreamに取得したストリームデータを代入
　　localVideo = stream;
  }).catch(function (error) {
　  // カメラ、オーディオリソースへのアクセス失敗時
　　// エラー内容をコンソール出力する。
    console.log(error);
  });
</script>

2. 双方でのコネクションを確立します。

[呼び出す側]

caller.js

// mediaStreamは自端末のカメラ映像(ストリーミングデータ)
let call = peer.call('reciverId',mediaStream)

[呼び出される側]

callee.js

peer.on('call',function(call){
 // mediaStreamは自端末のカメラ映像(ストリーミングデータ)
 call.answer(mediaStream);
});

[※重要]
相手を呼び出す時、または、呼び出しに応答する時には、MediaStreamを提供する必要があります。

3. `2.` で取得したカメラ映像を相手に送る。

続いて、navigator.mediaDevices.getUserMedia()を使用して、端末のカメラ映像にアクセスします。

ソースコードは、以下の通り。

[呼び出し側]

caller.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
  <video id="local_video" autoplay></video>
  <video id="remote_video" autoplay></video>
</body>

  <script type="text/javascript">

    let localVideo = document.getElementById('local_video');
    let RemoteVideo = document.getElementById('remote_video');

    let peer = new Peer('senderId',{key : 'we074c3o2tv2huxr'});

    navigator.mediaDevices.getUserMedia({video : true, audio : true})
    .then(function (stream) {
      // カメラ映像、オーディオへのアクセスが成功した場合
      // 取得したカメラ映像を相手に送ります。
      localVideo.srcObject = stream;
      let call = peer.call('reciverId',stream);
      if (call != null) {
        call.on('stream', function(stream) {
               // ストリーミングデータ受信処理
               RemoteVideo.srcObject = stream;
        });
      }
    }).catch(function (error) {
      // カメラ映像、オーディオへのアクセスが失敗した場合
      // エラーの内容をconsole.logで出力します。
      console.log(error);
    });

  </script>
</html>

[呼び出される側]

callee.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
</head>
<body>
  <video id="local_video" autoplay></video>
  <video id="remote_video" autoplay></video>
</body>

  <script type="text/javascript">

    let localVideo = document.getElementById('local_video');
    let RemoteVideo = document.getElementById('remote_video');

    let peer = new Peer('reciverId',{key : 'we074c3o2tv2huxr'});

    peer.on('call', function(call){
      navigator.mediaDevices.getUserMedia({video : true, audio : true})
      .then(function (stream) {
        // カメラ映像、オーディオへのアクセスが成功した場合
        // 取得したカメラ映像を相手に送ります。
        localVideo.srcObject = stream;
        call.answer(stream);
        call.on('stream', function(stream) {
           // ストリーミングデータ受信処理
           RemoteVideo.srcObject = stream;
        });

      }).catch(function (error) {
        // カメラ映像、オーディオへのアクセスが失敗した場合
        // エラーの内容をconsole.logで出力します。
        console.log(error);
      });
    });

  </script>
</html>

検証してみる。(手順)

まず、最初に呼び出される側のhtmlファイルをブラウザで確認
呼び出し側のhtmlファイルをブラウザで確認
→カメラ、オーディオ等のリソースへのアクセス許可を求められる (許可)
呼び出される側も同様に許可をする。
双方向間で通信ができていることが確認できる。

このような形で表示されれば、成功です。

実際、少し遅延が発生して違う表情になってますｗ

終わりに

見た目は悪いですが、ざっとPeerJSを使ったリアルタイムビデオ通話(?)のようなものが作れました。
もちろんサービスにするには、まだまだほど遠いですが、デモを実装する中で、
自分自身、WebRTCへの知見が深まったように思います。

最後までお読みいただき、誠にありがとうございました。
また、つたない文章の記事ですが、「いいね」を押していただきましたみなさま、
本当にありがとうございます。

本連載は、これにて終了させていただきますが、
3つの記事に関しては、これからも随時アップデートを行っていく予定ですので、
もし何かございましたらコメントいただけますと幸いです。

以上。

【 PeerJS 】リアルタイムビデオ通話のデモ実装編(3) - カメラ映像をストリーミング

初めに