javascript - agora中的屏幕共享和视频广播切换错误
问题描述
所以,我一直在做一个使用 agora 的 web 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 将完全变黑。
我哪里出错了?
解决方案
你真的不应该使用替换轨道,因为它不是所有浏览器都支持的,而且是一个相对较新的功能。
对于更稳定的解决方案,我建议使用 2 个客户端,一个用于相机,一个用于屏幕共享。我在这里有一个例子:https ://github.com/digitallysavvy/group-video-chat
如果您想在两者之间快速切换,您可以使用 muteVideo 事件在流之间切换。
推荐阅读
- firebase-realtime-database - RxJS 在组时获取发射数组。Firebase 触发器
- javascript - Angular + Leaflet + Leaflet 额外标记
- c - 将 *void 项添加到 *void 数组时,编译器如何知道要在内存中使用多少字节?
- mysql - 如何在函数中设置 varchar 数据类型?
- c++ - 如何正确地将数组的所有元素设置为负值?
- python - 使用 Python for 循环从多个 API 调用中提取信息,但获取信息 5x+ 复制
- android - 运行从 Kotlin 调用的用 Rust 编写的繁重任务
- fortran - Fortran 是否停止需要 endif?
- reactjs - React - 从列表中选择的值未定义
- arrays - 在 Google Sheets 查询函数中使用日期的 MAX() 来获取另一列的值