編集履歴

質問編集履歴

文章や質問の明確化

2020/03/20 05:08

投稿

スコア0

test CHANGED Viewed

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

test CHANGED Viewed

@@ -2,11 +2,9 @@
-WebRTCを用いた動画ストリーミング兼コントロールのアプリケーションを作成しております。
+WebRTCを用いた動画ストリーミング兼コントロールのwebアプリケーションを作成しております。
-アプリケーションの開発に当たってはSkywayのJavascriptSDKやチュートリアルのコードを使用させていただき、1：1の通話を想定しています。
+アプリケーションの開発に当たってはSkywayのJavascriptSDKチュートリアルのコードを使用させていただき、ルーム通話を想定しています。
-ここで、Peerで表示させたボタンをクリックしたときのイベントとして、もう一つのPeer内部で動いているC++のプログラムでイベントを動作させステータス変数を書き換えたいというのが目標です。
@@ -14,9 +12,11 @@
-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で動作するものかと思いますがこれはどういった理由なのかも理解が不十分であるため困っております。どうぞよろしくお願いいたします。
@@ -24,10 +24,6 @@
-index.html
 <!DOCTYPE html>
 <html lang="en">
@@ -38,68 +34,68 @@
     <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">
+        <div>
-          <video id="js-remote-stream"></video>
+          <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="local-stream">
-          <video id="js-local-stream"></video>
+        <div class="remote-streams" id="js-remote-streams"></div>
+        <div>
-          <p>Your ID: <span id="js-local-id"></span></p>
+          <pre class="messages" id="js-messages"></pre>
-          <input type="text" value="RTMonitor" id="js-remote-id">
+          <input type="text" id="js-local-text">
-          <button id="js-call-trigger">Connect</button>
+          <button id="js-send-trigger">Send</button>
-          <button id="js-close-trigger">Connect</button>
-             <br>
-            <button id="js-start-trigger">Start</button>
+             <button id="js-start-trigger">Start</button>
-            <button id="js-stop-trigger">Stop</button>
+             <button id="js-stop-trigger">Stop</button>
         </div>
       </div>
-         <div>
-          <pre class="messages" id="js-messages"></pre>
-          <input type="text" id="js-local-text">
-          <button id="js-send-trigger">Send</button>
-        </div>
       <p class="meta" id="js-meta"></p>
     </div>
@@ -116,7 +112,7 @@
-script.js
+const Peer = window.Peer;
@@ -124,23 +120,29 @@
   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');
@@ -154,6 +156,22 @@
+  const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh');
+  roomMode.textContent = getRoomModeByHash();
+  window.addEventListener(
+    'hashchange',
+    () => (roomMode.textContent = getRoomModeByHash())
+  );
   const localStream = await navigator.mediaDevices
     .getUserMedia({
@@ -180,21 +198,21 @@
+  // 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
@@ -208,82 +226,164 @@
-    const mediaConnection = peer.call(remoteId.value, localStream);
+    const room = peer.joinRoom(roomId.value, {
-    mediaConnection.on('stream', async stream => {
-      // Render remote stream for caller
-      remoteVideo.srcObject = stream;
+      mode: getRoomModeByHash(),
-      remoteVideo.playsInline = true;
+      stream: localStream,
-      await remoteVideo.play().catch(console.error);
-    });
+    });
-    mediaConnection.once('close', () => {
+    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);
-    closeTrigger.addEventListener('click', () => mediaConnection.close(true));
+    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.once('open', id => (localId.textContent = id));
-  // Register callee handler
-  peer.on('call', mediaConnection => {
-    mediaConnection.answer(localStream);
-    mediaConnection.on('stream', async stream => {
-      // Render remote stream for callee
-      remoteVideo.srcObject = stream;
-      remoteVideo.playsInline = true;
-      await remoteVideo.play().catch(console.error);
-    });
-    mediaConnection.once('close', () => {
-      remoteVideo.srcObject.getTracks().forEach(track => track.stop());
-      remoteVideo.srcObject = null;
-    });
-    closeTrigger.addEventListener('click', () => mediaConnection.close(true));
-  });
   peer.on('error', console.error);
 })();
@@ -292,10 +392,16 @@
 ### 試したこと
 ### 補足情報（FW/ツールのバージョンなど）