如何在我的 Twilio-Video-Call 应用程序中实现“屏幕录制”？答案

【问题标题】：How to implemement "Screen Recording" in my Twilio-Video-Call Application?如何在我的 Twilio-Video-Call 应用程序中实现“屏幕录制”？
【发布时间】：2020-10-21 11:07:30
【问题描述】：

我在前端使用 React，在后端使用 NodeJS，我按照下面提到的 Repo 在我的应用程序中实现视频通话和屏幕共享。

https://github.com/ksocha/twilio-screensharing

这是屏幕共享的文档，但没有示例。 https://www.twilio.com/docs/video/api/rooms-resource#room-instance-resource

我被卡住了，不知道从哪里开始。任何帮助将不胜感激。

【问题讨论】：

编辑：我添加了一个自定义 Vanilla JS 脚本，并成功添加了客户端屏幕录制和保存。我已将其添加为对此问题的答案。

标签： twilio twilio-api rest twilio-video

【解决方案1】：

我尝试使用 Twilio 提供的屏幕录制功能，但发现合成 API 难以使用。

这是我添加到我的视频应用程序以实现屏幕录制的代码 sn-p。


    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>

随时留下评论，以便我可以改进此答案

【讨论】：