Author: saqibkhan

Web RTC introduced by World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing.

The web RTC implements three API’s as shown below −

• MediaStream − get access to the user’s camera and microphone.
• RTCPeerConnection − get access to audio or video calling facility.
• RTCDataChannel − get access to peer-to-peer communication.

MediaStream

The MediaStream represents synchronized streams of media, For an example, Click on HTML5 Video player in HTML5 demo section or else click here.

The above example contains stream.getAudioTracks() and stream.VideoTracks(). If there is no audio tracks, it returns an empty array and it will check video stream,if webcam connected, stream.getVideoTracks() returns an array of one MediaStreamTrack representing the stream from the webcam. A simple example is chat applications, a chat application gets stream from web camera, rear camera, microphone.

Sample code of MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Session Control, Network & Media Information

Web RTC required peer-to-peer communication between browsers. This mechanism required signaling, network information, session control and media information. Web developers can choose different mechanism to communicate between the browsers such as SIP or XMPP or any two way communications.

Sample code of createSignalingChannel()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
  signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
  remoteView.src = URL.createObjectURL(evt.stream);
   };
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
  selfView.src = URL.createObjectURL(stream);
  pc.addStream(stream);
  if (isCaller)
     pc.createOffer(gotDescription);
  else
     pc.createAnswer(pc.remoteDescription, gotDescription);
     function gotDescription(desc) {
        pc.setLocalDescription(desc);
        signalingChannel.send(JSON.stringify({ "sdp": desc }));
     }
  });
   }
   signalingChannel.onmessage = function (evt) {
  if (!pc)
     start(false);
     var signal = JSON.parse(evt.data);
  if (signal.sdp)
     pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
  else
     pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};

Cross-origin resource sharing (CORS) is a mechanism to allows to load the restricted resources from another domain in web browser

For example, suppose we click on HTML5 video player in HTML5 demo section. First, it will ask camera permission, if user allow the permission then only it will open the camera otherwise not.

Making a CORS request

The modern browsers like Chrome, Firefox, Opera and Safari all use the XMLHttprequest2 object and Internet Explorer uses the similar XDomainRequest object.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
  // Check if the XMLHttpRequest object has a "withCredentials" property.
  // "withCredentials" only exists on XMLHTTPRequest2 objects.
  xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
  // Otherwise, check if XDomainRequest.
  // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
  xhr = new XDomainRequest();
  xhr.open(method, url);
   } 
   else {
  // Otherwise, CORS is not supported by the browser.
  xhr = null;
   }
   return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
   throw new Error('CORS not supported');
}

Event handles in CORS

Sr.No.	Event Handler & Description
1	onloadstartStarts the request
2	onprogressLoads the data and send the data
3	onabortAbort the request
4	onerrorrequest has failed
5	onloadrequest load successfully
6	ontimeouttime out has happened before request could complete
7	onloadendWhen the request is complete either successful or failure

Example of onload or onerror event

xhr.onload = function() {
   var responseText = xhr.responseText;
   // process the response.
   console.log(responseText);
};
xhr.onerror = function() {
   console.log('There was an error!');
};

Example of CORS with handler

