微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何使用 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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。