Fix two way talk starting webrtc session (#10422)

* Fix two way talk starting webrtc session

* Remove logs
This commit is contained in:
Nicolas Mowen 2024-03-13 08:04:11 -06:00 committed by GitHub
parent 79ca599ace
commit 52ce6190ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 11 deletions

View File

@ -46,7 +46,7 @@ function MSEPlayer({
const msRef = useRef<MediaSource | null>(null); const msRef = useRef<MediaSource | null>(null);
const wsURL = useMemo(() => { const wsURL = useMemo(() => {
return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`; return `${baseUrl.replace(/^http/, "ws")}live/mse/api/ws?src=${camera}`;
}, [camera]); }, [camera]);
const play = () => { const play = () => {

View File

@ -1,5 +1,5 @@
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useMemo, useRef } from "react";
type WebRtcPlayerProps = { type WebRtcPlayerProps = {
className?: string; className?: string;
@ -18,6 +18,12 @@ export default function WebRtcPlayer({
microphoneEnabled = false, microphoneEnabled = false,
onPlaying, onPlaying,
}: WebRtcPlayerProps) { }: WebRtcPlayerProps) {
// metadata
const wsURL = useMemo(() => {
return `${baseUrl.replace(/^http/, "ws")}live/webrtc/api/ws?src=${camera}`;
}, [camera]);
// camera states // camera states
const pcRef = useRef<RTCPeerConnection | undefined>(); const pcRef = useRef<RTCPeerConnection | undefined>();
@ -89,12 +95,13 @@ export default function WebRtcPlayer({
} }
const connect = useCallback( const connect = useCallback(
async (ws: WebSocket, aPc: Promise<RTCPeerConnection | undefined>) => { async (aPc: Promise<RTCPeerConnection | undefined>) => {
if (!aPc) { if (!aPc) {
return; return;
} }
pcRef.current = await aPc; pcRef.current = await aPc;
const ws = new WebSocket(wsURL);
ws.addEventListener("open", () => { ws.addEventListener("open", () => {
pcRef.current?.addEventListener("icecandidate", (ev) => { pcRef.current?.addEventListener("icecandidate", (ev) => {
@ -130,7 +137,7 @@ export default function WebRtcPlayer({
} }
}); });
}, },
[], [wsURL],
); );
useEffect(() => { useEffect(() => {
@ -142,15 +149,10 @@ export default function WebRtcPlayer({
return; return;
} }
const url = `${baseUrl.replace(
/^http/,
"ws",
)}live/webrtc/api/ws?src=${camera}`;
const ws = new WebSocket(url);
const aPc = PeerConnection( const aPc = PeerConnection(
microphoneEnabled ? "video+audio+microphone" : "video+audio", microphoneEnabled ? "video+audio+microphone" : "video+audio",
); );
connect(ws, aPc); connect(aPc);
return () => { return () => {
if (pcRef.current) { if (pcRef.current) {

View File

@ -129,6 +129,14 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
} }
}, [camera, fullscreen, isPortrait]); }, [camera, fullscreen, isPortrait]);
const preferredLiveMode = useMemo(() => {
if (isSafari || mic) {
return "webrtc";
}
return "mse";
}, [mic]);
const windowAspectRatio = useMemo(() => { const windowAspectRatio = useMemo(() => {
return windowWidth / windowHeight; return windowWidth / windowHeight;
}, [windowWidth, windowHeight]); }, [windowWidth, windowHeight]);
@ -263,7 +271,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
cameraConfig={camera} cameraConfig={camera}
playAudio={audio} playAudio={audio}
micEnabled={mic} micEnabled={mic}
preferredLiveMode={isSafari || mic ? "webrtc" : "mse"} preferredLiveMode={preferredLiveMode}
/> />
</div> </div>
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />} {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}