Below example will show the example of makeCorsRequest() and onload handler

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   if ("withCredentials" in xhr) {
  
  // XHR for Chrome/Firefox/Opera/Safari.
  xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
  
  // XDomainRequest for IE.
  xhr = new XDomainRequest();
  xhr.open(method, url);
   } else {
  
  // CORS not supported.
  xhr = null;
   }
   return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   var xhr = createCORSRequest('GET', url);
   if (!xhr) {
  alert('CORS not supported');
  return;
   }
   
   // Response handlers.
   xhr.onload = function() {
  var text = xhr.responseText;
  var title = getTitle(text);
  alert('Response from CORS request to ' + url + ': ' + title);
   };
   xhr.onerror = function() {
  alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

Web Messaging is the way for documents to separates browsing context to share the data without Dom. It overrides the cross domain communication problem in different domains, protocols or ports.

For example, if we want to send the data from our page to ad container which is placed at iframe or voice-versa, in this scenario, Browser throws a security exception. With web messaging we can pass the data across as a message event.

Message Event

Message events fires Cross-document messaging, channel messaging, server-sent events and web sockets. It is described by Message Event interface.

Properties of Message Event

The following table contains a list of Message Event properties −

S.No.	Property & Description
1	dataContains string data
2	originContains Domain name and port
3	lastEventIdContains unique identifier for the current message event.
4	sourceContains to A reference to the originating documents window
5	portsContains the data which is sent by any message port

Sending a cross-document message

Before send cross document message, we need to create a new web browsing context either by creating new iframe or new window. We can send the data using with postMessage() and it has two arguments. They are as

• message − The message to send
• targetOrigin − Origin name

Examples

Sending message from iframe to button

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');
var clickHandler = function(){
   iframe.contentWindow.postMessage('The message to send.','https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Receiving a cross-document message in the receiving document

var messageEventHandler = function(event){
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com'){
  alert(event.data);
	}
}
window.addEventListener('message', messageEventHandler,false);

Channel messaging

Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.

The MessageChannel and MessagePort Objects

While creating messageChannel, it internally creates two ports to sending the data and forwarded to another browsing context.

• postMessage() − Post the message throw channel
• start() − It sends the data
• close() − it close the ports

In this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.

var loadHandler = function(){
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   portMessageHandler = function(portMsgEvent){
  alert( portMsgEvent.data );
	}
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Above code, it is taking the data from port 2, now it will pass the data to second iframe

var loadHandler = function(){
   var iframes, messageHandler;
   iframes = window.frames;
   messageHandler = function(messageEvent){
  if( messageEvent.ports.length > 0 ){
     // transfer the port to iframe[1]
     iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
  }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Now second document handles the data by using the portMsgHandler function.

var loadHandler(){
   // Define our message handler function
   var messageHandler = function(messageEvent){
  
  // Our form submission handler
  var formHandler = function(){
     var msg = 'add <[email protected]> to game circle.';
     messageEvent.ports[0].postMessage(msg);
  }
  document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Print Page

The indexedDB is a new HTML5 concept to store the data inside user’s browser. It is more powerful than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster.

Why to use indexedDB?

The W3C has announced that the Web SQL database is a deprecated local storage specification so web developer should not use this technology any more. The indexedDB is an alternative for web SQL data base and more effective than older technologies.

Features

• It stores key-pair values
• It is not a relational database
• IndexedDB API is mostly asynchronous
• It is not a structured query language
• It allows to access the data from same domain

IndexedDB

Before enter into an indexedDB, we need to add some prefixes of implementation as shown below −

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Open an IndexedDB database

Before creating a database, we have to prepare some data for the data base.let’s start with company employee details.

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

Adding the data

Here adding some data manually into the data as shown below −

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
  alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
  alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Retrieving Data

We can retrieve the data from the data base using with get()

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
  alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
  if(request.result) {
     alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
  } else {
     alert("Kenny couldn't be found in your database!");
  }
   };
}

Using with get(), we can store the data in object instead of that we can store the data in cursor and we can retrieve the data from cursor

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  
  if (cursor) {
     alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
     cursor.continue();
  } else {
     alert("No more entries!");
  }
   };
}

Removing the data

We can remove the data from IndexedDB with using the remove() method. Here is how the code looks like −

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
  alert("prasad entry has been removed from your database.");
   };
}

HTML Code

To show all the data we need to use onClick event as shown below code −

Open Compiler

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IndexedDb Demo | onlyWebPro.com</title></head><body><button onclick="read()">Read </button><button onclick="readAll()"></button><button onclick="add()"></button><button onclick="remove()">Delete </button></body></html>

The final code should be as −

Open Compiler

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">
  
  //prefixes of implementation that we want to test
  window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  
  //prefixes of window.IDB objects
  window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
  window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
  
  if (!window.indexedDB) {
     window.alert("Your browser doesn't support a stable version of IndexedDB.")
  }
  
  const employeeData = [
     { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
     { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
  ];
  var db;
  var request = window.indexedDB.open("newDatabase", 1);
  
  request.onerror = function(event) {
     console.log("error: ");
  };
  
  request.onsuccess = function(event) {
     db = request.result;
     console.log("success: "+ db);
  };
  
  request.onupgradeneeded = function(event) {
     var db = event.target.result;
     var objectStore = db.createObjectStore("employee", {keyPath: "id"});
     
     for (var i in employeeData) {
        objectStore.add(employeeData[i]);
     }
  }
  function read() {
     var transaction = db.transaction(["employee"]);
     var objectStore = transaction.objectStore("employee");
     var request = objectStore.get("00-03");
     
     request.onerror = function(event) {
        alert("Unable to retrieve daa from database!");
     };
     request.onsuccess = function(event) {
        
        // Do something with the request.result!
        if(request.result) {
           alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
        } else {
           alert("Kenny couldn't be found in your database!");
        }
     };
  }
  
  function readAll() {
     var objectStore = db.transaction("employee").objectStore("employee");
     objectStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        
        if (cursor) {
           alert("Name for id " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
           cursor.continue();
        } else {
           alert("No more entries!");
        }
     };
  }
  
  function add() {
     var request = db.transaction(["employee"], "readwrite")
     .objectStore("employee")
     .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
     
     request.onsuccess = function(event) {
        alert("Kenny has been added to your database.");
     };
     request.onerror = function(event) {
        alert("Unable to add data\r\nKenny is aready exist in your database! ");
     }
  }
  
  function remove() {
     var request = db.transaction(["employee"], "readwrite")
     .objectStore("employee")
     .delete("00-03");
     
     request.onsuccess = function(event) {
        alert("Kenny's entry has been removed from your database.");
     };
  }
   </script></head><body><button onclick="read()">Read </button><button onclick="readAll()">Read all </button><button onclick="add()">Add data </button><button onclick="remove()">Delete data </button></body></html>

Print Page