RTCMultiConnection Docs

RTCMultiConnection API Reference / "onstream" event

"onstream" event is fired for all local/remote media streams. Each media stream is given a unique stream-id and an EVENT object is passed over onstream allows you check not only type of stream, also all possible things e.g. is it a screen stream or audio/video; stream sender's userid and extra-data; and much more!
connection.onstream = function(event) {
    if (event.isScreen) {
        // screenVideo.src = event.blobURL;
        screenDiv.appendChild(event.mediaElement);
    }

    if (event.isAudio) {
        audioOnlyTag.src = event.blobURL;
    }

    if (event.isVideo) {
        // audioPlusVideo.src = event.blobURL;
        // videoOnly.src = event.blobURL;
        videoDiv.appendChild(event.mediaElement);
    }
};

// in details:
connection.onstream = function(e) {
    // e.mediaElement (audio or video element)
    // e.stream     native MediaStream object
    // e.streamid   unique identifier of the stream; synced among all users!
    // e.session    {audio: true, video: true, screen: true}
    // e.blobURL    blob-URI
    // e.type       "local" or "remote"
    // e.extra
    // e.userid      the person who shared stream with you!
    
    // easiest way to display audio/video elements
    document.body.appendChild(e.mediaElement);
    
    // e.isVideo ---- if it is a  Video stream
    // e.isAudio ---- if it is an Audio stream
    // e.isScreen --- if it is screen-sharing stream
};

Detect TYPE of Stream

connection.onstream = function(e) {
    if(e.isScreen) {
        // it is screen
    }
    else if(e.isVideo) {
        // it is audio+video
    }
    else if(e.isAudio) {
        // it is only audio
    }
};

onstreamid and onstream

// on getting remote stream's clue
connection.onstreamid = function (e) {
    var mediaElement = document.createElement(e.isAudio ? 'audio' : 'video');
    mediaElement.controls = true;
    mediaElement.poster = connection.resources.muted;
    mediaElement.id = e.streamid;
    connection.body.appendChild(mediaElement);
};

// on getting local or remote media stream
connection.onstream = function (e) {
    if (e.type == 'local') {
        connection.body.appendChild(e.mediaElement);
        return;
    }

    var mediaElement = document.getElementById(e.streamid);
    if (!mediaElement) return;
    mediaElement.src = e.blobURL;
    mediaElement.play();
};

// when remote user closed the stream
connection.onstreamended = function (e) {
    if (e.type == 'local') {
        e.mediaElement.parentNode.removeChild(e.mediaElement);
        return;
    }

    var mediaElement = document.getElementById(e.streamid);
    if (!mediaElement) return;
    mediaElement.parentNode.removeChild(mediaElement);
};

EVENT.blobURL

connection.onstream = function(e) {
    if(e.type == 'local') {
        yourLocalVideo.src = e.blobURL;
    }
    
    if(e.type == 'remote') {
        yourRemoteVideo.src = e.blobURL;
    }
};

Forward Remote Stream

// demo: remote-stream-forwarding.html
connection.onstream = function(e) {
    if (e.type == 'remote' && connection.UA.Chrome) {
        // chrome doesn't yet permits remote audio forwarding
        // https://code.google.com/p/webrtc/issues/detail?id=2192#c15
        var stream = new webkitMediaStream(e.stream.getVideoTracks());
        separateRTCMultiConnection.attachStreams.push(stream);
        separateRTCMultiConnection.dontCaptureUserMedia = true;
        separateRTCMultiConnection.open();
    }
};

Want to ask a Question?

You can include your email for private conversation!

Latest Updates