From 5063342277e28fbf8a87f8cf6c65abad61b1c893 Mon Sep 17 00:00:00 2001
From: giongto35 <giongto35@users.noreply.github.com>
Date: Sun, 9 Jun 2019 04:38:44 +0800
Subject: [PATCH] Join room directly (#52)

* Update ws.js

* Start game directly

* Fix autoplay bug

* Return with value
---
 static/game.html |  8 ++++++--
 static/js/ws.js  | 34 ++++++++++++++++++++++++++++++----
 webrtc/webrtc.go |  5 ++++-
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/static/game.html b/static/game.html
index 11d19114..b175a4ff 100644
--- a/static/game.html
+++ b/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>
diff --git a/static/js/ws.js b/static/js/ws.js
index e1cd5f2a..0263b92d 100644
--- a/static/js/ws.js
+++ b/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
 }
diff --git a/webrtc/webrtc.go b/webrtc/webrtc.go
index 0450e4e7..47392359 100644
--- a/webrtc/webrtc.go
+++ b/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)
+			}
 		}
 	}()