screensharingjanus

Publishing my screen and camera at same time using Janus WebRTC Gateway


the following codes is my screen sharing stuff and which works fine. But i also want to publish my local camera when i share my screen, is it possible, if yes how can i do it ?

Publish feed code.

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

Start screenshare code.

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

Stop screenshare code.

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

i really appreciate for any help.


Solution

  • thanks Kimberlee, after trying I was able to add my own video to other participants. by the way, the code is tested only on my local computer, it has not been tested online yet. i am sharing this code maybe it can help someone. :)

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