↑ WEBRTC EXPERIMENTS

File Sharing + Text Chat using WebRTC DataChannel

Star 5,115 Fork 2,318Follow @muaz-khan1,424

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

Open Data Channel

or join:

Text Chat

Share Files



Getting started with WebRTC DataChannel

<script src="https://cdn.webrtc-experiment.com/DataChannel.js"></script>
<script>
    var channel = new DataChannel();

    // to create/open a new channel
    channel.open('channel-name');

    // to send text/data or file
    channel.send(file || data || 'text');
	
    // if soemone already created a channel; to join it: use "connect" method
    channel.connect('channel-name');
</script>
Remember, A-to-Z, everything is optional! You can set channel-name in constructor or in open/connect methods. It is your choice!

Features:

  1. Send file directly — of any size
  2. Send text-message of any length
  3. Send data directly
  4. Simplest syntax ever! Same like WebSockets.
  5. Supports fallback to socket.io/websockets/etc.
  6. Auto users' presence detection
  7. Allows you eject any user; or close your entire data session


Additional:

<script>
    // to be alerted on data ports get open
    channel.onopen = function(userid) {}
	
    // to be alerted on data ports get new message
    channel.onmessage = function(message, userid) {}
	
    // by default; connection is [many-to-many]; you can use following directions
    channel.direction = 'one-to-one';
    channel.direction = 'one-to-many';
    channel.direction = 'many-to-many';	// --- it is default

    // show progress bar!
    channel.onFileProgress = function (packets) {
        // packets.remaining
        // packets.sent
        // packets.received
        // packets.length
    };

    // on file successfully sent
    channel.onFileSent = function (file) {
        // file.name
        // file.size
    };

    // on file successfully received
    channel.onFileReceived = function (fileName) {};
</script>


Errors Handling

<script>
    // error to open data ports
    channel.onerror = function(event) {}
	
    // data ports suddenly dropped
    channel.onclose = function(event) {}
</script>


Use your own socket.io for signaling

<script>
    // by default Firebase is used for signaling; you can override it
    channel.openSignalingChannel = function(config) {
        var socket = io.connect('http://your-site:8888');
        socket.channel = config.channel || this.channel || 'default-channel';
        socket.on('message', config.onmessage);

        socket.send = function (data) {
            socket.emit('message', data);
        };

        if (config.onopen) setTimeout(config.onopen, 1);
        return socket;
    }
</script>


Latest Updates

RecordRTC, DetectRTC, RTCMultiConnection, Canvas-Designer, single-page demos, docs, MediaStreamRecorder, RecordRTC-to-Nodejs, etc. updated.
video-conferencing, Signaling.md, RTCMultiConnection, RecordRTC, MultiRTC, getScreenId, Firefox-Extensions, FileBuferReader, Ffmpeg.js,

TURN doc + webrtcpedia, DetectRTC, switch-streams demo, Conversation.js,
Chrome-Extensions updated.
Translator.js, RTCMultiConnection.js, RecordRTC.js, Chrome-Extensions, FileBufferReader.js, fbr-client, meeting.js demo, realtime-pluginfree-calls demo, RTCall.js demo, socket.io demo, web socket demo, and WebRTC-File-Sharing demo updated.
Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataChannel, Canvas-Designer, Chrome-Extensions, Firefox-Extensions, getScreenId, FileBufferReader and Ffmpeg.js
RecordRTC, DetectRTC, MediaStreamRecorder, RTCMultiConnection, Canvas-Designer, Chrome-Extensions, Ffmpeg.js, getScreenId, gumAdpater, video-conferencing and WebRTC-Scalable-Broadcast updated.
Merge pull request #450 from hubertgrzeskowiak/patch-1

Clarified some points in README. Fixes #449
Clarified some points in README. Fixes #449
RTCPeerConnection-v1.5, Scalable-Broadcast, RMC3, RecordRTC, MediaStreamRecorder, Firefox-Extensions, FFmpeg.js, file-hangout, chat-hangout, DetectRTC, Chrome-Extensions, and Canvas-Designer updated.
Canvas-Designer, Chrome-Extensions, ConcatenateBlobs, Conversation.js, DataChannel.js, DetectRTC, Ffmpeg-asm.js demos, FileBufferReader demos, getStats.js, meeting.js demo, MultiRTC, part-fo-screen demo, Record-Entire-Meeting, RecordRTC, RTCMultiConnection v2.2.2 and v3, socket.io demo and screen.js updated.
DetectRTC, gum adapter, Chrome-Extensions, Canvas-Designer, Record-Entire-Meeting, RTCMultiConnection v3.0, screen-sharing, etc. updated.
Canvas-Designer, Chrome-File-Sharing-extension, Firefox-Screen-capturing-addon, DetectRTC, MediaStream.getSources demo, FileBufferReader, getScreenId, realtime-pluginfree-call demo, RecordRTC, RTCMultiConnection v2.2.2 and v3.0, many-to-one broadcasting demo, File.js deme updated.
Scalable file sharing demo, RecordRTC, RTCMultiConnection v2.2.2 and v3.0, File sharing chrome extension, firefox screen capturing extension, DetectRTC, and Translator.js updated.
Record-Entire-Meeting, Firefox-Extension, DetecRTC, RecordRTC, MediaStreamRecorder, RTCMultiConnection, Chrome-Extension, WebRTC-Scalable-Broadcast, Screen.js, getScreenId.js, DataChannel.js readme, ffmpeg-asm.js demos updated.