Я использую React во Frontend и NodeJS в бэкэнде, и я следовал нижеупомянутому Repo, чтобы реализовать видеозвонок и демонстрацию экрана в моем приложении.
https://github.com/ksocha/twilio-screensharing
Это Документы для демонстрации экрана, но для этого нет примеров. https://www.twilio.com/docs/video/api/rooms-resource#room-instance-resource
Я застрял и не знаю, с чего начать. Любая помощь будет оценена по достоинству.
Я попытался использовать функцию записи экрана, которую предоставляет Twilio, но обнаружил, что с Composition API сложно работать.
Это фрагмент кода, который я добавил в свое видеоприложение для реализации записи экрана.
async function StartRecording() {
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: { mediaSource: "screen" },
});
recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = (e) => {
setIsRecord(false);
const completeBlob = new Blob(chunks, { type: chunks[0].type });
const fileReader = new FileReader();
fileReader.onload = function (e) {
let anchor = document.createElement("a");
anchor.href = e.target.result;
anchor.download = `video-${new Date()}`;
anchor.click();
};
fileReader.readAsDataURL(completeBlob);
};
recorder.start();
} catch (err) {
console.log(err);
setIsRecord(false);
}
}
function StopRecording() {
recorder.stop();
stream.getVideoTracks()[0].stop();
}
<span onClick={() => setIsRecord(!isRecord)}>
{!isRecord ? (<div onClick={StartRecording} className='record-on'>
<FiberManualRecordIcon
fontSize='large'
className='videoActionOn'
/>
<p>Start Record</p>
</div>
) : (
<div onClick={StopRecording} className='record-off'>
<HighlightOffIcon
fontSize='large'
className='videoActionOn'
/>
<p>Stop Record</p>
</div>
)}
</span>
Не стесняйтесь оставлять комментарии, чтобы я мог улучшить этот ответ
