如何使用 Twilio 可编程视频在远程参与者上全屏显示屏幕共享视频?

时间:2021-03-31 12:14:12

标签: javascript twilio

我正在我的网络应用程序中创建一个带有屏幕共享的音频/视频通话功能,只有当我们共享屏幕时一切正常,即显示在参与者视频的正下方。我想在远程端全宽显示此屏幕共享部分。 我也分享截图作为参考。非常感谢任何机构帮助我。

以下代码用于屏幕共享

function shareScreenHandler() {
        event.preventDefault();
        if (!screenTrack) {
            navigator.mediaDevices.getDisplayMedia().then(stream => {
                screenTrack = new Twilio.Video.LocalVideoTrack(stream.getTracks()[0]);
                /*console.log(screenTrack);               
                screenTrack.classList.add('screeShare');*/                
                videoRoom.localParticipant.publishTrack(screenTrack);                
                shareScreen.innerHTML = '<i class="fa fa-desktop fa-lg" aria-hidden="true" style="color:#00cc00;"></i>';
                screenTrack.mediaStreamTrack.onended = () => { shareScreenHandler() };
                $('#remotemedia div video:eq(1)').addClass("screeShare");
            }).catch(() => {
                alert('Could not share the screen.');
            });
        }
        else {
            videoRoom.localParticipant.unpublishTrack(screenTrack);
            screenTrack.stop();
            screenTrack = null;
            shareScreen.innerHTML = '<i class="fa fa-desktop fa-lg" aria-hidden="true"></i>';
        }
    };

提前致谢。

enter image description here

0 个答案:

没有答案