如何解决如何在我的Twilio视频通话应用程序中实现“屏幕录制”?
我在前端使用React,在后端使用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>
随意留下评论,以便我改进这个答案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。