Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
MediaStreamTrack.getSources.html
README.md RecordRTC-to-PHP demo added. #48 Aug 28, 2013
audio-only-streaming.html
client-side-datachannel.html
client-side-socket-io.html RecordRTC, DetectRTC, RTCMultiConnection, Canvas-Designer, single-pag… Jun 10, 2017
client-side-websocket.html
client-side.html
remote-stream-recording.html
screen-and-video-from-single-peer.html
switch-streams.html

README.md

Realtime working WebRTC Experiments and Demos

Plug & play type of WebRTC Experiments. Nothing to install. No requirements. Just copy JavaScript code in your site and that's all you need to do!

=

Experiment Name Demo Source Code
Switch streams from screen-sharing to audio+video. (Renegotiation) Demo Source
Share screen and audio/video from single peer connection! Demo Source
Text chat using RTCDataChannel APIs Demo Source
Simple video chat Demo Source
Sharing video - using socket.io for signaling Demo Source
Sharing video - using WebSockets for signaling Demo Source
Audio Only Streaming Demo Source
MediaStreamTrack.getSources Demo Source

=

Chrome-to-Chrome WebRTC Data Connection

It is a single-page demo. Copy/paste code in the console tab and you're done!

var iceServers = {
    iceServers: [{
        url: 'stun:stun.l.google.com:19302'
    }]
};

var optionalRtpDataChannels = {
    optional: [{
        RtpDataChannels: true
    }]
};

var offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels),
    answerer, answererDataChannel;

var offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
    reliable: false
});

setChannelEvents(offererDataChannel, 'offerer');

offerer.onicecandidate = function (event) {
    if (!event || !event.candidate) return;
    answerer && answerer.addIceCandidate(event.candidate);
};

var mediaConstraints = {
    optional: [],
    mandatory: {
        OfferToReceiveAudio: false, // Hmm!!
        OfferToReceiveVideo: false // Hmm!!
    }
};

offerer.createOffer(function (sessionDescription) {
    offerer.setLocalDescription(sessionDescription);
    createAnswer(sessionDescription);
}, null, mediaConstraints);


function createAnswer(offerSDP) {
    answerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
    answererDataChannel = answerer.createDataChannel('RTCDataChannel', {
        reliable: false
    });

    setChannelEvents(answererDataChannel, 'answerer');

    answerer.onicecandidate = function (event) {
        if (!event || !event.candidate) return;
        offerer && offerer.addIceCandidate(event.candidate);
    };

    answerer.setRemoteDescription(offerSDP);
    answerer.createAnswer(function (sessionDescription) {
        answerer.setLocalDescription(sessionDescription);
        offerer.setRemoteDescription(sessionDescription);
    }, null, mediaConstraints);
}

function setChannelEvents(channel, channelNameForConsoleOutput) {
    channel.onmessage = function (event) {
        console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
    };

    channel.onopen = function () {
        channel.send('first text message over RTP data ports');
    };
}

After RTP data ports get open; you can send text messages like this:

offererDataChannel.send('text message');
answererDataChannel.send('text message');

=

Firefox-to-Firefox WebRTC Data Connection

From April 2013, Mozilla did broken changes in Firefox data channel implementation. So, following code will work with upcoming releases.

function setChannelEvents(channel, channelNameForConsoleOutput) {
    channel.onmessage = function (event) {
        console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
    };
    channel.onopen = function () {
        channel.send('first text message over SCTP data ports');
    };
}

function useless() {}

var iceServers = {
    iceServers: [{
            url: 'stun:23.21.150.121'
        }
    ]
};

var offerer = new mozRTCPeerConnection(iceServers),
    answerer, answererDataChannel, offererDataChannel;

offererDataChannel = offerer.createDataChannel('channel', {});
offererDataChannel.binaryType = 'blob';
setChannelEvents(offererDataChannel, 'offerer');

