Add go2rtc and add restream role / live source (#4082)

* Pull go2rtc dependency * Add go2rtc to local services and add to s6 * Add relay controller for go2rtc * Add restream role * Add restream role * Add restream to nginx * Add camera live source config * Disable RTMP by default and use restream * Use go2rtc for camera config * Fix go2rtc move * Start restream on frigate start * Send restream to camera level * Fix restream * Make sure jsmpeg works as expected * Make view rspect live size config * Tweak player options to fit live view * Adjust VideoPlayer to accept live option which disables irrelevant controls * Add multiple options from restream live view * Add base for webrtc option * Setup specific restream modules * Make mp4 the default streaming for now * Expose 8554 for rtsp relay from go2rtc * Formatting * Update docs to suggest new restream method. * Update docs to reflect restream role * Update docs to reflect restream role * Add webrtc player * Improvements to webRTC * Support webrtc * Cleanup * Adjust rtmp test and add restream test * Fix tests * Add restream tests * Add live view docs and show different options * Small docs tweak * Support all stream types * Update to beta 9 of go2rtc * Formatting * Make jsmpeg the default * Support wss if made from https * Support wss if made from https * Use onEffect * Set url outside onEffect * Fix passed deps * Update docs about required host mode * Try memo instead * Close websocket on changing camera * Formatting * Close pc connection * Set video source to null on cleanup * Use full path since go2rtc can't see PATH var * Adjust audio codec to enable browser audio by default * Cleanup stream creation * Add restream tests * Format tests * Mock requests * Adjust paths * Move stream configs to restream * Remove live source * Remove live config * Use live persistence for which view to use on each camera * Fix live sizes * Only use jsmpeg sizes for jsmpeg live * Set max live size * Remove access of live config * Add selector for live view source in web view * Remove RTMP from default list of roles * Update docs * Fix tests * Fix docs for live view modes * make default undefined to avoid race condition * Wait until camera source is loaded to avoid race condition * Fix tests * Add config to go2rtc * Work with config * Set full path for config * Set to use stun * Check for mounted file * Look for frigate-go2rtc * Update docs to reflect webRTC configuration. * Add link to go2rtc config * Update docs to be more clear * Update docs to be more clear * Update format Co-authored-by: Felipe Santos <felipecassiors@gmail.com> * Update live docs * Improve bash startup script * Add option to force audio compatibility * Formatting * Fix mapping * Fix broken link * Update go2rtc version * Get go2rtc webui working * Add support for mse * Remove mp4 option * Undo changes to video player * Update docs for new live view options * Make separate path for mse * Remove unused * Remove mp4 path * Try to get go2rtc proxy working * Try to get go2rtc proxy working * Remove unused callback * Allow websocket on restrea dashboard * Make mse default stream option * Fix mse sizing * don't assume roles is defined * Remove nginx mapping to go2rtc ui Co-authored-by: Felipe Santos <felipecassiors@gmail.com> Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
2026-08-02 17:12:16 +03:00 · 2022-11-02 06:36:09 -05:00
parent b4d4adb75b
commit d8123d2497
26 changed files with 614 additions and 86 deletions
@@ -0,0 +1,72 @@
+import { h } from 'preact';
+import { baseUrl } from '../api/baseUrl';
+import { useEffect } from 'preact/hooks';
+
+export default function WebRtcPlayer({ camera, width, height }) {
+  const url = `${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=${camera}`;
+
+  useEffect(() => {
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      pc.createOffer().then((offer) => {
+        pc.setLocalDescription(offer).then(() => {
+          const msg = { type: 'webrtc/offer', value: pc.localDescription.sdp };
+          ws.send(JSON.stringify(msg));
+        });
+      });
+    };
+    ws.onmessage = (ev) => {
+      const msg = JSON.parse(ev.data);
+
+      if (msg.type === 'webrtc/candidate') {
+        pc.addIceCandidate({ candidate: msg.value, sdpMid: '' });
+      } else if (msg.type === 'webrtc/answer') {
+        pc.setRemoteDescription({ type: 'answer', sdp: msg.value });
+      }
+    };
+
+    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' });
+
+    return () => {
+      const video = document.getElementById('video');
+      video.srcObject = null;
+      pc.close();
+      ws.close();
+    };
+  }, [url]);
+
+  return (
+    <div>
+      <video id="video" autoplay playsinline controls muted width={width} height={height} />
+    </div>
+  );
+}