\r\n \r\n \r\n \r\n\r\n\r\nconst Peer = window.Peer;\r\n\r\n(async function main() {\r\n const localVideo = document.getElementById('js-local-stream');\r\n const joinTrigger = document.getElementById('js-join-trigger');\r\n const leaveTrigger = document.getElementById('js-leave-trigger');\r\n const remoteVideos = document.getElementById('js-remote-streams');\r\n const roomId = document.getElementById('js-room-id');\r\n const roomMode = document.getElementById('js-room-mode');\r\n const localText = document.getElementById('js-local-text');\r\n const localId= document.getElementById('js-local-Id');\r\n const sendTrigger = document.getElementById('js-send-trigger');\r\n const messages = document.getElementById('js-messages');\r\n const meta = document.getElementById('js-meta');\r\n const sdkSrc = document.querySelector('script[src*=skyway]');\r\n const status = document.getElementById('js-start-trigger');\r\n\r\n meta.innerText = `\r\n UA: ${navigator.userAgent}\r\n SDK: ${sdkSrc ? sdkSrc.src : 'unknown'}\r\n `.trim();\r\n\r\n const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh');\r\n\r\n roomMode.textContent = getRoomModeByHash();\r\n window.addEventListener(\r\n 'hashchange',\r\n () => (roomMode.textContent = getRoomModeByHash())\r\n );\r\n\r\n const localStream = await navigator.mediaDevices\r\n .getUserMedia({\r\n audio: true,\r\n video: true,\r\n })\r\n .catch(console.error);\r\n\r\n // Render local stream\r\n localVideo.muted = true;\r\n localVideo.srcObject = localStream;\r\n localVideo.playsInline = true;\r\n await localVideo.play().catch(console.error);\r\n\r\n // eslint-disable-next-line require-atomic-updates\r\n const peer = (window.peer = new Peer({\r\n key:'e316eaa7-4c1c-468c-b23a-9ce51b074ab7' ,\r\n debug: 3,\r\n }));\r\n\r\n // Register join handler\r\n joinTrigger.addEventListener('click', () => {\r\n // Note that you need to ensure the peer has connected to signaling server\r\n // before using methods of peer instance.\r\n if (!peer.open) {\r\n return;\r\n }\r\n\r\n const room = peer.joinRoom(roomId.value, {\r\n mode: getRoomModeByHash(),\r\n stream: localStream,\r\n });\r\n\r\n room.once('open', () => {\r\n messages.textContent += '=== You joined ===\\n';\r\n });\r\n room.on('peerJoin', peerId => {\r\n messages.textContent += `=== ${peerId} joined ===\\n`;\r\n });\r\n\r\n // Render remote stream for new peer join in the room\r\n room.on('stream', async stream => {\r\n const newVideo = document.createElement('video');\r\n newVideo.srcObject = stream;\r\n newVideo.playsInline = true;\r\n // mark peerId to find it later at peerLeave event\r\n newVideo.setAttribute('data-peer-id', stream.peerId);\r\n remoteVideos.append(newVideo);\r\n await newVideo.play().catch(console.error);\r\n });\r\n\r\n room.on('data', ({ data, src }) => {\r\n // Show a message sent to the room and who sent\r\n messages.textContent += `${src}: ${data}\\n`;\r\n });\r\n\r\n // for closing room members\r\n room.on('peerLeave', peerId => {\r\n const remoteVideo = remoteVideos.querySelector(\r\n `[data-peer-id=${peerId}]`\r\n );\r\n remoteVideo.srcObject.getTracks().forEach(track => track.stop());\r\n remoteVideo.srcObject = null;\r\n remoteVideo.remove();\r\n\r\n messages.textContent += `=== ${peerId} left ===\\n`;\r\n });\r\n\r\n // for closing myself\r\n room.once('close', () => {\r\n sendTrigger.removeEventListener('click', onClickSend);\r\n messages.textContent += '== You left ===\\n';\r\n Array.from(remoteVideos.children).forEach(remoteVideo => {\r\n remoteVideo.srcObject.getTracks().forEach(track => track.stop());\r\n remoteVideo.srcObject = null;\r\n remoteVideo.remove();\r\n });\r\n });\r\n\r\n sendTrigger.addEventListener('click', onClickSend);\r\n sendTrigger.addEventListener('click', onClickStart);\r\n sendTrigger.addEventListener('click', onClickStop);\r\n leaveTrigger.addEventListener('click', () => room.close(), { once: true });\r\n\r\n function onClickSend() {\r\n // Send message to all of the peers in the room via websocket\r\n room.send(localText.value);\r\n\r\n messages.textContent += `${peer.id}: ${localText.value}\\n`;\r\n localText.value = '';\r\n if(localText === 1) {\r\n window.alert('走行を開始します。大丈夫ですか?');\r\n } else {\r\n window.alert('trueが読まれていません');\r\n }\r\n }\r\n \r\n /*function onClickStart() {\r\n // Send message to all of the peers in the room via websocket\r\n room.send(localText.value);\r\n\r\n startx.textContent += `${peer.id}: ${1}\\n`;\r\n startx.value = ' ';\r\n } */\r\n \r\n });\r\n\r\n peer.on('error', console.error);\r\n})();\r\n\r\n\r\n\r\n### 試したこと\r\n\r\n\r\n\r\n\r\n### 補足情報(FW/ツールのバージョンなど)","answerCount":1,"upvoteCount":0,"datePublished":"2020-01-30T07:50:08.616Z","dateModified":"2020-03-20T05:08:04.263Z","acceptedAnswer":{"@type":"Answer","text":"変数dataをif文による判定を行ったら出来ました。勘違いしていました。\r\nまた、判定結果をローカル上に立ち上げているnodeサーバーにソケットで送り付け、他言語のプログラムをdllファイルとして作成しnode-ffiにて読み込みを行って実装してみようと思います。お騒がせしました。","dateModified":"2020-05-07T02:29:30.478Z","datePublished":"2020-05-07T02:29:30.478Z","upvoteCount":0,"url":"https://teratail.com/questions/238501#reply-372965"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
質問するログイン新規登録
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

Q&A

解決済

1回答

2455閲覧

WebRTCのテキストデータ送信を変数として使う方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

0グッド

1クリップ

投稿2020/01/30 07:50

編集2020/03/20 05:08

0

1

前提・実現したいこと

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>
<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>
</body> </html>

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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

変数dataをif文による判定を行ったら出来ました。勘違いしていました。
また、判定結果をローカル上に立ち上げているnodeサーバーにソケットで送り付け、他言語のプログラムをdllファイルとして作成しnode-ffiにて読み込みを行って実装してみようと思います。お騒がせしました。

投稿2020/05/07 02:29

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問