WebRTCであるskywayのjavascriptSDKのチュートリアルを実装したい

WebでリアルタイムコミュニケーションができるSDKとAPIを提供しているskywayですが、javascriptSDKのチュートリアルを実装しようとコピペで試みたのですが、ホームページには、ビデオが表示されず、入力フォームと送信ボタンが表示されるのみです。どうすれば良いでしょうか？

skywayのjavascriptSDKのチュートリアルのページです
↓↓↓↓
https://webrtc.ecl.ntt.com/documents/javascript-sdk.html

以下のコードでサーバを立ち上げました。

Teminal
1python3 -m http.server 3000

javascript
1const Peer = require('skyway-js');
2const peer = new Peer({key: '790a6e47-1665-44b1-a4a1-cbef732daf0c', debug: 3});
3
4peer.on('open', () => {
5    document.getElementById('my-id').textContent = peer.id;
6});
7
8document.getElementById('make-call').onclick = () => {
9  const theirID = document.getElementById('their-id').value;
10  const mediaConnection = peer.call(theirID, localStream);
11  setEventListener(mediaConnection);
12};
13
14// イベントリスナを設置する関数
15const setEventListener = mediaConnection => {
16  mediaConnection.on('stream', stream => {
17    // video要素にカメラ映像をセットして再生
18    const videoElm = document.getElementById('their-video')
19    videoElm.srcObject = stream;
20    videoElm.play();
21  });
22}
23peer.on('call', mediaConnection => {
24  mediaConnection.answer(localStream);
25  setEventListener(mediaConnection);
26});
27
28peer.on('error', err => {
29    alert(err.message);
30});
31
32peer.on('close', () => {
33  alert('通信が切断しました。');
34});
35

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>チャットロット</title>
6    <script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.3.js"></script>
7    <script src="script.js"></script>
8</head>
9<body>
10<video id="my-video" width="400px" autoplay muted playsinline></video>
11<p id="my-id"></p>
12<input id="their-id"></input>
13  <button id="make-call">発信</button>
14  <video id="their-video" width="400px" autoplay muted playsinline></video>
15
16<script>
17  let localStream;
18
19  // カメラ映像取得
20  navigator.mediaDevices.getUserMedia({video: true, audio: true})
21    .then( stream => {
22    // 成功時にvideo要素にカメラ映像をセットし、再生
23    const videoElm = document.getElementById('my-video');
24    videoElm.srcObject = stream;
25    videoElm.play();
26    // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
27    localStream = stream;
28  }).catch( error => {
29    // 失敗時にはエラーログを出力
30    console.error('mediaDevice.getUserMedia() error:', error);
31    return;
32  });
33</script>
34
35</body>
36</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは
WebRTCではいろいろな要素が使われていますので、問題の切り分けのためにどこでエラーが出ているかを確認するのがいいと思います。

PythonでWebサーバーを立てて、ブラウザでlocalhost:3000 or 127.0.0.1:3000に進むまではうまくいっているようですので、そちらでCtrl + Shift + I を押すと開発ツールに入れます。Consoleのタブを見ていただくと、何かしらのエラーが表示されていると思います。

この場合で多いのは、SkywayへのPeer取得に失敗していること、カメラやマイクの取得に失敗していることなどが考えられます。

Peer取得のエラーはインターネットに接続できない場合によく起こります。この時、自身のPeerIDは表示されません。
カメラやマイクのエラーでは、これらのメディアが接続されていない時やgetUserMediaの要求解像度・品質をメディア側が対応できない時などに生じます。何らかのエラーでカメラやマイクがバグっていて使えない時にも起こりえます。

加えて、SkywayのAPIキーを発行した公式サイトにて、利用可能ドメイン名という欄があると思います。そちらで、localhostと127.0.0.1というのを追加していただくとうまくいくかもしれません。