Join room directly (#52)

* Update ws.js

* Start game directly

* Fix autoplay bug

* Return with value

static/game.html

@@ -29,7 +29,11 @@
         </div>
 
         <div id="bottom-screen">
-            <video id="game-screen" autoplay=true poster="/static/img/screen_loading.gif"></video>
+            <!--NOTE: New browser doesn't allow unmuted video player. So we muted here. 
+                There is still audio because current audio flow is not from media but it is manually encoded (technical webRTC challenge). Later, when we can integrate audio to media, we can face the issue with mute again .
+                https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+            -->
+            <video id="game-screen" autoplay=true muted poster="/static/img/screen_loading.gif"></video>
 
             <div id="menu-screen">
                 <div id="menu-container">
@@ -90,7 +94,7 @@
     <script src="/static/js/gesture_touch.js"></script>
     <script src="/static/js/gesture_joystick.js"></script>
     <script src="/static/js/ws.js"></script>
-    
+
     <script src="/static/js/init.js"></script>
 
 </body>

static/js/ws.js

@@ -113,6 +113,10 @@ function startWebRTC() {
     inputChannel.onopen = () => {
         log('inputChannel has opened');
         inputReady = true;
+        // TODO: Event based
+        if (roomID != "") {
+            startGame()
+        }
     }
     inputChannel.onclose = () => log('inputChannel has closed');
 
@@ -161,9 +165,13 @@ function startWebRTC() {
     audioChannel.onopen = () => {
         log('audioChannel has opened');
         audioReady = true;
+        // TODO: Event based
+        if (roomID != "") {
+            startGame()
+        }
     }
     audioChannel.onclose = () => log('audioChannel has closed');
-    
+
     audioChannel.onmessage = (e) => {
         arr = new Uint8Array(e.data);
         idx = arr[arr.length - 1];
@@ -185,6 +193,9 @@ function startWebRTC() {
         if (pc.iceConnectionState === "connected") {
             gameReady = true
             iceSuccess = true
+            if (roomID != "") {
+                startGame()
+            }
         }
         else if (pc.iceConnectionState === "failed") {
             gameReady = false
@@ -203,7 +214,18 @@ function startWebRTC() {
     // video channel
     pc.ontrack = function (event) {
         document.getElementById("game-screen").srcObject = event.streams[0];
-        //$("#game-screen").show();
+        var promise = document.getElementById("game-screen").play();
+        if (promise !== undefined) {
+            promise.then(_ => {
+                console.log("Media can autoplay")
+            }).catch(error => {
+                // Usually error happens when we autoplay unmuted video, browser requires manual play.
+                // We already muted video and use separate audio encoding so it's fine now
+                console.log("Media Failed to autoplay")
+                console.log(error)
+                // TODO: Consider workaround
+            });
+        }
     }
 
 
@@ -246,12 +268,15 @@ function startWebRTC() {
 function startGame() {
     if (!iceSuccess) {
         popup("Game cannot load. Please refresh");
-        return;
+        return false;
     }
     // TODO: Add while loop
     if (!gameReady || !inputReady || !audioReady) {
         popup("Game is not ready yet. Please wait");
-        return;
+        return false;
+    }
+    if (screenState != "menu") {
+        return false;
     }
     log("Starting game screen");
     screenState = "game";
@@ -271,4 +296,5 @@ function startGame() {
     // end clear
     startGameInputTimer();
 
+    return true
 }

webrtc/webrtc.go

@@ -297,7 +297,10 @@ func (w *WebRTC) startStreaming(vp8Track *webrtc.Track, audioTrack *webrtc.DataC
 			if *config.IsMonitor {
 				log.Println("Encoding FPS : ", w.calculateFPS())
 			}
-			vp8Track.WriteSample(media.Sample{Data: bs, Samples: 1})
+			err := vp8Track.WriteSample(media.Sample{Data: bs, Samples: 1})
+			if err != nil {
+				log.Println("Warn: Err write sample: ", err)
+			}
 		}
 	}()