編集履歴

質問編集履歴

文章や質問の明確化

2020/03/20 05:08

投稿

スコア0

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- WebRTCのテキストデータ送信~~によるフラグ設定~~方法
1	+ WebRTCのテキストデータ送信を変数として使う方法

body CHANGED Viewed

@@ -1,54 +1,52 @@
 ### 前提・実現したいこと
-WebRTCを用いた動画ストリーミング兼コントロールのアプリケーションを作成しております。
+WebRTCを用いた動画ストリーミング兼コントロールのwebアプリケーションを作成しております。
-アプリケーションの開発に当たってはSkywayのJavascriptSDKやチュートリアルのコードを使用させていただき、1：1の通話を想定しています。
+アプリケーションの開発に当たってはSkywayのJavascriptSDKチュートリアルのコードを使用させていただき、ルーム通話を想定しています。
-ここで、Peerで表示させたボタンをクリックしたときのイベントとして、もう一つのPeer内部で動いているC++のプログラムでイベントを動作させステータス変数を書き換えたいというのが目標です。
 ### 発生している問題・エラーメッセージ
-WebRTCにはデータを送信可能なDataChannelがあり、Skywayにもテキストチャットを行うためのSDKが用意されています。今回の例ではStartボタンクリックでテキストデータの1を、Stopボタンクリックでテキストデータの0を送信したいと考えています。これによりテキストを受け取ったもう一つのPeerは、1か0の受けとったデータによってc++プログラムのイベントでステータス変数を書き換えます。
-ここで、0や1というデータを送信し、もう一つのPeerブラウザ上で受けとったというフラグをどのように認識させるかで困っております。具体的な方法や、参考になるページなどございましたらご教授いただきたく存じます。
+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で動作するものかと思いますがこれはどういった理由なのかも理解が不十分であるため困っております。どうぞよろしくお願いいたします。
 ### 該当のソースコード
-index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>RTMoviesender</title>
+    <title>P2PCommunication!!</title>
     <link rel="stylesheet" href="../_shared/style.css">
   </head>
   <body>
     <div class="container">
-      <h1 class="heading">Check!!</h1>
+      <h1 class="heading">Offer</h1>
       <p class="note">
-        Enter remote peer ID to call.
+        Change Room mode (before join in a room):
+        <a href="#">mesh</a> / <a href="#sfu">sfu</a>
       </p>
-      <div class="p2p-media">
+      <div class="room">
-        <div class="remote-stream">
-          <video id="js-remote-stream"></video>
-        </div>
+        <div>
-        <div class="local-stream">
           <video id="js-local-stream"></video>
-          <p>Your ID: <span id="js-local-id"></span></p>
-          <input type="text" value="RTMonitor" id="js-remote-id">
-          <button id="js-call-trigger">Connect</button>
-          <button id="js-close-trigger">Connect</button>
              <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-start-trigger">Start</button>
+          <button id="js-leave-trigger">Leave</button>
-            <button id="js-stop-trigger">Stop</button>
         </div>
-      </div>
+        <div class="remote-streams" id="js-remote-streams"></div>
-         <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>
@@ -57,25 +55,36 @@
   </body>
 </html>
-script.js
+const Peer = window.Peer;
 (async function main() {
   const localVideo = document.getElementById('js-local-stream');
-  const localId = document.getElementById('js-local-id');
-  const callTrigger = document.getElementById('js-call-trigger');
+  const joinTrigger = document.getElementById('js-join-trigger');
-  const closeTrigger = document.getElementById('js-close-trigger');
+  const leaveTrigger = document.getElementById('js-leave-trigger');
-  const remoteVideo = document.getElementById('js-remote-stream');
+  const remoteVideos = document.getElementById('js-remote-streams');
-  const remoteId = document.getElementById('js-remote-id');
+  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 startTrigger = document.getElementById('js-start-trigger');
+  const status = document.getElementById('js-start-trigger');
-  const stopTrigger = document.getElementById('js-stop-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,
@@ -89,63 +98,107 @@
   localVideo.playsInline = true;
   await localVideo.play().catch(console.error);
+  // eslint-disable-next-line require-atomic-updates
-    const peer = new Peer('RTC', {
+  const peer = (window.peer = new Peer({
-        key: 'XXX',
+    key:'e316eaa7-4c1c-468c-b23a-9ce51b074ab7' ,
-        debug: 3,
+    debug: 3,
-    });
+  }));
-  // Register caller handler
+  // Register join handler
-  callTrigger.addEventListener('click', () => {
+  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 mediaConnection = peer.call(remoteId.value, localStream);
+    const room = peer.joinRoom(roomId.value, {
+      mode: getRoomModeByHash(),
+      stream: localStream,
+    });
-    mediaConnection.on('stream', async stream => {
+    room.once('open', () => {
-      // Render remote stream for caller
-      remoteVideo.srcObject = stream;
-      remoteVideo.playsInline = true;
-      await remoteVideo.play().catch(console.error);
+      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
-    mediaConnection.once('close', () => {
+    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', () => {
-    closeTrigger.addEventListener('click', () => mediaConnection.close(true));
+      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);
-  peer.once('open', id => (localId.textContent = id));
+    leaveTrigger.addEventListener('click', () => room.close(), { once: true });
+    function onClickSend() {
-  // Register callee handler
+      // Send message to all of the peers in the room via websocket
-  peer.on('call', mediaConnection => {
-    mediaConnection.answer(localStream);
+      room.send(localText.value);
-    mediaConnection.on('stream', async stream => {
+      messages.textContent += `${peer.id}: ${localText.value}\n`;
+      localText.value = '';
+        if(localText === 1) {
+            window.alert('走行を開始します。大丈夫ですか？');
+        } else {
+            window.alert('trueが読まれていません');
+        }
+    }
+      /*function onClickStart() {
-      // Render remote stream for callee
+    // Send message to all of the peers in the room via websocket
-      remoteVideo.srcObject = stream;
+    room.send(localText.value);
-      remoteVideo.playsInline = true;
-      await remoteVideo.play().catch(console.error);
-    });
-    mediaConnection.once('close', () => {
+   startx.textContent += `${peer.id}: ${1}\n`;
-      remoteVideo.srcObject.getTracks().forEach(track => track.stop());
-      remoteVideo.srcObject = null;
+     startx.value = ' ';
-    });
+    } */
-    closeTrigger.addEventListener('click', () => mediaConnection.close(true));
   });
   peer.on('error', console.error);
 })();
 ### 試したこと
 ### 補足情報（FW/ツールのバージョンなど）