diff --git a/docs/docs/configuration/live.md b/docs/docs/configuration/live.md index 8c310634a..be467f7f8 100644 --- a/docs/docs/configuration/live.md +++ b/docs/docs/configuration/live.md @@ -232,7 +232,7 @@ When your browser runs into problems playing back your camera streams, it will l - **mse-decode** - What it means: The browser reported a decoding error while trying to play the stream, which usually is a result of a codec incompatibility or corrupted frames. - - What to try: Ensure your camera/restream is using H.264 video and AAC audio (these are the most compatible). If your camera uses a non-standard audio codec, configure `go2rtc` to transcode the stream to AAC. Try another browser (some browsers have stricter MSE/codec support) and, for iPhone, ensure you're on iOS 17.1 or newer. + - What to try: Check the browser console for the supported and negotiated codecs. Ensure your camera/restream is using H.264 video and AAC audio (these are the most compatible). If your camera uses a non-standard audio codec, configure `go2rtc` to transcode the stream to AAC. Try another browser (some browsers have stricter MSE/codec support) and, for iPhone, ensure you're on iOS 17.1 or newer. - Possible console messages from the player code: diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx index 576fc93d6..b7d1aab01 100644 --- a/web/src/components/player/MsePlayer.tsx +++ b/web/src/components/player/MsePlayer.tsx @@ -94,12 +94,19 @@ function MSEPlayer({ console.error( `${camera} - MSE error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-player-error-messages`, ); + if (mseCodecRef.current) { // eslint-disable-next-line no-console - console.error(`${camera} - MSE codec in use: ${mseCodecRef.current}`); + console.error( + `${camera} - Browser negotiated codecs: ${mseCodecRef.current}`, + ); + // eslint-disable-next-line no-console + console.error(`${camera} - Supported codecs: ${CODECS.join(", ")}`); } onError?.(error); }, + // we know that these deps are correct + // eslint-disable-next-line react-hooks/exhaustive-deps [camera, onError], );