WebRTC – one simple first example webcam – part 002.

As you know already the WebRTC allow us 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.
You also need to put tunneling WebRTC over TCP because that tunneling it matters.
But today I will show you just a simple first example about webcam and WebRTC.
The HTML5 file is very simple:

You need to have a video tag with id for identification tag named “player”. You can put anything you like into areas of id’s, but that will reflect the part of javascript.
The autoplay segment code will start the running part of video tag.
You see the HTML file come with two references to files: webcam.css and webcam.js.
The webcam.css will allow you to add a more stylized part of HTML file and that will reflect the output.
The webcam.js will allow you to make WebRTC communications over internet…
Let’s start with css file:

The body and player parts are used to make changes into HTML output.
The body is a default for HTML tag body and for id’s is used # and the named id’s.
For example: If you named your tags like word, next, pass, all the id’s will be #word, #next, #pass, #all.
Anyway. this allow you just stylized your HTML output.
To have a real communication then you need javascript.
This javascript can be part of HTML files into two ways.
First is to put into HTML5 and that has some limits.
The next step is to use another javascript that is loaded by HTML file.
My example uses the best HTML format HTML5 encoding.
You can see into my example the HTML load the webcam.js script into area of head tag.
Let’s see the javascript file:

I create an object named mediaOptions. The objects can be also created like that format: var car = new Object();
I used achieved with: var mediaOptions = { audio: false, video: true };
This variable object will can be started or not.
This is part of two if statements and will return the getUserMedia function.
The next step is to give all infos and data to make all running:
navigator.getUserMedia(mediaOptions, success, function(e) {
console.log(e);
});

function success(stream){
var video = document.querySelector(“#player”);
video.src = window.URL.createObjectURL(stream);
}

The MediaStream object that contains the media stream is allow by success and the callback of getUserMedia.
That function – success put into video tag the output of your webcam.
Your browser allow you to see the webcam by running this: HTML5, javascript and css.
If you read my old webrtc-first-steps-part-001 example you will see is more complex.
The main reason was to see the global area and then to understand how simple is to write code.
Most part of my previous tutorial are also very important parts.
That will increase the strength into areas. This source code is also good, but not great.
To have a good secure then you need to use more … (like tunneling).

admin

born 1976

Posted in All, HTML 5, javascript, web, WebRTC. Tagged with , , , , , .