Created entry/lobby page

nexmo-community · Oct 2, 2020 · 9557764 · 9557764
1 parent 8b89b35
commit 9557764
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Build a Thing Video App</title>
+  </head>
+  <body>
+    <form id="enter">
+      <div class="input-group">
+        <label for="room">Room Code</label>
+        <input type="text" id="room" />
+      </div>
+      <button>Enter Room</button>
+    </form>
+    <script>
+      document.getElementById('enter').addEventListener('submit', event => {
+        event.preventDefault()
+        const room = document.getElementById('room').value
+        if (!room) return alert('Please provide a room code')
+        window.location.replace(`/room?id=${room}`)
+      })
+    </script>
+  </body>
+</html>
diff --git a/client/room.html b/client/room.html
@@ -6,13 +6,19 @@
     <title>Build a Thing Video App</title>
   </head>
   <body>
-    <div id="publishers"></div>
-    <div id="subscribers"></div>
+    <div class="video-streams" style="background: #d83b9e; padding: 1em">
+      <h2>Publishers</h2>
+      <div id="publishers"></div>
+    </div>
+    <div class="video-streams" style="background: #80d0f0; padding: 1em">
+      <h2>Subscribers</h2>
+      <div id="subscribers"></div>
+    </div>
 
     <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
     <script>
       const params = Object.fromEntries(new URLSearchParams(location.search))
-      fetch(`/api/session?room=${params.room}`)
+      fetch(`/api/session?room=${params.id}`)
         .then(r => r.json())
         .then(({ apiKey, sessionId, token }) => {
           const session = OT.initSession(apiKey, sessionId)
@@ -21,6 +27,7 @@
             session.publish(camera)
           })
           session.on('streamCreated', event => {
+            console.log('Subscribing!')
             session.subscribe(event.stream, 'subscribers')
           })
         })