diff --git a/frigate/config.py b/frigate/config.py index 5688d27ce..90fa9f54b 100644 --- a/frigate/config.py +++ b/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): diff --git a/web/src/components/WebRtcPlayer.jsx b/web/src/components/WebRtcPlayer.jsx new file mode 100644 index 000000000..4db47d48b --- /dev/null +++ b/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 ( +
+
+ ); +} \ No newline at end of file diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx index ab3d23e87..720f74d94 100644 --- a/web/src/routes/Camera.jsx +++ b/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 = (
- webRTC not implemented +
)