Create conference with media muting and screensharing

Create the conference

Check our tutorial on Conferencing if needed to create the conference

Mute / Unmute your local stream

Muting / unmuting your local stream can easily be done using muteAudio(), unmuteAudio(), muteVideo(), unmuteVideo() of Stream functions. Check documentation for a complete description of Stream possibilities

        //muteAudio from call
        $('#muteAudio').on('click', function () {
            console.log('MAIN - Click muteAudio');
            localStream.muteAudio();
        });
        //unMuteAudio from call
        $('#unMuteAudio').on('click', function () {
            console.log('MAIN - Click unMuteAudio');
            localStream.unmuteAudio();
        });
        //muteVideo from call
        $('#muteVideo').on('click', function () {
            console.log('MAIN - Click muteVideo');
            localStream.muteVideo();
        });
        //unMuteVideo from call
        $('#unMuteVideo').on('click', function () {
            console.log('MAIN - Click unMuteVideo');
            localStream.unmuteVideo();
        });
    

Publish screenSharing in conference

Create a screenSharing stream :

Create the stream using createDisplayMediaStream() function.

Use displayMediaStreamConstraints parameters to define set of desktop media sources you want to propose your user to share.

displayMediaStreamConstraints is defined in : https://w3c.github.io/mediacapture-screen-share/#displaymediastreamconstraints

Check our documentation on createDisplayMediaStream

        const displayMediaStreamConstraints = {
            video: {
                cursor: "always"
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                sampleRate: 44100
            }
        };
        apiRTC.Stream.createDisplayMediaStream(displayMediaStreamConstraints, false)
            .then(function(stream) {
                //Display your stream in video element
            })
            .catch(function(err) {
                console.error('Could not create screensharing stream :', err);
            });
    

Publish the screen stream :

Simply publish your screenSharing stream using publish()

        connectedConversation.publish(screensharingStream);
    

Unpublish the screen stream :

Simply unpublish and release your screenSharing stream using unpublish() and release()

        connectedConversation.unpublish(screensharingStream);
        screensharingStream.release();
    

Complete code sample :

Complete code to publish and unpublish the screenSharing stream is here :

    $('#toggle-screensharing').on('click', function() {
        if (screensharingStream === null) {
            const displayMediaStreamConstraints = {
                video: {
                    cursor: "always"
                },
                audio: {
                    echoCancellation: true,
                    noiseSuppression: true,
                    sampleRate: 44100
                }
            };

            apiRTC.Stream.createDisplayMediaStream(displayMediaStreamConstraints, false)
                .then(function(stream) {
                    stream.on('stopped', function() {
                        //Used to detect when user stop the screenSharing with Chrome DesktopCapture UI
                        console.log("stopped event on stream");
                        var elem = document.getElementById('local-screensharing');
                        if (elem !== null) {
                            elem.remove();
                        }
                        screensharingStream = null;
                    });
                    screensharingStream = stream;
                    connectedConversation.publish(screensharingStream);
                    // Get media container
                    var container = document.getElementById('local-container');
                    // Create media element
                    var mediaElement = document.createElement('video');
                    mediaElement.id = 'local-screensharing';
                    mediaElement.autoplay = true;
                    mediaElement.muted = true;
                    // Add media element to media container
                    container.appendChild(mediaElement);
                    // Attach stream
                    screensharingStream.attachToElement(mediaElement);
                })
                .catch(function(err) {
                    console.error('Could not create screensharing stream :', err);
                });
        } else {
            connectedConversation.unpublish(screensharingStream);
            screensharingStream.release();
            screensharingStream = null;
            var elem = document.getElementById('local-screensharing');
            if (elem !== null) {
                elem.remove();
            }
        }
    });
    

Live Demo