如何在我的 Twilio-Video-Call 应用程序中实现 "Screen Recording"?
How to implemement "Screen Recording" in my Twilio-Video-Call Application?
我在前端使用 React,在后端使用 NodeJS,我按照下面提到的 Repo 在我的应用程序中实现视频通话和屏幕共享。
https://github.com/ksocha/twilio-screensharing
这是屏幕共享文档,但没有示例。
https://www.twilio.com/docs/video/api/rooms-resource#room-instance-resource
我卡住了,不知道从哪里开始。
任何帮助将不胜感激。
我尝试使用 Twilio 提供的屏幕录制功能,但发现合成 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>
随时留下评论,以便我改进这个答案
我在前端使用 React,在后端使用 NodeJS,我按照下面提到的 Repo 在我的应用程序中实现视频通话和屏幕共享。
https://github.com/ksocha/twilio-screensharing
这是屏幕共享文档,但没有示例。 https://www.twilio.com/docs/video/api/rooms-resource#room-instance-resource
我卡住了,不知道从哪里开始。 任何帮助将不胜感激。
我尝试使用 Twilio 提供的屏幕录制功能,但发现合成 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>
随时留下评论,以便我改进这个答案