Skip to content

added datachannel for chat messages #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dip-kush wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added datachannel for chat messages #7

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
840fc1e
added datachannel for chat messages
dip-kush Nov 12, 2015
bc44f3c
added datachannel for file sharing
dip-kush Nov 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 80 additions & 1 deletion video_call_with_chat_and_file_sharing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,51 @@

var webrtc_capable = true;
var rtc_peer_connection = null;

var rtc_data_channel = null;
var optional_rtp_data_channels = null;
var rtc_datachannel_label = null;
var optional_data_channel_parameters = null;

var rtc_session_description = null;
var rtc_ice_candidate = null
var get_user_media = null;
var connect_stream_to_src = null;
var stun_server = "stun.l.google.com:19302";

optional_rtp_data_channels = {
optional: [{
RtpDataChannels: true
}]
};
rtc_datachannel_label = 'RTCDataChannel';

optional_data_channel_parameters = {
reliable: false
};

function setChannelEvents(channel) {
channel.onmessage = function (event) {
var data = JSON.parse(event.data);
console.debug('received a message:', event.data);
console.log("Message Type: "+ data.type);
console.log("Message: "+ data.message);
};

channel.onopen = function () {
console.log("channel is opened");
//channel.send('first text message over RTP data ports');
};

channel.onclose = function (e) {
console.error(e);
};
channel.onerror = function (e) {
console.error(e);
};
}


if (navigator.getUserMedia) { // WebRTC 1.0 standard compliant browser
rtc_peer_connection = RTCPeerConnection;
rtc_session_description = RTCSessionDescription;
Expand All @@ -63,6 +102,7 @@
} else if (navigator.webkitGetUserMedia) { // early webkit webrtc implementation
rtc_peer_connection = webkitRTCPeerConnection;
rtc_session_description = RTCSessionDescription;

rtc_ice_candidate = RTCIceCandidate;
get_user_media = navigator.webkitGetUserMedia.bind(navigator);
connect_stream_to_src = function(media_stream, media_element) {
Expand Down Expand Up @@ -115,7 +155,14 @@
"iceServers": [ // information about ice servers
{ "url": "stun:"+stun_server }, // stun server info
]
});
}, optional_rtp_data_channels);

rtc_data_channel = peer_connection.createDataChannel(rtc_datachannel_label
, optional_data_channel_parameters);

console.log(rtc_data_channel);

setChannelEvents(rtc_data_channel);

// generic handler that sends any ice candidates to the other peer
peer_connection.onicecandidate = function (ice_event) {
Expand Down Expand Up @@ -228,6 +275,8 @@

/* functions used above are defined below */



// handler to process new descriptions
function new_description_created(description) {
peer_connection.setLocalDescription(
Expand All @@ -245,6 +294,7 @@
);
}


// handle signals as a caller
function caller_signal_handler(event) {
var signal = JSON.parse(event.data);
Expand Down Expand Up @@ -352,6 +402,13 @@
if (e.keyCode == 13) {
var new_message = this.value;
this.value = "";

rtc_data_channel.send(JSON.stringify({
type: "new_chat_message",
message: new_message
})
);

signaling_server.send(
JSON.stringify({
token:call_token,
Expand Down Expand Up @@ -472,10 +529,32 @@
document.getElementById("file-img-"+file_id).src = thumbnail_data;
send_file_parts("thumbnail", file_id, thumbnail_data);
send_file_parts("file", file_id, data);
send_file_using_dataChannel("file", file_id, data);
}
img.src = data;
}


function send_file_using_dataChannel(file_type, id, data){
var chunkLength = 1000;
data_part = {};

if (data.length > chunkLength){
data_part.type = "file";
data_part.message = data.slice(0, chunkLength);
}else{
data_part.type = "file"
data_part.message = data;
}

rtc_data_channel.send(JSON.stringify(data_part));
var remainingDataURL = data.slice(data_part.message.length);
if (remainingDataURL.length) setTimeout(function () {
send_file_using_dataChannel(null, null, remainingDataURL); // continue transmitting
}, 500)
}


// break file into parts and send each of them separately
function send_file_parts(type, id, data) {
var message_type = "new_file_part";
Expand Down