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 createScreensharingStream() function. Use captureSourceType parameters to define set of desktop media sources you want to propose your user to share. Check our documentation on createScreensharingStream

        var captureSourceType = [];
        if (apiRTC.browser === 'Firefox') {
            captureSourceType = "screen";
        } else {
            //Chrome
            captureSourceType = ["screen", "window", "tab", "audio"];
        }
        apiRTC.Stream.createScreensharingStream(captureSourceType)
            .then(function(stream) {
            })
            .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) {
            var captureSourceType = [];
            if (apiRTC.browser === 'Firefox') {
                captureSourceType = "screen";
            } else {
                //Chrome
                captureSourceType = ["screen", "window", "tab", "audio"];
            }
            apiRTC.Stream.createScreensharingStream(captureSourceType)
                .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");
                        document.getElementById('local-screensharing').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;
            document.getElementById('local-screensharing').remove();
        }
    });
    

Live Demo