Conversation

Here is a description of the different steps to create a multi-party communication:

Define the HTML structure

        <div id="conference">
        <div id="remote-container"></div>
        <div id="local-container"></div>
        </div>
    

Create and register a UserAgent

Check our tutorial on registration if needed to create the userAgent and register.

Create the conversation

        //Create the conversation
        let connectedConversation = connectedSession.getConversation(name);
    

Destroy the conversation

        //Clean up all local resources attached to the conversation
        connectedConversation.destroy();
    

Create a stream

Check our tutorial on stream management to create the stream.

Join the conversation :

        // Join the conversation
        connectedConversation.join()
            .then(function(response) {
                //Conversation joined
            }).catch(function (err) {
                console.error('Conversation join error', err);
            });
    

Publish your stream to the conversation

Publish your stream thanks to the publish() function :

        //Publish your own stream to the conversation : localStream
        connectedConversation.publish(localStream, null);
    

Add events listeners on Conversation

Add listener on 'streamListChanged' event in order to subscribe to remote stream

'streamListChanged' Event gives the information about streams that are already published by remote parties on the conversation with the status : 'added', 'updated', 'removed'

You can then decide the streams you want to subscribe

        connectedConversation.on('streamListChanged', function(streamInfo) {
            console.log("streamListChanged :", streamInfo);
            if (streamInfo.listEventType === 'added') {
                if (streamInfo.isRemote === true) {
                    connectedConversation.subscribeToMedia(streamInfo.streamId)
                        .then(function (stream) {
                            console.log('subscribeToMedia success');
                        }).catch(function (err) {
                            console.error('subscribeToMedia error', err);
                        });
                }
            }
        });
    

Add listener on 'streamAdded' and on 'streamRemoved' event in order to manage media element addings or removal in DOM

In order to display or remove media element in DOM, you can use our helpers : addInDiv() and removeFromDiv(). We manage some devices specificities in our helpers that can help avoid media plays issue for instance with Safari iOS.

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

Or you can choose to completely manage the DOM elements :

        connectedConversation.on('streamAdded', function(stream) {
            // Subscribed Stream is available for display
            // Get remote media container
            var container = document.getElementById('remote-container');
            // Create media element
            var mediaElement = document.createElement('video');
            mediaElement.id = 'remote-media-' + stream.streamId;
            mediaElement.autoplay = true;
            mediaElement.muted = false;
            // Add media element to media container
            container.appendChild(mediaElement);
            // Attach stream
            stream.attachToElement(mediaElement);
        }).on('streamRemoved', function(stream) {
            document.getElementById('remote-media-' + stream.streamId).remove();
        });
    

Live Demo