Improvements to webRTC

web/src/components/WebRtcPlayer.jsx

@@ -1,14 +1,39 @@
 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');
+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));
+      });
+    });
+  }
+  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
+        }
+      })
+    }
+  }
 
   const pc = new RTCPeerConnection({
     iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
@@ -25,10 +50,8 @@ export default function WebRtcPlayer({ camera }) {
 
     // 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;
 
@@ -39,11 +62,13 @@ export default function WebRtcPlayer({ camera }) {
   // so need to create transeivers manually
   pc.addTransceiver('video', {direction: 'recvonly'});
   pc.addTransceiver('audio', {direction: 'recvonly'});
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
 
+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>
       )