前提・実現したいこと
skyway-js-sdkを用いたビデオシステムを開発しようとしています。
現時点では、以下のように画面の上部にidが表示されてしまいます。これを消し、なおかつその部分にユーザーの名前が表示されるようにしたいと考えています。宜しくお願い致します。
発生している問題・エラーメッセージ
相手の画面上部にidが表示される。
該当のソースコード
javascript
1$(function() { 2 // Peer object 3 const peer = new Peer({ 4 key: 5 debug: 3, 6 }); 7 8 let localStream; 9 let room; 10 peer.on('open', () => { 11 $('#my-id').text(peer.id); 12 // Get things started 13 step1(); 14 }); 15 16 peer.on('error', err => { 17 alert(err.message); 18 // Return to step 2 if error occurs 19 step2(); 20 }); 21 22 $('#make-call').on('submit', e => { 23 e.preventDefault(); 24 // Initiate a call! 25 const roomName = $('#join-room').val(); 26 if (!roomName) { 27 return; 28 } 29 room = peer.joinRoom('mesh_video_' + roomName ,{stream: localStream}); 30 31 $('#room-id').text(roomName); 32 step3(room); 33 }); 34 35 $('#end-call').on('click', () => { 36 room.close(); 37 step2(); 38 }); 39 40 // Retry if getUserMedia fails 41 $('#step1-retry').on('click', () => { 42 $('#step1-error').hide(); 43 step1(); 44 }); 45 46 // set up audio and video input selectors 47 const audioSelect = $('#audioSource'); 48 const videoSelect = $('#videoSource'); 49 const selectors = [audioSelect, videoSelect]; 50 51 navigator.mediaDevices.enumerateDevices() 52 .then(deviceInfos => { 53 const values = selectors.map(select => select.val() || ''); 54 selectors.forEach(select => { 55 const children = select.children(':first'); 56 while (children.length) { 57 select.remove(children); 58 } 59 }); 60 61 for (let i = 0; i !== deviceInfos.length; ++i) { 62 const deviceInfo = deviceInfos[i]; 63 const option = $('<option>').val(deviceInfo.deviceId); 64 65 if (deviceInfo.kind === 'audioinput') { 66 option.text(deviceInfo.label || 67 'Microphone ' + (audioSelect.children().length + 1)); 68 audioSelect.append(option); 69 } else if (deviceInfo.kind === 'videoinput') { 70 option.text(deviceInfo.label || 71 'Camera ' + (videoSelect.children().length + 1)); 72 videoSelect.append(option); 73 } 74 } 75 76 selectors.forEach((select, selectorIndex) => { 77 if (Array.prototype.slice.call(select.children()).some(n => { 78 return n.value === values[selectorIndex]; 79 })) { 80 select.val(values[selectorIndex]); 81 } 82 }); 83 84 videoSelect.on('change', step1); 85 audioSelect.on('change', step1); 86 }); 87 88 function step1() { 89 // Get audio/video stream 90 const audioSource = $('#audioSource').val(); 91 const videoSource = $('#videoSource').val(); 92 const constraints = { 93 audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, 94 video: {deviceId: videoSource ? {exact: videoSource} : undefined}, 95 }; 96 navigator.mediaDevices.getUserMedia(constraints).then(stream => { 97 $('#my-video').get(0).srcObject = stream; 98 localStream = stream; 99 100 if (room) { 101 room.replaceStream(stream); 102 return; 103 } 104 105 step2(); 106 }).catch(err => { 107 $('#step1-error').show(); 108 console.error(err); 109 }); 110 } 111 112 function step2() { 113 $('#their-videos').empty(); 114 $('#step1, #step3').hide(); 115 $('#step2').show(); 116 $('#join-room').focus(); 117 } 118 119 function step3(room) { 120 // Wait for stream on the call, then set peer video display 121 room.on('stream', stream => { 122 const peerId = stream.peerId; 123 const id = 'video_' + peerId + '_' + stream.id.replace('{', '').replace('}', ''); 124 125 $('#their-videos').append($( 126 '<div class="video_' + peerId +'" id="' + id + '">' + 127 '<label>' + stream.peerId + ':' + stream.id + '</label>' + 128 '<video class="remoteVideos" autoplay playsinline>' + 129 '</div>')); 130 const el = $('#' + id).find('video').get(0); 131 el.srcObject = stream; 132 el.play(); 133 }); 134 135 room.on('removeStream', function(stream) { 136 const peerId = stream.peerId; 137 $('#video_' + peerId + '_' + stream.id.replace('{', '').replace('}', '')).remove(); 138 }); 139 140 // UI stuff 141 room.on('close', step2); 142 room.on('peerLeave', peerId => { 143 $('.video_' + peerId).remove(); 144 }); 145 $('#step1, #step2').hide(); 146 $('#step3').show(); 147 } 148});
ご提示のスクリーンショットを見る限り、ユーザー名を入れる場所がないように思いますが、どこか別の場所で入力しているのですか?
いえ、いまのところ入力のためのコードは使っておりません。
一度、HTMLでtextとinputタグを使ってみたのですが、上手くいきませんでした。
ユーザー名を入力していないのであれば、ユーザー名を出力することはできないのではないかと思いますが、そうではないのですか?
あるいは、「ユーザー名を入力して送信し、受信して表示するところまで全てを作ってほしい」みたいな質問なのでしょうか?
そうです。
わかりにくい聞き方で申し訳ございません。
ドキュメントを見る限りしんどそうな感じがしますね。
Peer ID というのがユーザーネームのようなんですが、一意的な文字列(UUID)ようですし、streamイベントではそのIDでしか取得ができなさそうです。
https://webrtc.ecl.ntt.com/api-reference/javascript.html#events-2
https://developer.mozilla.org/ja/docs/Web/API/MediaStream#Properties
https://qiita.com/yusuke84/items/13fab1d0f97c466e4d4b
https://qiita.com/_takeshi_24/items/612cbb80ed86d5e7a111
なるほど・・・
わかりました。
わざわざリンクまで張っていただきありがとうございます!
あなたの回答
tips
プレビュー