How to implemement "Screen Recording" in my Twilio-Video-Call Application?

Question

I am using React in the Frontend and NodeJS in the backend and I have followed below mentioned Repo to implement Video-call and Screen Share in my application.

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

This is the Docs for Screen sharing but there are no examples to do it. https://www.twilio.com/docs/video/api/rooms-resource#room-instance-resource

I am stuck and don't know where to start. Any help would be appreciated .

Edit: I added a custom Vanilla JS script and have successfully added Client Side Screen Recording and Saving. I have added that as an answer to this Question. — Piyush Mahapatra

Piyush Mahapatra Piyush Mahapatra · Accepted Answer · 2021-01-09T07:40:40

I tried to use the Screen Recording feature that Twilio provides but found the Composition API hard to work with.

This is the code snippet that I added to my Video Application to implement Screen Recording.


    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>

Feel Free to leave behind a comment so that I could improve this answer

How to implemement "Screen Recording" in my Twilio-Video-Call Application?

1 Answers