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

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

以下代码是我的屏幕共享内容，效果很好。 但是我也想在共享屏幕时发布我的本地相机，是否可能，如果是，我该怎么做？

发布供稿代码。

function publishOwnFeed(useAudio,isscreensharing) {
    let media = null;
    if (isscreensharing) {
        media = {
            video: "screen",audioRecv: false,videoRecv: false,audioSend: useAudio,videoSend: true
        };
    } else {
        media = {
            audioRecv: false,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);
}

我非常感谢您的帮助。

解决方法

我没有与 Janus 合作过，但我已经与其他 WebRTC 库（如 Daily）合作过，并且知道这是可能的。这是我将如何使用任何库执行此操作的伪代码：

• 按照图书馆的文档开始通话
• 直接通过 WebRTC 或图书馆的帮助获取发起呼叫的本地摄像头流的人
• 在该相机流开始时将其插入具有相应标识符的 HTML 元素

简单地看一下 Janus，这 video call demo 将是我开始尝试添加视频流的地方。如果有办法将它与 screen sharing demo 结合起来，那就太理想了。

祝你好运！

,

感谢金伯利， 尝试后，我能够将自己的视频添加到其他参与者。 顺便说一下，代码只在我本地电脑上测试过，还没有在网上测试过。 我正在共享此代码，也许它可以帮助某人。 :)

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