前提・実現したいこと
WebRTCを用いた動画ストリーミング兼コントロールのwebアプリケーションを作成しております。
アプリケーションの開発に当たってはSkywayのJavascriptSDKチュートリアルのコードを使用させていただき、ルーム通話を想定しています。
発生している問題・エラーメッセージ
Skywayにて実装されているテキストチャットを行うためのSDKによりテキストデータの1や0を送信し、テキストを受け取ったもう一つのPeerは、1か0の受けとったデータによってifやswitch文等でc++のプログラムを動作させるということを行いたいです。
ここで、javascript後ろの方にあるonClicksend関数により,0や1というデータを送信したものの一向にif文のtrueが判定されずに困っております。peer間を経由する際に、メッセージがどういった変数に格納されているのか把握ができておりません。localTextはテキストボックス、messagesはhtmlへ出力するメッセージ及びpeerIDだと考えられるのでどういった送信アルゴリズムであるか全体像をつかめておりません。これらについて、ご教授いただければと存じます。
また、skywayのテキストデータ送信にはUDPプロトコルが使用されているとの記述があったのですが、チュートリアルコードにはWebsocketという記述がみられます。websocketはTCPで動作するものかと思いますがこれはどういった理由なのかも理解が不十分であるため困っております。どうぞよろしくお願いいたします。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>P2PCommunication!!</title> <link rel="stylesheet" href="../_shared/style.css"> </head> <body> <div class="container"> <h1 class="heading">Offer</h1> <p class="note"> Change Room mode (before join in a room): <a href="#">mesh</a> / <a href="#sfu">sfu</a> </p> <div class="room"> <div> <video id="js-local-stream"></video> <br> <p>Room mode : <span id="js-room-mode"></span></p> <p>Your ID: <span id="js-local-Id"></span></p> <input type="text" placeholder="Room Name" id="js-room-id"> <button id="js-join-trigger">Join</button> <button id="js-leave-trigger">Leave</button> </div></body> </html><div class="remote-streams" id="js-remote-streams"></div> <div> <pre class="messages" id="js-messages"></pre> <input type="text" id="js-local-text"> <button id="js-send-trigger">Send</button> <button id="js-start-trigger">Start</button> <button id="js-stop-trigger">Stop</button> </div> </div> <p class="meta" id="js-meta"></p> </div> <script src="//cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script> <script src="../_shared/key.js"></script> <script src="./script.js"></script>
const Peer = window.Peer;
(async function main() {
const localVideo = document.getElementById('js-local-stream');
const joinTrigger = document.getElementById('js-join-trigger');
const leaveTrigger = document.getElementById('js-leave-trigger');
const remoteVideos = document.getElementById('js-remote-streams');
const roomId = document.getElementById('js-room-id');
const roomMode = document.getElementById('js-room-mode');
const localText = document.getElementById('js-local-text');
const localId= document.getElementById('js-local-Id');
const sendTrigger = document.getElementById('js-send-trigger');
const messages = document.getElementById('js-messages');
const meta = document.getElementById('js-meta');
const sdkSrc = document.querySelector('script[src*=skyway]');
const status = document.getElementById('js-start-trigger');
meta.innerText = UA: ${navigator.userAgent} SDK: ${sdkSrc ? sdkSrc.src : 'unknown'}
.trim();
const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh');
roomMode.textContent = getRoomModeByHash();
window.addEventListener(
'hashchange',
() => (roomMode.textContent = getRoomModeByHash())
);
const localStream = await navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.catch(console.error);
// Render local stream
localVideo.muted = true;
localVideo.srcObject = localStream;
localVideo.playsInline = true;
await localVideo.play().catch(console.error);
// eslint-disable-next-line require-atomic-updates
const peer = (window.peer = new Peer({
key:'e316eaa7-4c1c-468c-b23a-9ce51b074ab7' ,
debug: 3,
}));
// Register join handler
joinTrigger.addEventListener('click', () => {
// Note that you need to ensure the peer has connected to signaling server
// before using methods of peer instance.
if (!peer.open) {
return;
}
const room = peer.joinRoom(roomId.value, { mode: getRoomModeByHash(), stream: localStream, }); room.once('open', () => { messages.textContent += '=== You joined ===\n'; }); room.on('peerJoin', peerId => { messages.textContent += `=== ${peerId} joined ===\n`; }); // Render remote stream for new peer join in the room room.on('stream', async stream => { const newVideo = document.createElement('video'); newVideo.srcObject = stream; newVideo.playsInline = true; // mark peerId to find it later at peerLeave event newVideo.setAttribute('data-peer-id', stream.peerId); remoteVideos.append(newVideo); await newVideo.play().catch(console.error); }); room.on('data', ({ data, src }) => { // Show a message sent to the room and who sent messages.textContent += `${src}: ${data}\n`; }); // for closing room members room.on('peerLeave', peerId => { const remoteVideo = remoteVideos.querySelector( `[data-peer-id=${peerId}]` ); remoteVideo.srcObject.getTracks().forEach(track => track.stop()); remoteVideo.srcObject = null; remoteVideo.remove(); messages.textContent += `=== ${peerId} left ===\n`; }); // for closing myself room.once('close', () => { sendTrigger.removeEventListener('click', onClickSend); messages.textContent += '== You left ===\n'; Array.from(remoteVideos.children).forEach(remoteVideo => { remoteVideo.srcObject.getTracks().forEach(track => track.stop()); remoteVideo.srcObject = null; remoteVideo.remove(); }); }); sendTrigger.addEventListener('click', onClickSend); sendTrigger.addEventListener('click', onClickStart); sendTrigger.addEventListener('click', onClickStop); leaveTrigger.addEventListener('click', () => room.close(), { once: true }); function onClickSend() { // Send message to all of the peers in the room via websocket room.send(localText.value); messages.textContent += `${peer.id}: ${localText.value}\n`; localText.value = ''; if(localText === 1) { window.alert('走行を開始します。大丈夫ですか?'); } else { window.alert('trueが読まれていません'); } } /*function onClickStart() { // Send message to all of the peers in the room via websocket room.send(localText.value);
startx.textContent += ${peer.id}: ${1}\n
;
startx.value = ' ';
} */
});
peer.on('error', console.error);
})();
試したこと
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。