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

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 看，video call demo 将是我开始尝试添加视频流的地方。如果有办法将它与screen sharing demo 结合起来，那就太理想了。

祝你好运！

Answer 2

感谢金伯利， 尝试后，我能够将自己的视频添加到其他参与者。 顺便说一句，该代码仅在我的本地计算机上进行了测试，尚未在线测试。 我正在分享此代码，也许它可以帮助某人。 :)

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);
}