diff --git a/video_call_with_chat_and_file_sharing.html b/video_call_with_chat_and_file_sharing.html index 054abd5..5c57582 100644 --- a/video_call_with_chat_and_file_sharing.html +++ b/video_call_with_chat_and_file_sharing.html @@ -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; @@ -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) { @@ -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) { @@ -228,6 +275,8 @@ /* functions used above are defined below */ + + // handler to process new descriptions function new_description_created(description) { peer_connection.setLocalDescription( @@ -245,6 +294,7 @@ ); } + // handle signals as a caller function caller_signal_handler(event) { var signal = JSON.parse(event.data); @@ -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, @@ -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";