fix: Occurred error on browser when using Websocket (#605)

Unity-Technologies · Dec 6, 2021 · b570e79 · b570e79
1 parent 1e598b1
commit b570e79
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 40 deletions.
diff --git a/WebApp/client/public/multiplay/js/video-player.js b/WebApp/client/public/multiplay/js/video-player.js
@@ -101,13 +101,6 @@ export class VideoPlayer {
         this.signaling.sendCandidate(_this.connectionId, e.candidate.candidate, e.candidate.sdpMid, e.candidate.sdpMLineIndex);
       }
     }.bind(this);
-    // Create data channel with proxy server and set up handlers
-    this.inputSenderChannel = this.pc.createDataChannel("input");
-    this.inputSenderChannel.onopen = this._onOpenInputSenderChannel.bind(this);
-    this.multiplayChannel = this.pc.createDataChannel("multiplay");
-    this.multiplayChannel.onopen = this._onOpenMultiplayChannel.bind(this);
-
-    this.inputRemoting.subscribe(new Observer(this.inputSenderChannel));
 
     this.signaling.addEventListener('answer', async (e) => {
       const answer = e.detail;
@@ -125,6 +118,14 @@ export class VideoPlayer {
     await this.signaling.start();
     this.connectionId = uuid4();
 
+    // Create data channel with proxy server and set up handlers
+    this.inputSenderChannel = this.pc.createDataChannel("input");
+    this.inputSenderChannel.onopen = this._onOpenInputSenderChannel.bind(this);
+    this.multiplayChannel = this.pc.createDataChannel("multiplay");
+    this.multiplayChannel.onopen = this._onOpenMultiplayChannel.bind(this);
+
+    this.inputRemoting.subscribe(new Observer(this.inputSenderChannel));
+
     // Add transceivers to receive multi stream.
     // It can receive two video tracks and one audio track from Unity app.
     // This operation is required to generate offer SDP correctly.

diff --git a/WebApp/client/public/receiver/js/receiver.js b/WebApp/client/public/receiver/js/receiver.js
@@ -90,10 +90,6 @@ export class Receiver {
       _this.signaling.sendCandidate(candidate.connectionId, candidate.candidate, candidate.sdpMid, candidate.sdpMLineIndex);
     });
 
-    this.inputSenderChannel = this.pc.createDataChannel(this.connectionId, "input");
-    this.inputSenderChannel.onopen = this._onOpenInputSenderChannel.bind(this);
-    this.inputRemoting.subscribe(new Observer(this.inputSenderChannel));
-
     this.signaling.addEventListener('disconnect', async (e) => {
       const data = e.detail;
       if (_this.pc != null && _this.pc.connectionId == data.connectionId) {
@@ -124,6 +120,11 @@ export class Receiver {
 
     // setup signaling
     await this.signaling.start();
+
+    // kick send offer process
+    this.inputSenderChannel = this.pc.createDataChannel(this.connectionId, "input");
+    this.inputSenderChannel.onopen = this._onOpenInputSenderChannel.bind(this);
+    this.inputRemoting.subscribe(new Observer(this.inputSenderChannel));
   }
 
   resizeVideo() {

diff --git a/WebApp/client/public/videoplayer/js/video-player.js b/WebApp/client/public/videoplayer/js/video-player.js
@@ -93,35 +93,6 @@ export class VideoPlayer {
       _this.signaling.sendCandidate(candidate.connectionId, candidate.candidate, candidate.sdpMid, candidate.sdpMLineIndex);
     });
 
-    // Create data channel with proxy server and set up handlers
-    this.channel = this.pc.createDataChannel(this.connectionId, 'data');
-    this.channel.onopen = function () {
-      Logger.log('Datachannel connected.');
-    };
-    this.channel.onerror = function (e) {
-      Logger.log("The error " + e.error.message + " occurred\n while handling data with proxy server.");
-    };
-    this.channel.onclose = function () {
-      Logger.log('Datachannel disconnected.');
-    };
-    this.channel.onmessage = async (msg) => {
-      // receive message from unity and operate message
-      let data;
-      // receive message data type is blob only on Firefox
-      if (navigator.userAgent.indexOf('Firefox') != -1) {
-        data = await msg.data.arrayBuffer();
-      } else {
-        data = msg.data;
-      }
-      const bytes = new Uint8Array(data);
-      _this.videoTrackIndex = bytes[1];
-      switch (bytes[0]) {
-        case UnityEventType.SWITCH_VIDEO:
-          _this.switchVideo(_this.videoTrackIndex);
-          break;
-      }
-    };
-
     this.signaling.addEventListener('disconnect', async (e) => {
       const data = e.detail;
       if (_this.pc != null && _this.pc.connectionId == data.connectionId) {
@@ -152,6 +123,35 @@ export class VideoPlayer {
 
     // setup signaling
     await this.signaling.start();
+
+    // Create data channel with proxy server and set up handlers
+    this.channel = this.pc.createDataChannel(this.connectionId, 'data');
+    this.channel.onopen = function () {
+      Logger.log('Datachannel connected.');
+    };
+    this.channel.onerror = function (e) {
+      Logger.log("The error " + e.error.message + " occurred\n while handling data with proxy server.");
+    };
+    this.channel.onclose = function () {
+      Logger.log('Datachannel disconnected.');
+    };
+    this.channel.onmessage = async (msg) => {
+      // receive message from unity and operate message
+      let data;
+      // receive message data type is blob only on Firefox
+      if (navigator.userAgent.indexOf('Firefox') != -1) {
+        data = await msg.data.arrayBuffer();
+      } else {
+        data = msg.data;
+      }
+      const bytes = new Uint8Array(data);
+      _this.videoTrackIndex = bytes[1];
+      switch (bytes[0]) {
+        case UnityEventType.SWITCH_VIDEO:
+          _this.switchVideo(_this.videoTrackIndex);
+          break;
+      }
+    };
   }
 
   resizeVideo() {