Cara Mengakses Webcam dari HTML
80 / 100

How to Access Webcam from HTML

How to Access Webcam from HTML. Usually on certain websites we need a webcam to take pictures, for example on a web that has features Video Call like Facebook.

if first, this is possible with the help Plug-in as Flash and Silverlight.

However, now HTML5 has provided an API that we can use to access webcams directly native.

On this occasion, we will learn how to access Webcam to display in web pages and take pictures.

Example Webcam in HTML

Here is an example of the final result we will make.

If it doesn't appear, make sure you allow this page to access the webcam.

Izin Webcam di Google Chrome:

Izin akses Webcam di Google Chrome

Izin Webcam di Google Chrome Android:

Izin akses Webcam di Google Chrome Android

Izin Opera webcam:

Izin akses Webcam di Google Chrome

How It Works?

First we need user permission, does he want to give webcam access or not.

The method or method used to request user permission is getUserMedia. This method is not only for accessing the webcam, we can also access other media such as microphone.

After the user gives permission, next we just render the image from the webcam to the element <video>.

Element <video> is a new element added to HTML 5 to show videos.

For more details, let's try it in code...

Displaying Webcam Video in HTML

First please create an HTML file.

<div>
    <video autoplay="true" id="video-webcam">
        Browsermu tidak mendukung bro, upgrade donk!
    </video>
</div>

In the HTML file above, we assign attributes autoplay="true" so that the video plays automatically and id="video-webcam" for easy selection of elements in Javascript.

After that, please make the Javascript code:

<script type="text/javascript">
    // seleksi elemen video
    var video = document.querySelector("#video-webcam");

    // minta izin user
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    // jika user memberikan izin
    if (navigator.getUserMedia) {
        // jalankan fungsi handleVideo, dan videoError jika izin ditolak
        navigator.getUserMedia({ video: true }, handleVideo, videoError);
    }

    // fungsi ini akan dieksekusi jika  izin telah diberikan
    function handleVideo(stream) {
        video.srcObject = stream;
    }

    // fungsi ini akan dieksekusi kalau user menolak izin
    function videoError(e) {
        // do something
        alert("Izinkan menggunakan webcam untuk demo!")
    }
</script>

(Please check the complete code at Gist

)

Please save in the directory htdocs or /var/www/html, then open via address http://localhost/namafile.html.

Why should it be kept there?

Because if it is not stored on the web server, the video won't render.

Taking Pictures from Webcam

We just created HTML and Javascript code to display video from webcam.

Then…

How about we want to take a picture?

Easy.

We just create a button and when the button is clicked, we execute the function to take the image.

Here is the function code to take a picture:

function takeSnapshot() {
    // buat elemen img
    var img = document.createElement('img');
    var context;

    // ambil ukuran video
    var width = video.offsetWidth
            , height = video.offsetHeight;

    // buat elemen canvas
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // ambil gambar dari video dan masukan 
    // ke dalam canvas
    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    // render hasil dari canvas ke elemen img
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
}

The function above will create an element <img> to accommodate images Snapshot of Video elements.

We take advantage of Canvas to take the picture.

After that, just display it into the element <img>.

Next, please create a button to execute the function.

<button onclick="takeSnapshot()">Ambil Gambar</button>

Finished, Please try.

To save the image, just right click then select save image as…

Simpan Gambar dari Web

source : https://www.petanikode.com/html-webcam/

 1,377 total views,  4 views today

By admin

Writer

Leave a Reply

Your email address will not be published.

Web Hosting Murah Yang Terbaik Di Indonesia