navigator.mozGetUserMedia({
    audio: true,
    fake: true
}, function (stream) {
    offerer.addStream(stream);

    offerer.createOffer(function (sessionDescription) {
        offerer.setLocalDescription(sessionDescription);
        createAnswer(sessionDescription);
    }, null, mediaConstraints);

}, useless);

var mediaConstraints = {
    optional: [],
    mandatory: {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
    }
};

function createAnswer(offerSDP) {
    answerer = new mozRTCPeerConnection(iceServers);
    answerer.ondatachannel = function (event) {
        answererDataChannel = event.channel;
        answererDataChannel.binaryType = 'blob';
        setChannelEvents(answererDataChannel, 'answerer');
    };

    navigator.mozGetUserMedia({
        audio: true,
        fake: true
    }, function (stream) {

        answerer.addStream(stream);
        answerer.setRemoteDescription(offerSDP);

        answerer.createAnswer(function (sessionDescription) {
            answerer.setLocalDescription(sessionDescription);

            offerer.setRemoteDescription(sessionDescription);
        }, null, mediaConstraints);

    }, useless);
}

After SCTP data ports get open; you can send text messages, objects, blobs or files like this:

offererDataChannel.send('text message');
offererDataChannel.send(data);
offererDataChannel.send(blob);
offererDataChannel.send(file);

answererDataChannel.send('text message');
answererDataChannel.send(data);
answererDataChannel.send(blob);
answererDataChannel.send(file);

Firefox-to-Firefox WebRTC Data Connection [old / deprecated]

Here is the old implementation of data channels on Firefox:

var dataPorts = [123, 321]; // [inbound, outbound]
var iceServers = {
    iceServers: [{
        url: 'stun:23.21.150.121'
    }]
};

var offerer = new mozRTCPeerConnection(iceServers),
    answerer, answererDataChannel, offererDataChannel;

offerer.onconnection = function () {
    offererDataChannel = offerer.createDataChannel('channel', {});
    setChannelEvents(offererDataChannel, 'offerer');
};

navigator.mozGetUserMedia({
    audio: true,
    fake: true
}, function (stream) {
    offerer.addStream(stream);

    offerer.createOffer(function (sessionDescription) {
        offerer.setLocalDescription(sessionDescription);
        createAnswer(sessionDescription);
    }, null, mediaConstraints);

}, useless);

var mediaConstraints = {
    optional: [],
    mandatory: {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
    }
};

function createAnswer(offerSDP) {
    answerer = new mozRTCPeerConnection(iceServers);
    answerer.ondatachannel = function (_channel) {
        answererDataChannel = _channel;
        answererDataChannel.binaryType = 'blob';
        setChannelEvents(answererDataChannel, 'answerer');
    };

    navigator.mozGetUserMedia({
        audio: true,
        fake: true
    }, function (stream) {

        answerer.addStream(stream);
        answerer.setRemoteDescription(offerSDP);

        answerer.createAnswer(function (sessionDescription) {
            answerer.setLocalDescription(sessionDescription);

            offerer.setRemoteDescription(sessionDescription, function () {
                answerer.connectDataConnection(dataPorts[0], dataPorts[1]);
                offerer.connectDataConnection(dataPorts[1], dataPorts[0]);
            });
        }, null, mediaConstraints);

    }, useless);
}

function setChannelEvents(channel, channelNameForConsoleOutput) {
    channel.onmessage = function (event) {
        console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
    };

    channel.onopen = function () {
        channel.send('first text message over SCTP data ports');
    };
}

function useless() { }

=

Browser Support

WebRTC Experiments & Demos works fine on following web-browsers:

Browser Support
Firefox Stable / Aurora / Nightly
Google Chrome Stable / Canary / Beta / Dev
Internet Explorer / IE Chrome Frame

=

License

WebRTC Experiments & Demos are released under MIT licence . Copyright (c) 2013 Muaz Khan.

You can’t perform that action at this time.