使用Janus WebRTC网关同时发布我的屏幕和相机

Question

以下代码是我的屏幕共享内容，运行良好。但当我共享屏幕时，我也想发布我的本地相机，这可能吗？如果可以，我该怎么做？

发布源代码。

function publishOwnFeed(useAudio, isScreenSharing) {
let media = null;
if (isScreenSharing) {
media = {
video: "screen",
audioRecv: false,
videoRecv: false,
audioSend: useAudio,
videoSend: true
};
} else {
media = {
audioRecv: false,
videoRecv: false,
audioSend: useAudio,
videoSend: true
};
}
// Publish our stream
handler.createOffer({
// Add data:true here if you want to publish datachannels as well
media: media, // Publishers are sendonly
// If you want to test simulcasting (Chrome and Firefox only), then
// pass a ?simulcast=true when opening this demo page: it will turn
// the following 'simulcast' property to pass to janus.js to true
simulcast: doSimulcast,
simulcast2: doSimulcast2,
success: function(jsep) {
Janus.debug("Got publisher SDP!", jsep);
let publish = { request: "configure", audio: useAudio, video: true };
if (acodec)
publish["audiocodec"] = acodec;
if (vcodec)
publish["videocodec"] = vcodec;
handler.send({ message: publish, jsep: jsep });
},
error: function(error) {
Janus.error("WebRTC error:", error);
toggleElement(shareScreen);
if (useAudio) {
publishOwnFeed(false);
} else {
Toastnotify.create({
text: "WebRTC error... " + error.message,
type: 'danger',
important: false
});
}
}
});
}

启动屏幕共享代码。

function startScreenShare() {
unpublishOwnFeed();
setTimeout(function(){
publishOwnFeed(false, true);  // publish my screen whihout audio
}, 800);
// setTimeout(function(){
//  publishOwnFeed(false, false); // this is not work. (publish my camera whitout audio to others to just see me)
// }, 800);
}

停止屏幕共享代码。

function stopScreenShare() {
unpublishOwnFeed();
setTimeout(function(){
publishOwnFeed(true, false);
}, 800);
toggleElement(shareScreen);
}

我真的很感激你的帮助。

Answer 1

我没有使用过Janus，但我使用过其他WebRTC库(如Daily(，并且知道这是可能的。以下是我如何对任何库执行此操作的伪代码：

• 根据库的文档启动调用
• 直接在WebRTC或图书馆的帮助下，找到启动呼叫本地摄像机流的人
• 当摄像机流启动时，将其插入到具有相应标识符的HTML元素中

简单地看一下Janus，这个视频通话演示将是我开始尝试添加视频流的地方。如果有一种方法可以将其与屏幕共享演示相结合，那将是理想的选择。

祝你好运！

Answer 2

感谢Kimberlee，在尝试之后，我可以将自己的视频添加到其他参与者中。顺便说一句，代码只在我的本地计算机上测试过，还没有在网上测试过。我正在分享这个代码，也许它可以帮助别人。：(

let screenHandler = null;
function unpublishMyCameraForScreenShare() {
// Unpublish our stream
let unpublish = { request: "unpublish" };
screenHandler.send({ message: unpublish });
}
function startScreenShare() {
unpublishOwnFeed();
setTimeout(function(){
publishOwnFeed(false, true);  // publish my screen whihout audio
}, 800);
janus.attach({
plugin: "janus.plugin.videoroom",
opaqueId: opaqueId,
success: function(pluginHandle) {
screenHandler = pluginHandle;
Janus.log(":: Screen handler attached! (" + screenHandler.getPlugin() + ", id=" + screenHandler.getId() + ")");
let register = {
request: "join",
room: parseInt(roomId),
ptype: "publisher",
display: currentUserName
};
screenHandler.send({ message: register });
// janus.destroy();
},
error: function(error) {
Janus.error("  -- Error attaching plugin...", error);
},
consentDialog: function(on) {
// Janus.debug("Consent dialog should be " + (on ? "on" : "off") + " now");
if (on) {
// open screen
} else {
// close screen
}
},
iceState: function(state) {
Janus.log("ICE state changed to " + state);
},
mediaState: function(medium, on) {
Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
},
webrtcState: function(on) {
// bağlantı durumu
Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
if (!on)
return;
},
onmessage: function(msg, jsep) {
Janus.debug(" ::: Screen handler got a message (publisher) :::", msg);
console.log(msg);
let event = msg["videoroom"];
Janus.debug("Event: " + event);
if (! event) {
return;
}
if (event === "joined") {
// Publisher/manager created, negotiate WebRTC and attach to existing feeds, if any
Janus.log("Successfully joined room " + msg["room"] + " with ID " + msg["id"]);

// video conference
publishMyCameraForScreenShare();
} else if (event === "destroyed") {
// // The room has been destroyed
Janus.warn("The room has been destroyed!");
}
},
onlocalstream: function(stream) {
Janus.debug(" ::: ScreenHandler got a local stream :::", stream);
},
onremotestream: function(stream) {
// The publisher stream is sendonly, we don't expect anything here
},
oncleanup: function() {
Janus.log(" ::: Screen handler got a cleanup notification: we are unpublished now :::");
}
});
}
function stopScreenShare() {
unpublishOwnFeed();
unpublishMyCameraForScreenShare();
setTimeout(function(){
publishOwnFeed(true, false);
}, 800);
}

Answer 3

idk可能是usefull或no，但如果你想同时发布几个不同的视频流(例如屏幕和相机(，你必须附加一些janus视频室插件
对于订阅者来说，它看起来就像是两个不同的出版商，有自己的流媒体。