Now the service supports stun/turn server

homebackend · Jul 31, 2024 · 9e4b82b · 9e4b82b
1 parent 6aeea09
commit 9e4b82b
Show file tree

Hide file tree

Showing 3 changed files with 304 additions and 33 deletions.
diff --git a/html/index-with-turn.html b/html/index-with-turn.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>WebRTC</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+
+</head>
+<body>
+    <table>
+        <tr>
+            <th>Turn Server:</th>
+            <td><input type="text" id="turn-server" /></td>
+        </tr>
+        <tr>
+            <th>Turn Port:</th>
+            <td><input type="text" id="turn-port" /></td>
+        </tr>
+        <tr>
+            <th>Username:</th>
+            <td><input type="text" id="username" /></td>
+        </tr>
+        <tr>
+            <th>Password:</th>
+            <td><input type="text" id="password" /></td>
+        </tr>
+        <tr>
+            <td colspan="2"><input type="submit" id="init" onclick="window.init()" value="Initialize" /></td>
+        </tr>
+    </table>
+
+    <button id="start-session" onclick="window.startSession()" disabled> Start Session </button>
+    <button id="stop-session" onclick="window.stopSession()" disabled> Stop Session </button>
+    <button id="reload-session" onclick="location.reload()" disabled> Reload Page </button>
+    <br />
+
+    <br />
+
+    Video<br />
+    <div id="remoteVideos">
+       <video class="video-player" id="video-player" autoplay playsinline></video>
+    </div> <br />
+
+    Logs<br />
+    <div id="div"></div>
+
+
+</body>
+<script src='main-turn.js'></script>
+</html>
diff --git a/html/main-turn.js b/html/main-turn.js
@@ -0,0 +1,96 @@
+remoteStream = new MediaStream()
+document.getElementById('video-player').srcObject = remoteStream
+
+var pc;
+
+window.init = async function () {
+  document.getElementById('init').disabled = true;
+  document.getElementById('start-session').disabled = true;
+
+  let server = document.getElementById('turn-server').value
+  let port = document.getElementById('turn-port').value
+  let username = document.getElementById('username').value
+  let password = document.getElementById('password').value
+
+  pc = new RTCPeerConnection({
+    iceServers: [{
+        "urls":['stun:' + server + ':' + port],
+    },{
+        "urls":['turn:' + server + ':' + port],
+        "username":username,
+        "credential":password,
+    }]
+  });
+
+  let log = msg => {
+    document.getElementById('div').innerHTML += msg + '<br>'
+  }
+
+  pc.ontrack = function(event) {
+    event.streams[0].getTracks().forEach((track) => {
+      remoteStream.addTrack(track)
+    })
+  }
+
+  pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
+  pc.onicecandidate = event => {
+    if (event.candidate) {
+      console.log('Updated candidate: ' + btoa(JSON.stringify(pc.localDescription)));
+    }
+  }
+
+  // Offer to receive 1 audio, and 1 video track
+  pc.addTransceiver('video', {
+    'direction': 'sendrecv'
+  })
+  pc.addTransceiver('audio', {
+    'direction': 'sendrecv'
+  })
+
+  pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
+  document.getElementById('start-session').disabled = false;
+  alert('Click on Start session now');
+}
+
+window.startSession = async () => {
+  document.getElementById('start-session').disabled = true;
+	let localSessionDescription = btoa(JSON.stringify(pc.localDescription));
+  console.log('Local: ' + localSessionDescription);
+
+  fetch('/stream', {
+    method: 'POST',
+    body: JSON.stringify({"sdp": localSessionDescription}),
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then(response => {
+    if (!response.ok) {
+      alert('Failed to call /stream api');
+      throw new Error('Error calling api');
+    }
+
+    return response.json();
+  }).then(data => {
+    console.log('Remote: ' + data);
+    pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(data.sdp))));
+    document.getElementById('stop-session').disabled = false;
+  }).catch(error => {
+    alert('Error' + error);
+  });
+}
+
+window.stopSession = () => {
+  document.getElementById('stop-session').disabled = true;
+  document.getElementById('reload-session').disabled = false;
+  fetch('/stream', {
+    method: 'DELETE',
+  }).then(response => {
+    if (!response.ok) {
+      alert('Failed to call /stream api');
+      throw new Error('Error calling api');
+    }
+  }).catch(error => {
+    alert('Error' + error);
+  });
+}
+