Browser autoplay policy work around. (#474)

* Enable Audio button added. For autoplay. * Moving the button Co-authored-by: Muhammad Salar Khan <[email protected]>
ionorg · Mar 21, 2021 · 191ae90 · 191ae90
1 parent 54cd1c2
commit 191ae90
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 83 deletions.
diff --git a/examples/pubsubtest/index.html b/examples/pubsubtest/index.html
@@ -33,7 +33,7 @@ <h3>Pion</h3>
       <div class="row" id="start-btns">
         <div class="col-12">
           <button type="button" class="btn btn-primary" onclick="start(false)">
-            start
+            Publish
           </button>
         </div>
       </div>
@@ -109,11 +109,20 @@ <h3>Pion</h3>
           </div>
         </div>
         <div id="remotes" class="col-6 pt-2">
-          <span
-            style="position: absolute; margin-left: 5px; margin-top: 5px"
-            class="badge badge-primary"
-            >Remotes</span
-          >
+          <span class="badge badge-primary">Remotes</span>
+
+          <div class="row" id="enable-audio">
+            <div class="col-12">
+              <button
+                type="button"
+                class="btn btn-primary"
+                id="enable-audio-button"
+                onclick="enableAudio(false)"
+              >
+                Enable Audio
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -136,82 +145,6 @@ <h3>Pion</h3>
     ></script>
     <script src="https://unpkg.com/[email protected]/dist/ion-sdk.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/json-rpc.min.js"></script>
-    <script>
-      const localVideo = document.getElementById("local-video");
-      const remotesDiv = document.getElementById("remotes");
-
-      /* eslint-env browser */
-      const joinBtns = document.getElementById("start-btns");
-
-      const config = {
-        iceServers: [
-          {
-            urls: "stun:stun.l.google.com:19302",
-          },
-        ],
-      };
-
-      const signalLocal = new Signal.IonSFUJSONRPCSignal(
-        "ws://localhost:7000/ws"
-      );
-
-      const clientLocal = new IonSDK.Client(signalLocal, config);
-      signalLocal.onopen = () => clientLocal.join("test session");
-
-      const streams = {};
-      let localStream;
-      const start = () => {
-        IonSDK.LocalStream.getUserMedia({
-          resolution: "vga",
-          audio: true,
-        })
-          .then((media) => {
-            localStream = media;
-            localVideo.srcObject = media;
-            localVideo.autoplay = true;
-            localVideo.controls = true;
-            localVideo.muted = true;
-            joinBtns.style.display = "none";
-            clientLocal.publish(media);
-          })
-          .catch(console.error);
-      };
-
-      clientLocal.ontrack = (track, stream) => {
-        console.log("got track", track.id, "for stream", stream.id);
-        if (track.kind === "video") {
-          track.onunmute = () => {
-            if (!streams[stream.id]) {
-              remoteVideo = document.createElement("video");
-              remoteVideo.srcObject = stream;
-              remoteVideo.autoplay = true;
-              remoteVideo.muted = true;
-
-              remotesDiv.appendChild(remoteVideo);
-              stream.onremovetrack = () => {
-                remotesDiv.removeChild(remoteVideo);
-                streams[stream.id] = null;
-              };
-            }
-          };
-        }
-      };
-
-      const controlLocalVideo = (radio) => {
-        if (radio.value === "false") {
-          localStream.mute("video");
-        } else {
-          localStream.unmute("video");
-        }
-      };
-
-      const controlLocalAudio = (radio) => {
-        if (radio.value === "false") {
-          localStream.mute("audio");
-        } else {
-          localStream.unmute("audio");
-        }
-      };
-    </script>
+    <script src="./main.js"></script>
   </body>
 </html>
diff --git a/examples/pubsubtest/main.js b/examples/pubsubtest/main.js
@@ -0,0 +1,120 @@
+const localVideo = document.getElementById("local-video");
+const remotesDiv = document.getElementById("remotes");
+
+const serverUrl = "ws://localhost:7000/ws";
+
+/* eslint-env browser */
+const joinBtns = document.getElementById("start-btns");
+
+const config = {
+  iceServers: [
+    {
+      urls: "stun:stun.l.google.com:19302",
+    },
+  ],
+};
+
+const signalLocal = new Signal.IonSFUJSONRPCSignal(serverUrl);
+
+const clientLocal = new IonSDK.Client(signalLocal, config);
+signalLocal.onopen = () => clientLocal.join("test session");
+
+/**
+ * For every remote stream this object will hold the follwing information:
+ * {
+ *  "id-of-the-remote-stream": {
+ *     stream: [Object], // Reference to the stream object
+ *     videoElement: [Object] // Reference to the video element that's rendering the stream.
+ *   }
+ * }
+ */
+const streams = {};
+
+/**
+ * When we click the Enable Audio button this function gets called, and
+ * unmutes all the remote videos that might be there and also any future ones.
+ * This little party trick is according to
+ * https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide.
+ */
+let remoteVideoIsMuted = true;
+function enableAudio() {
+  if (remoteVideoIsMuted) {
+    // Unmute all the current videoElements.
+    for (const streamInfo of Object.values(streams)) {
+      let { videoElement } = streamInfo;
+      videoElement.pause();
+      videoElement.muted = false;
+      videoElement.play();
+    }
+    // Set remoteVideoIsMuted to false so that all future autoplays
+    // work.
+    remoteVideoIsMuted = false;
+
+    const button = document.getElementById("enable-audio-button");
+    button.remove();
+  }
+}
+
+let localStream;
+const start = () => {
+  IonSDK.LocalStream.getUserMedia({
+    resolution: "vga",
+    audio: true,
+  })
+    .then((media) => {
+      localStream = media;
+      localVideo.srcObject = media;
+      localVideo.autoplay = true;
+      localVideo.controls = true;
+      localVideo.muted = true;
+      joinBtns.style.display = "none";
+      clientLocal.publish(media);
+    })
+    .catch(console.error);
+};
+
+clientLocal.ontrack = (track, stream) => {
+  console.log("got track", track.id, "for stream", stream.id);
+  track.onunmute = () => {
+    // If the stream is not there in the streams map.
+    if (!streams[stream.id]) {
+      // Create a video element for rendering the stream
+      remoteVideo = document.createElement("video");
+      remoteVideo.srcObject = stream;
+      remoteVideo.autoplay = true;
+      remoteVideo.muted = remoteVideoIsMuted;
+      remotesDiv.appendChild(remoteVideo);
+
+      // Save the stream and video element in the map.
+      streams[stream.id] = { stream, videoElement: remoteVideo };
+
+      // When this stream removes a track, assume
+      // that its going away and remove it.
+      stream.onremovetrack = () => {
+        try {
+          if (streams[stream.id]) {
+            const { videoElement } = streams[stream.id];
+            remotesDiv.removeChild(videoElement);
+            delete streams[stream.id];
+          }
+        } catch (err) {}
+      };
+    }
+  };
+};
+
+const controlLocalVideo = (radio) => {
+  if (radio.value === "false") {
+    localStream.mute("video");
+  } else {
+    localStream.unmute("video");
+  }
+};
+
+const controlLocalAudio = (radio) => {
+  if (radio.value === "false") {
+    localStream.mute("audio");
+  } else {
+    localStream.unmute("audio");
+  }
+};