The official website tells us:
WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
First I will come with one simple example into this tutorial.
Will make one webcam into a webpage.
Make one index.html file and add this source code:
<!DOCTYPE html>
<html>
<head>
<title>WebCam – Realtime communication with WebRTC</title>
<link rel=”stylesheet” href=”css/main.css” />
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<video autoplay></video>
<script src=”main.js”></script>
</body>
</html>
Now make in the same folder one javascript with the name main.js . Add this source code:
‘use strict’;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = {
audio: false,
video: true
};
var video = document.querySelector(‘video’);
function successCallback(stream) {
window.stream = stream; // stream available to console
if (window.URL) {
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
}
function errorCallback(error) {
console.log(‘navigator.getUserMedia error: ‘, error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
The source code is simple:
'use strict'; is used to avoid common coding gotchas;
navigator. is interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities;
getUserMedia() for compatibility with current browsers;
webkitGetUserMedia – detecting is a simple check for the existence of navigator features;
errorCallback – return error.
Open the index.html file into your browser to run it.