What is WebRTC? WebRTC integration to Javascript!
WebRTC is an open-source project that is designed to empower real-time communication as audio, video, and information in Web and local applications. It also allows building rich and top-notch RTC applications browsers, mobile platforms, and IoT gadgets. It enables these applications to communicate through a set of common protocols.
There are many WebRTC usages, used and tested in diverse industries as health, financial services, education, and many other industries. Here are some functionalities of WebRTC explained
Record sharing
Let’s say you are taking a shot at a task and need to send massive documents to your fellow person. You can legitimately send it through an internet browser using WebRTC as opposed to messaging and transferring it to third party cloud storage.
Screen sharing
You can communicate your offer to your associates during gatherings and discussions. It causes you to show signs of improvement and clear thoughts for the work in progress and its results.
Media transmission
It empowers single direction media transmissions like shows, discourses, digital broadcasts, and live recordings. Few WebRTC platforms additionally permit you with continuous access to members’ participation status.
Multiparty video conferencing
You can make a multi-client video conference using WebRTC and set up an immediate shared communication with each other. Each platform gives a free preliminary in beginning, up to restricted individuals. Adaptability relies upon the equipment and transmission capacity, and you can likewise scale using multipoint control units and specific sending units.
Implanted endpoints
You can associate with live specialists when you’re in a hurry utilizing WebRTC. You can install vending machines, ATMs, bus stops, and retail stores with WebRTC engines.
Coordination
You can help your agents utilizing this innovation. You can give continuous help during the acquiring procedure by coordinating your site or application with a WebRTC channel.
The main reason behind WebRTC is its powerful technology use – such as HTML, HTTP, and TCP/IP. These are open and freely implementable. WebRTC enables completely free and high-quality communication solutions that no other platforms can offer.
It is integrated with high-quality audio and video engines for making the perfect, high quality and seamless communication.
WebRTC has the following JavaScript APIs
The MediaStream API also known as getUserMedia represents synchronized streams of media. For example: – when a stream is taken from a camera or microphone, all the input will have synchronized video and audio tracks.
WebRTC utilizes RTCPeerConnection to convey streaming information between browsers yet, besides needs a system to facilitate communication and to send control messages. This process is known as signaling. This method and protocols are not determined by WebRTC.
RTCPeerConnection is the WebRTC segment that handles steady and proficient communication of streaming data between peers. The following is a WebRTC engineering graph demonstrating the job of RTCPeerConnection.
WebRTC bolsters real-time communication for different kinds of information as well as audion and video. The RTCDataChannel API empowers a shared exchange of subjective data, with low idleness and high throughput.
Code for WebRTC to Javascript Integration
var connection = new RTCMultiConnection();
connection.socketURL = ‘https://rtcmulticonnection.herokuapp.com:443/‘
connection.socketMessageEvent = ‘ICOlivestream’;
connection.enableLogs = true;
connection.enableFileSharing = true;
var roomid = ‘Q12345e123’
connection.session = {
audio: true,
video: true,
data: true
};
connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
connection.getScreenConstraints = function (callback) {
getScreenConstraints(function (error, screen_constraints) {
if (!error) {
screen_constraints = connection.modifyScreenConstraints(screen_constraints);
callback(error, screen_constraints);
return;
}
throw error;
});
};
function startLiveStreamJs(userImage) {
userType = getModerator();
if(userType === 1){
moderatorJoin(userImage);
} else {
presenterJoin(userImage);
}
}
function moderatorJoin(userImage) {
connection.checkPresence(roomid, function(isRoomExist,roomid,error) {
if (isRoomExist) {
connection.join(roomid);
} else {
connection.open(roomid);
}
if(error) {
console.log(error);
}
});
connection.extra = {
fullname: getName(),
image: userImage,
Type: ‘Modertor’,
id: getUserId()
};
}
function presenterJoin(userImage){
connection.checkPresence(roomid, function(isRoomExist,roomid,error) {
if (isRoomExist) {
connection.join(roomid);
} else {
connection.open(roomid);
}
if(error) {
console.log(error);
}
});
connection.extra = {
fullname: getName(),
image: userImage,
Type: ‘Presenter’,
id: getUserId()
};
}
function investorJoin(userImage){
connection.session = {
audio: false,
video: false,
data: true
};
connection.extra = {
fullname: getName(),
image: userImage,
Type: ‘Investor’,
id: getUserId()
};
connection.checkPresence(roomid, function(isRoomExist) {
if (isRoomExist) {
connection.join(roomid);
} else {
connection.open(roomid);
}
});
}
document.getElementById(‘share-file’).onclick = function (file) {
var fileSelector = new FileSelector();
fileSelector.selectSingleFile(function (file) {
connection.send(file);
});
};
window.onbeforeunload = function(e) {
connection.attachStreams.forEach(function (stream) {
stream.stop();
});
connection.leave();
connection.close();
};
connection.filesContainer = document.getElementById(‘file-container’);
var presentervideosContainer = document.getElementById(‘presentervideo’);
var moderatorvideosContainer = document.getElementById(‘moderatorvideo’);
var livevideoparentContainer = document.getElementById(‘livevideoparent’);
var lastSelectedFile;
var chunk_size = 60 * 1000;
connection.fileReceived = {};
connection.chunkSize = chunk_size;
var chatContainer = document.querySelector(‘.chatwindow’);
var numberOfKeys = 0;
var lastMessageUUID;
connection.onstreamended = function (event) {
connection.onUserStatusChanged(event);
var mediaElement = document.getElementById(event.streamid);
if (mediaElement) {
mediaElement.parentNode.removeChild(mediaElement);
}
}
connection.onstream = function (event) {
if (document.getElementById(event.streamid)) {
var existing = document.getElementById(event.streamid);
existing.parentNode.removeChild(existing);
}
event.mediaElement.removeAttribute(‘src’);
event.mediaElement.removeAttribute(‘srcObject’);
var video = document.createElement(‘video’);
video.setAttributeNode(document.createAttribute(‘autoplay’));
video.setAttributeNode(document.createAttribute(‘playsinline’));
video.setAttributeNode(document.createAttribute(‘controls’));
video.controls = false;
if (event.type === ‘local’) {
video.muted = true;
}
video.srcObject = event.stream;
if (event.stream.isScreen === true) {
video.id = event.stream.id;
video.className = ‘screencontainervideo’;
screenContainer.appendChild(video);
} else {
video.id = event.stream.id;
if(event.extra.Type === ‘Modertor’) {
moderatorvideosContainer.appendChild(video);
} else {
var childcount = presentervideosContainer.childElementCount;
if(childcount === 1) {
livevideoparentContainer.className = ‘live_video two’;
} else if(childcount === 2) {
livevideoparentContainer.className = ‘live_video three’;
}
else if(childcount === 3) {
livevideoparentContainer.className = ‘live_video four’;
}
presentervideosContainer.appendChild(video);
}
}
}
function getName() {
const UserData = JSON.parse(localStorage.getItem(‘UserData’));
if (UserData !== undefined && UserData !== null) {
return UserData.name;
} else {
return ‘guest’;
}
}
function getImage() {
const UserData = JSON.parse(localStorage.getItem(‘UserData’));
if (UserData !== undefined && UserData !== null && UserData.image !== ” && UserData.image !== null && UserData.image !== undefined) {
var fileUrl = UserData.image;
if (fileUrl.indexOf(‘http’) === –1) {
return environment.ApiHostURL + ‘static/’ + fileUrl;
} else {
return fileUrl;
}
} else {
return “../../assets/img/ico-user.png”;
}
}
function getUserId() {
const UserData = JSON.parse(localStorage.getItem(‘UserData’));
if (UserData !== undefined && UserData !== null) {
return UserData.id;
} else {
return 0;
}
}
function getModerator() {
const UserData = JSON.parse(localStorage.getItem(‘UserData’));
if (UserData !== undefined && UserData !== null) {
if(UserData.ismoderator) {
return 1;
} else {
return 2;
}
} else {
return 0;
}
}
function appendDIV(data, type) {
var existing = false;
var disabl = false;
if(disabl){
div;
if (document.getElementById(data.lastMessageUUID)) {
div = document.getElementById(data.lastMessageUUID);
existing = true;
} else {
div = document.createElement(‘div’);
if (data.lastMessageUUID) {
div.id = data.lastMessageUUID;
}
}
if(type === 1) {
div.innerHTML = data.username + ‘ says: ‘ + data.text;
} else {
div.innerHTML = data.username + ‘ typing ‘;
}
}
var li = document.createElement(‘li’);
var img = document.createElement(‘img’);
img.src = data.image;
li.appendChild(img);
var divchatcontent = document.createElement(‘div’);
divchatcontent.className = ‘chat_content’;
var span = document.createElement(‘span’)
var d = new Date();
span.innerHTML = d.toLocaleTimeString();
divchatcontent.appendChild(span);
var h5 = document.createElement(‘h5’);
h5.innerHTML = data.username;
divchatcontent.appendChild(h5);
var p = document.createElement(‘p’);
p.innerHTML = data.text;
divchatcontent.appendChild(p);
li.appendChild(divchatcontent);
li.tabIndex = 0;
li.focus();
if (!existing) {
chatContainer.appendChild(li);
}
chatContainer.tabIndex = 0;
chatContainer.focus();
}
document.getElementById(‘chat-input’).onkeypress = function(e) {
numberOfKeys++;
var disabled = false;
if(disabled){
if (numberOfKeys > 3) {
numberOfKeys = 0;
}
if (!numberOfKeys) {
if (!lastMessageUUID) {
lastMessageUUID = Math.round(Math.random() * 999999999) + 9995000;
}
var chatmessage = {
username: connection.extra.fullname,
image: connection.extra.image,
lastMessageUUID: lastMessageUUID
}
connection.send({
type: ‘typing’,
content: chatmessage
});
}
if (!this.value.replace(/^\s+|\s+$/g, ”).length) {
var chatmessage = {
username: connection.extra.fullname,
image: connection.extra.image,
lastMessageUUID: lastMessageUUID,
}
connection.send({
type: ‘stoppedtyping’,
content: chatmessage
});
return;
}
}
if (e.keyCode !== 13) return;
this.value = this.value.replace(/^\s+|\s+$/g, ”);
chatmessage = {
username: connection.extra.fullname,
image: connection.extra.image,
text: this.value,
lastMessageUUID: lastMessageUUID
}
appendDIV(chatmessage,1);
connection.send({
type: ‘message’,
content: chatmessage
});
lastMessageUUID = null;
this.value = ”;
this.focus();
};
connection.onmessage = function (event) {
if(event.data.type === ‘message’) {
appendDIV(event.data.content, 1);
return;
} else if(event.data.type === ‘typing’) {
appendDIV(event.data.content, 2);
return;
} else if(event.data.type === ‘stoppedtyping’) {
var div = document.getElementById(event.data.content.lastMessageUUID);
if (div) div.parentNode.removeChild(div);
return;
}
}
var numberOfConnectedUsers = document.getElementsByClassName(‘view_more’);
var userlist = document.getElementById(‘connectedusers’);
function setConnectedUsers(length) {
if(length > 5) {
numberOfConnectedUsers.innerHTML = “+ “ + length;
}
}
connection.onopen = function (event) {
setConnectedUsers(connection.getAllParticipants().length);
userListUpdate(event);
}
function userListUpdate(event) {
var usernameli = document.createElement(‘li’);
usernameli.id = event.userid;
var linktoUser = document.createElement(‘a’);
linktoUser.href = “/UProfile/” + event.extra.id;
linktoUser.target = “_blank”;
var userImage = document.createElement(“img”);
userImage.src = event.extra.image;
linktoUser.appendChild(userImage);
usernameli.appendChild(linktoUser);
userlist.appendChild(usernameli);
}
var progressHelper = {};
connection.autoSaveToDisk = false;
connection.onFileProgress = function (chunk, uuid) {
var helper = progressHelper[chunk.uuid];
helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
updateLabel(helper.progress, helper.label);
};
var existinguid;
connection.onFileStart = function (file) {
if (existinguid !== file.uuid) {
var li = document.createElement(‘li’);
li.title = file.name;
li.innerHTML = ‘0% ’;
connection.filesContainer.appendChild(li);
progressHelper[file.uuid] = {
li: li,
progress: li.querySelector(‘progress’),
label: li.querySelector(‘label’)
};
progressHelper[file.uuid].progress.max = file.maxChunks;
existinguid = file.uuid;
}
};
connection.onFileEnd = function (file) {
progressHelper[file.uuid].li.innerHTML = ‘ + file.url + ‘” target=”_blank” download=”‘ + file.name + ‘”>’ + file.name + ‘’;
};
function updateLabel(progress, label) {
if (progress.position == –1) return;
var position = +progress.position.toFixed(2).split(‘.’)[1] || 100;
label.innerHTML = position + ‘%’;
}
Conclusion
The APIs and guidelines of WebRTC can democratize and decentralize tools for content creation and correspondence—for communication, gaming, video generation, music-production, newsgathering, and numerous different applications.
Awesome post! Keep up the great work! ????
Thanks for your Valuable Feedback!
Your email address will not be published. Required fields are marked *
Comment
