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