如何在我的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>

随意留下评论，以便我改进这个答案