Use buffered time instead of timeout

This commit is contained in:
Josh Hawkins 2024-07-07 07:00:00 -05:00
parent 6cb90e2ebe
commit 47dafca777
2 changed files with 16 additions and 11 deletions

View File

@ -46,7 +46,6 @@ function MSEPlayer({
const visibilityCheck: boolean = !pip; const visibilityCheck: boolean = !pip;
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const playTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const [wsState, setWsState] = useState<number>(WebSocket.CLOSED); const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
const [connectTS, setConnectTS] = useState<number>(0); const [connectTS, setConnectTS] = useState<number>(0);
@ -298,6 +297,11 @@ function MSEPlayer({
}; };
}; };
const getBufferedTime = (video: HTMLVideoElement | null) => {
if (!video || video.buffered.length === 0) return 0;
return video.buffered.end(video.buffered.length - 1) - video.currentTime;
};
useEffect(() => { useEffect(() => {
if (!playbackEnabled) { if (!playbackEnabled) {
return; return;
@ -380,21 +384,22 @@ function MSEPlayer({
preload="auto" preload="auto"
onLoadedData={() => { onLoadedData={() => {
handleLoadedMetadata?.(); handleLoadedMetadata?.();
if (playTimeoutRef.current) {
clearTimeout(playTimeoutRef.current);
playTimeoutRef.current = null;
}
onPlaying?.(); onPlaying?.();
setIsPlaying(true); setIsPlaying(true);
}} }}
muted={!audioEnabled} muted={!audioEnabled}
onPause={() => videoRef.current?.play()} onPause={() => videoRef.current?.play()}
onProgress={() => { onProgress={() => {
if (!isPlaying && !playTimeoutRef.current && playbackEnabled) { // if we have > 3 seconds of buffered data and we're still not playing,
playTimeoutRef.current = setTimeout(() => { // something might be wrong - maybe codec issue, no audio, etc
setIsPlaying(true); // so mark the player as playing so that error handlers will fire
onPlaying?.(); if (
}, 7000); !isPlaying &&
playbackEnabled &&
getBufferedTime(videoRef.current) > 3
) {
setIsPlaying(true);
onPlaying?.();
} }
if (onError != undefined) { if (onError != undefined) {
if (videoRef.current?.paused) { if (videoRef.current?.paused) {

View File

@ -399,7 +399,7 @@ export default function LiveCameraView({
onClick={() => setMic(!mic)} onClick={() => setMic(!mic)}
/> />
)} )}
{supportsAudioOutput && ( {supportsAudioOutput && preferredLiveMode != "jsmpeg" && (
<CameraFeatureToggle <CameraFeatureToggle
className="p-2 md:p-0" className="p-2 md:p-0"
variant={fullscreen ? "overlay" : "primary"} variant={fullscreen ? "overlay" : "primary"}