Conversation

Here is a description of the different steps to add media devices selection on conference

Connect to the conference

Check our tutorial on conversation to have details about the conversation bases.

Display the media devices list

Add the selector in your Web page :

        <select id='select-camera' name="camera" class="custom-select" placeholder="No camera"></select>
        <legend id="my-camera">Camera</legend>
        <select id='select-mic' name="camera" class="custom-select" placeholder="No microphone"></select>
        <legend id="my-mic">Microphone</legend>
    

Add the code to update the media devices list :

        var mediaDevices = ua.getUserMediaDevices();
        updateDeviceList(mediaDevices);
    

Create a stream with the selected devices

        var createStreamOptions = {};
        createStreamOptions.audioInputId = selectMic.value;
        createStreamOptions.videoInputId = selectCamera.value;
        ua.createStream(createStreamOptions)
            .then(function (stream) {
                // Save local stream
                localStream = stream;
                stream.removeFromDiv('local-container', 'local-media');
                stream.addInDiv('local-container', 'local-media', {}, true);
            })
            .catch(function (err) {
                console.error('create stream error', err);
                reject()
            });
    

Switch camera

Use call.replacePublishedStream() function update the published stream after a camera switch. Check the code of our sample for a complete description : on mobile devices, we need to wait for the first camera to be released before creating a new stream with the second camera

        call.replacePublishedStream(null, callbacks);
    

Use Stream#addInDiv() and Stream#removeFromDiv()

We advice you to use to use our helpers for stream displays in DOM. These methods includes support of Safari autoplay policies constraints (iOS) to avoid WebRTC audio/video plays issues.

        connectedConversation
            .on('streamAdded', function(stream) {
                console.log('connectedConversation streamAdded');
                stream.addInDiv('remote-container', 'remote-media-' + stream.streamId, {}, false);
            }).on('streamRemoved', function(stream) {
                console.log('connectedConversation streamRemoved');
                stream.removeFromDiv('remote-container', 'remote-media-' + stream.streamId);
            });
    

Live Demo