Improvements to webRTC

web/src/components/WebRtcPlayer.jsx

@@ -1,49 +1,74 @@
 import { h } from 'preact';
 import { useRef, useEffect } from 'preact/hooks';
 
-export default function WebRtcPlayer({ camera }) {
-  const playerRef = useRef();
+let ws;
 
-  useEffect(() => {
-    let ws = new WebSocket('ws://192.168.50.106:1984/api/ws');
-    ws.onopen = () => {
-
-    };
-
-    const pc = new RTCPeerConnection({
-      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+function initStream() {
+  console.log('Doing a thing');
+  ws = new WebSocket('ws://127.0.0.1:1984/api/ws?src=garage_cam');
+  ws.onopen = () => {
+    console.log('ws.onopen');
+    pc.createOffer().then(offer => {
+      pc.setLocalDescription(offer).then(() => {
+        console.log(offer.sdp);
+        const msg = {type: 'webrtc/offer', value: pc.localDescription.sdp};
+        ws.send(JSON.stringify(msg));
+      });
     });
-    pc.onicecandidate = ev => {
-      if (ev.candidate !== null) {
-        ws.send(JSON.stringify({
-          type: 'webrtc/candidate', value: ev.candidate.toJSON().candidate,
-        }));
-      }
+  }
+  ws.onerror = e => {
+    console.log("There was a ws error " + e.type);
+  }
+  ws.onmessage = ev => {
+    const msg = JSON.parse(ev.data);
+    console.log('ws.onmessage', msg);
+
+    if (msg.type === 'webrtc/candidate') {
+      pc.addIceCandidate({candidate: msg.value, sdpMid: ''});
+    } else if (msg.type === 'webrtc/answer') {
+      pc.setRemoteDescription({type: 'answer', sdp: msg.value});
+      pc.getTransceivers().forEach(t => {
+        if (t.receiver.track.kind === 'audio') {
+          t.currentDirection
+        }
+      })
     }
-    pc.ontrack = ev => {
-      const video = document.getElementById('video');
+  }
 
-      // when audio track not exist in Chrome
-      if (ev.streams.length === 0) return;
-
-      // when audio track not exist in Firefox
-      if (ev.streams[0].id[0] === '{') return;
-
-      // when stream already init
-      if (video.srcObject !== null) return;
-
-      video.srcObject = ev.streams[0];
+  const pc = new RTCPeerConnection({
+    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+  });
+  pc.onicecandidate = ev => {
+    if (ev.candidate !== null) {
+      ws.send(JSON.stringify({
+        type: 'webrtc/candidate', value: ev.candidate.toJSON().candidate,
+      }));
     }
+  }
+  pc.ontrack = ev => {
+    const video = document.getElementById('video');
 
-    // Safari don't support "offerToReceiveVideo"
-    // so need to create transeivers manually
-    pc.addTransceiver('video', {direction: 'recvonly'});
-    pc.addTransceiver('audio', {direction: 'recvonly'});
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // when audio track not exist in Chrome
+    if (ev.streams.length === 0) return;
+    // when audio track not exist in Firefox
+    if (ev.streams[0].id[0] === '{') return;
+    // when stream already init
+    if (video.srcObject !== null) return;
 
+    video.srcObject = ev.streams[0];
+  }
+
+  // Safari don't support "offerToReceiveVideo"
+  // so need to create transeivers manually
+  pc.addTransceiver('video', {direction: 'recvonly'});
+  pc.addTransceiver('audio', {direction: 'recvonly'});
+}
+
+export default function WebRtcPlayer({ camera, width, height }) {
+  initStream();
   return (
     <div>
-      <video id='video' ref={playerRef} autoplay playsinline controls muted />
+      <video id='video' autoplay playsinline controls muted width={width} height={height} />
     </div>
   );
 }

web/src/routes/Camera.jsx

@@ -123,7 +123,7 @@ export default function Camera({ camera }) {
       player = (
         <Fragment>
           <div>
-            <WebRtcPlayer />
+            <WebRtcPlayer width={liveWidth} height={cameraConfig.live.height} />
           </div>
         </Fragment>
       )