Add webrtc player

frigate/config.py

@@ -524,12 +524,13 @@ class RestreamConfig(FrigateBaseModel):
 class CameraLiveSourceEnum(str, Enum):
     jsmpeg = "jsmpeg"
     mp4 = "mp4"
+    webrtc = "webrtc"
 
 
 class CameraLiveConfig(FrigateBaseModel):
     height: int = Field(default=720, title="Live camera view height")
     quality: int = Field(default=8, ge=1, le=31, title="Live camera view quality")
-    source: CameraLiveSourceEnum = Field(default=CameraLiveSourceEnum.mp4)
+    source: CameraLiveSourceEnum = Field(default=CameraLiveSourceEnum.webrtc)
 
 
 class CameraUiConfig(FrigateBaseModel):

web/src/components/WebRtcPlayer.jsx

@@ -0,0 +1,49 @@
+import { h } from 'preact';
+import { useRef, useEffect } from 'preact/hooks';
+
+export default function WebRtcPlayer({ camera }) {
+  const playerRef = useRef();
+
+  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' }],
+    });
+    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');
+
+      // 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'});
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div>
+      <video id='video' ref={playerRef} autoplay playsinline controls muted />
+    </div>
+  );
+}

web/src/routes/Camera.jsx

@@ -14,6 +14,7 @@ import { useCallback, useMemo, useState } from 'preact/hooks';
 import { useApiHost } from '../api';
 import useSWR from 'swr';
 import VideoPlayer from '../components/VideoPlayer';
+import WebRtcPlayer from '../components/WebRtcPlayer';
 
 const emptyObject = Object.freeze({});
 
@@ -122,7 +123,7 @@ export default function Camera({ camera }) {
       player = (
         <Fragment>
           <div>
-            webRTC not implemented
+            <WebRtcPlayer />
           </div>
         </Fragment>
       )