agora中的屏幕共享和视频广播切换错误

时间:2020-05-05 20:39:08

标签: javascript video-streaming webrtc agora.io screensharing

因此,我一直在从事使用agora的网络SDK的项目。我基本上想在屏幕共享和视频广播以及两种情况下的音频之间无缝地来回切换。

这是我编写的代码:

const localPlay = {
    screen: {
        playing: false,
        initialised: false
    },
    video: {
        playing: false,
        initialised: false
    }
};


// Initialise two clients and two streams, with the following stream specs
 const screenStreamSpec = {
                streamID: uid,
                audio: false,
                video: false,
                screen: true,
            };

const videoStreamSpec = {
                streamID: uid,
                audio: true,
                video: true,
                screen: false,
            };

// ...

document.getElementById("Screen-share").addEventListener("click", function() {

    if(!localPlay.screen.initialised) {
        return
    } else {
        if(!localPlay.screen.playing && !localPlay.video.playing) {
            screenStream.play("Screen");
            rtc.client.screenClient.publish(screenStream);
            localPlay.screen.playing = true;                        
            return;
        }

        if(localPlay.screen.playing) {
            return;
        }

        videoStream.stop();
        localPlay.screen.playing = false;
        screenStream.play("Screen");
        localPlay.video.playing = true;

        let newTrack = videoStream.getVideoTrack();
        screenStream.replaceTrack(newTrack);
    }
});


document.getElementById("Video-share").addEventListener("click", function() {

    if(!localPlay.video.initialised) {
        return
    } else {
        if(!localPlay.video.playing && !localPlay.screen.playing) {
            videoStream.play("Screen");
            rtc.client.videoClient.publish(videoStream);
            localPlay.video.playing = true;
            return;
        }

        if(localPlay.video.playing) {
            return;
        }

        screenStream.stop();
        localPlay.video.playing = false;
        videoStream.play("Screen");
        localPlay.screen.playing = true;

        let newTrack = screenStream.getVideoTrack();
        videoStream.replaceTrack(newTrack);
    }
});

代码符合this(解决方案3)。

错误是我第一次尝试执行任何一项操作时,它们都起作用。但是,假设我从屏幕共享开始,然后切换到视频广播,则凸轮会关闭,屏幕共享会关闭,并且正在共享的屏幕会旋转并显示在Screen div中。如果我尝试再切换一次,则div会完全变黑。

我哪里出问题了?

1 个答案:

答案 0 :(得分:0)

您实际上不应该使用替换轨道,因为并非所有浏览器都支持它,并且它是一个相对较新的功能。

为获得更稳定的解决方案,我建议使用2个客户端,其中一个用于摄像头,另一个用于屏幕共享。我在这里有一个示例:https://github.com/digitallysavvy/group-video-chat

如果要在两者之间快速切换,可以使用MutateVideo事件在流之间切换。