Aborterror: запрос Play () был прерван, потому что носитель был удален из документа в приложении для видеоконференций Re ⇐ Javascript

[Anonymous]

Я строю приложение для видеоконференций с использованием услуг Communication React и Azure.
Я использую видеозарежердер для рендеринга для участников.const RenderDynamicView = ({ remoteVideoStream, item, participantCount, pageIndex }) => {
const videoContainerRef = useRef(null);
const rendererRef = useRef(null);
const viewRef = useRef(null);

const getInitials = (str) => {
try {
if (!str.includes(' ')) return str.slice(0, 2).toUpperCase();
const words = str.split(' ');
return words.map(w => w[0].toUpperCase()).join('').slice(0, 2);
} catch {
return str;
}
};

const getClassName = () => {
if (participantCount < 3) return "remote-one-custom";
if (participantCount === 3) return "remote-three-custom";
if (participantCount === 4) return "remote-four-custom";
if (participantCount < 7) return "remote-morethan-four-custom";
return "remote-greaterthan-six-custom";
};

const disposeRenderer = () => {
try {
if (viewRef.current) {
viewRef.current.dispose();
viewRef.current = null;
}
if (rendererRef.current) {
rendererRef.current.dispose();
rendererRef.current = null;
}
} catch (err) {
console.error('Dispose error:', err);
}
};

const renderStream = async () => {
if (!remoteVideoStream || !remoteVideoStream.isAvailable || !videoContainerRef.current) return;

try {
disposeRenderer();

const renderer = new VideoStreamRenderer(remoteVideoStream);
const view = await renderer.createView();

videoContainerRef.current.innerHTML = '';
videoContainerRef.current.appendChild(view.target);

const videoElement = view.target.querySelector('video');
if (videoElement) {
videoElement.style.objectFit = 'contain';
videoElement.style.width = '100%';
videoElement.style.height = '100%';
}

rendererRef.current = renderer;
viewRef.current = view;
} catch (err) {
if (err.name === 'AbortError') {
return;
}
console.error('Failed to render video stream:', err);
}
};

if (remoteVideoStream) {
renderStream();
} else {
disposeRenderer();
}

let isRemoteStream = remoteVideoStream && remoteVideoStream.kind !== 'LocalVideoStream';

const handleAvailabilityChange = () => {
if (remoteVideoStream) {
renderStream();
} else {
disposeRenderer();
}
};

if (isRemoteStream && remoteVideoStream?.on) {
remoteVideoStream.on('isAvailableChanged', handleAvailabilityChange);
}

return () => {
if (isRemoteStream && remoteVideoStream?.off) {
remoteVideoStream.off('isAvailableChanged', handleAvailabilityChange);
}
disposeRenderer();
};
}, [remoteVideoStream]);

return (

{!remoteVideoStream?.isAvailable && (

{item?.displayName}
{getInitials(item?.displayName)}

)}
[img]{item?.isMute ? mute_incall : unmute_incall}
id={`mute-status-${item?.userId}`}
/>
{item?.isRiseHand && (
[img]{raise_hand_active}
id={`risehand-status-${item?.userId}`}
/>
)}

);
};
< /code>
Несмотря на это, я все еще получаю следующую ошибку один раз в консоли браузера: < /p>
AbortError: The play() request was interrupted because the media was removed from the document.
< /code>

Есть ли способ полностью избежать этой ошибки?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... emoved-fro