MenuMenu

RTCMultiConnection.onstream

Use this event to receive all local and remote media streams

Usage

connection.onstream = function(event) {
    var video = event.mediaElement;

    // append to <body>
    document.body.appendChild(video);
};

Description

parameterdescription
stream media stream object 
connection.onstream = function(event) {
    yourOwnVideo.src = URL.createObjectURL(event.stream);

    if (event.stream.isScreen) {
        // it is screen
    }

    if (event.stream.isAudio) {
        // it is Audio_Only stream
    }

    if (event.stream.isVideo) {
        if (event.stream.getAudioTracks().length && event.stream.getVideoTracks().length) {
            // Audio+Video stream
        } else {
            // Video-Only stream
        }
    }
};
type either a "local" or "remote" stream 
connection.onstream = function(event) {
    if (event.type === 'local') {
        yourOwnVideo.src = URL.createObjectURL(event.stream);
    }

    if (event.type === 'remote') {
        remoteVideo.src = URL.createObjectURL(event.stream);
    }
};
streamid unique identifier for each stream 
connection.onstream = function(event) {
    var video = event.mediaElement;

    // now you an access it using "document.getElementById"
    video.id = event.streamid;
};
mediaElement either <audio> or <video> element 
connection.onstream = function(event) {
    var video = event.mediaElement;

    if (video.nodeName.toLowerCase() === 'video') {
        // it is <video> tag
    }

    if (video.nodeName.toLowerCase() === 'audio') {
        // it is <audio> tag
    }

    $('body').prepend(video);
};
userid user who shared the stream 
connection.onstream = function(event) {
    var video = event.mediaElement;

    // now you can search all <video>
    // whose "data-userid" matches current userid
    $(video).attr('data-userid', event.userid);

    if (event.userid === connection.userid) {
        // you shared this stream
    } else {
        // someone else (remote-user) shared this stream
    }
};
extra receive extra information from the stream sender 
connection.onstream = function(event) {
    if (event.userid !== connection.userid) {
        var remoteUserId = event.userid;
        var remoteUserExtra = event.extra;
        var hisFullName = remoteUserExtra.fullName;
        var hisEmail = remoteUserExtra.email;
    }
};
isScreen detect if it is a "screen" stream 
connection.onstream = function(event) {
    // using v3
    var isScreen = event.stream.isScreen;

    // using v2
    var isScreen = event.isScreen;

    // cross-versions
    var isScreen = event.isScreen || event.stream.isScreen;
};

Demo

<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>

<script>
var connection = new RTCMultiConnection();

// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// if you want audio+video conferencing
connection.session = {
    audio: true,
    video: true
};

connection.onstream = function(event) {
    var video = event.mediaElement;
    video.id = event.streamid;
    document.body.insertBefore(video, document.body.firstChild);
};

connection.onstreamended = function(event) {
    var video = document.getElementById(event.streamid);
    if (video && video.parentNode) {
        video.parentNode.removeChild(video);
    }
};

connection.openOrJoin('your-room-id');
</script>