Skyway PeerIdが出てこない

前提

javascriptでビデオ通話なシステムを作っています。
javascript初心者なので初歩的な質問かもしれませんがご回答お願いします。

実現したいこと

PeerIdを表示する

発生している問題・エラーメッセージ

自分のビデオのみが表示されます
PeerIdが表示されません

ソースコード

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

javascript
1
2```// import
3import Peer from 'skyway-js';
4const peer = new Peer({key: '80d91137-9d51-4f71-ac46-f3a4b218babc'});
5
6  //Peer作成
7const peer = new Peer({
8    key: '80d91137-9d51-4f71-ac46-f3a4b218babc',
9    debug: 3
10});
11
12//PeerID取得
13peer.on('open', () => {
14    document.getElementById('my-id').textContent = peer.id;
15});

試したこと

ほかのサイトも試してみたのですがPeerIdが出てきません

補足情報

Visual Studio Codeの拡張機能のLive Serverを使ってローカルサーバーをたてました
https://webrtc.ecl.ntt.com/documents/javascript-sdk.html#_2-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90これの2-5まで進めたときにPeerIdが出てきません

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

回答2件

新しくなったskywayのサイトのコードに直したらPeeridが表示されるようになりましたskyway-tutorialありがとうございました。

投稿2023/03/27 13:04

Eitoen

総合スコア4

ベストアンサー

HTMLからjavascriptファイルを読み込んでいるでしょうか？HTMLファイルを見る限り、javascriptファイル自体が読み込まれていないように見えます。
外部のJavaScriptファイルを読み込むには、scriptタグを利用します。
https://techplay.jp/column/577#:~:text=%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%A7%E3%81%99%E3%80%82-,JavaScript%E3%82%92%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80,-JavaScript%E3%82%92%E5%A4%96%E9%83%A8

あるいは、JavaScriptをHTMLファイルのscriptタグの中にまとめる方法もあります。その場合、javascriptのファイルに書かれている内容を、HTMLのscriptタグ内の末尾に追記する形にしてみてください。

また、import Peer from 'skyway-js';で使われているimportは、JavaScriptのモジュールの機能を利用する場合の書き方になります。今回は、<script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js"></script>でHTML内でライブラリを読み込んでいるようですので、importの一文は不要です。

投稿2023/01/17 08:12

yuta_22

総合スコア181

Eitoen

2023/01/17 10:17

ありがとうございます。やってみます。

Eitoen

2023/01/17 11:08

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js"></script> <title>SkyWayチュートリアル</title> </head> <body> <video id="my-video" width="400px" autoplay muted playsinline></video> <p id="my-id"></p> <script> let localStream; // カメラ映像取得 navigator.mediaDevices.getUserMedia({video: true, audio: true}) .then( stream => { // 成功時にvideo要素にカメラ映像をセットし、再生 const videoElm = document.getElementById('my-video'); videoElm.srcObject = stream; videoElm.play(); // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく localStream = stream; }).catch( error => { // 失敗時にはエラーログを出力 console.error('mediaDevice.getUserMedia() error:', error); return; }); const peer = new Peer({key: '80d91137-9d51-4f71-ac46-f3a4b218babc'}); //Peer作成 const peer = new Peer({ key: '80d91137-9d51-4f71-ac46-f3a4b218babc', debug: 3 }); //PeerID取得 peer.on('open', () => { document.getElementById('my-id').textContent = peer.id; }); </script> </body> </html>

Eitoen

2023/01/17 11:12

javascriptの内容をhtmlのscriptの末尾に付け加えたのですがビデオまで表示されなくなってしました。どうすればいいでしょうか？

yuta_22

2023/01/24 08:25

`peer`の変数定義が2回行われてしまっていますね！どちらかをコメントアウトしてみてください！（ブラウザで実行している場合、デベロッパーツール上にエラーログが出ている可能性が高いので、そちらを元にググったり質問したりすると解決しやすいです）

Eitoen

2023/01/24 10:00

ありがとうございます。試してみます。

Eitoen

2023/01/27 10:26

const peer = new Peer({key: '80d91137-9d51-4f71-ac46-f3a4b218babc'});これをコメントアウトしたんですが、ビデオのみしか表示されません。どうすればいいでしょうか？

yuta_22

2023/01/28 04:18

エラーログは出ていますか？

Eitoen

2023/01/30 11:08

VSCode の　デバッグコンソールのところに出ていました

Eitoen

2023/01/30 11:09

SkyWay: Error: The domain "null" is not registered to this API key. Please confirm your settings on the SkyWay dashboard https://webrtc.ecl.ntt.com/login.html at socket_Socket.<anonymous> (:18419:19) at socket_Socket.emit (:7173:5) at Socket.<anonymous> (:14827:16) at ./node_modules/component-emitter/index.js.Emitter.emit (:2504:20) at ./node_modules/socket.io-client/lib/socket.js.Socket.onevent (:13062:10) at ./node_modules/socket.io-client/lib/socket.js.Socket.onpacket (:13020:12) at Manager.<anonymous> (:2345:15) at ./node_modules/component-emitter/index.js.Emitter.emit (:2504:20) at ./node_modules/socket.io-client/lib/manager.js.Manager.ondecoded (:12508:8) at Decoder.<anonymous> (https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2345:15) {type: 'invalid-domain', stack: 'Error: The domain "null" is not registered to…n.webrtc.ecl.ntt.com/skyway-4.4.5.js:2345:15)', message: 'The domain "null" is not registered to this …hboard https://webrtc.ecl.ntt.com/login.html'} 利用可能なデバッガーがありません。'variables' を送信できません Uncaught Error Error: The domain "null" is not registered to this API key. Please confirm your settings on the SkyWay dashboard https://webrtc.ecl.ntt.com/login.html at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:18419:19) at emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:7173:5) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:14827:16) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/socket.io-client/lib/socket.js.Socket.onevent (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:13062:10) at ./node_modules/socket.io-client/lib/socket.js.Socket.onpacket (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:13020:12) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2345:15) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/socket.io-client/lib/manager.js.Manager.ondecoded (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12508:8) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2345:15) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/socket.io-parser/index.js.Decoder.add (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:13725:12) at ./node_modules/socket.io-client/lib/manager.js.Manager.ondata (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12498:16) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2345:15) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/engine.io-client/lib/socket.js.Socket.onPacket (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:3806:14) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:3623:10) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/engine.io-client/lib/transport.js.Transport.onPacket (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4254:8) at callback (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5159:10) at ./node_modules/engine.io-parser/lib/browser.js.exports.decodePayload (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:6051:17) at ./node_modules/engine.io-client/lib/transports/polling.js.Polling.onData (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5163:10) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4714:10) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.onData (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4888:8) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.onLoad (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4955:10) at xhr.onreadystatechange (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4841:16) --- XMLHttpRequest.send --- at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.create (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4853:9) at Request (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4755:8) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.request (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4681:10) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.doPoll (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4711:18) at ./node_modules/engine.io-client/lib/transports/polling.js.Polling.poll (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5133:8) at ./node_modules/engine.io-client/lib/transports/polling.js.Polling.onData (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5172:12) at <anonymous> (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4714:10) at ./node_modules/component-emitter/index.js.Emitter.emit (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:2504:20) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.onData (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4888:8) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.onLoad (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4955:10) at xhr.onreadystatechange (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4841:16) --- XMLHttpRequest.send --- at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.Request.create (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4853:9) at Request (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4755:8) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.request (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4681:10) at ./node_modules/engine.io-client/lib/transports/polling-xhr.js.XHR.doPoll (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4711:18) at ./node_modules/engine.io-client/lib/transports/polling.js.Polling.poll (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5133:8) at ./node_modules/engine.io-client/lib/transports/polling.js.Polling.doOpen (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:5078:8) at ./node_modules/engine.io-client/lib/transport.js.Transport.open (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:4189:10) at ./node_modules/engine.io-client/lib/socket.js.Socket.open (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:3595:13) at Socket (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:3467:8) at Socket (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:3373:41) at ./node_modules/socket.io-client/lib/manager.js.Manager.open.Manager.connect (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12385:17) at Manager (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12228:30) at Manager (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12196:42) at lookup (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:12109:10) at start (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:14598:29) --- await --- at _initializeServerConnection (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:18286:17) at peer_Peer (cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js:17976:10) at <anonymous> (c:\Users\EITO\Documents\Web Project\SkywayOfficial\script.js:4:14) 利用可能なデバッガーがありません。'variables' を送信できません