Cara mengakses kamera webcam dari web dengan javascript / jquery

September 07, 2017 , 0 Comments

Selamat malam kali ini admin akan memposting cara mengakses webcam sendiri di browser dengan javascript. disini saya menggunakan node.js, socket.io dan jquery

Pertama-tama buat file package.json dengan isi seperti berikut:
{
        "name" : "Wcam-Live",
        "version" : "0.0.1",
        "dependencies" : {
        "socket.io" : "*",
        "express" : "*",
        "log" : "*"
        }
}

kemudian ketikan perintah npm install di command promt

selanjutnya buat file app.js dengan isi seperti dibawah:
var express = require("express");

var app = new express();

var http = require("http").Server(app);

var io = require("socket.io")(http);



    var Log = require('log'),

    log = new Log('debug')



    var port = process.env.PORT || 3000;



    app.use(express.static(__dirname + "/public"));



    app.get('/',function(req,res){

    res.redirect('index.html');

    });



    io.on('connection',function(socket){

    socket.on('stream',function(image){

    socket.broadcast.emit('stream',image);

    });

    });



    http.listen(port,function(){

    log.info('server di jalankan pada port %s',port);

    });

kemudian test di browser dengan dengan perintah node app.js

selanjunya buat folder dengan nama public, didalam folder public buat tiga file index.html, emitir.html dan visualizar.html
untuk isi index.html masukan kode dibawah:
<!DOCTYPE html>

<html>

<head>

<title>Webcam-Live</title>

</head>

<body>

<p><a href="emitir.html">Emitir Video</a></p>



<p><a href="visualizar.html">Visualizar web</a></p>

</body>

</html>

kemudian untuk isi emitir.html masukan kode berikut :
<!DOCTYPE html>

<html>

<head>

<title>Emitir Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<video src="" id="video" style="width: 680px;height:320px;" autoplay="true"></video>

<iframe src="visualizar.html" height="400px" width="40%" style="overflow-x: hidden;overflow-y: hidden;"></iframe>



<canvas style="display: none" id="preview"></canvas>

<div id="logger"></div>



<script type="text/javascript">

        var canvas = document.getElementById('preview');

        var context = canvas.getContext("2d");



        canvas.width = 800;

        canvas.height = 600;



        context.width = canvas.width;

        context.height = canvas.height;



        var video = document.getElementById("video");



        var socket = io();



        function logger(msg)

        {

        $("#logger").text(msg);

        }



        function loadCam(stream)

        {

        video.src = window.URL.createObjectURL(stream);

        logger('Camera connected [OK]');

        }



        function loadFail()

        {

        logger('Error! Camera not connected');

        }



        function viewVideo()

        {

        context.drawImage(video,0,0,context.width,context.height);

        socket.emit('stream',canvas.toDataURL('image/webp'));

        }



        $(function(){

        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){

        navigator.getUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.webkitGetUserMedia){

        navigator.webkitGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.mozGetUserMedia){

        navigator.mozGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.msgGetUserMedia){

        navigator.msgGetUserMedia({video: true},loadCam,loadFail);

        }



        setInterval(function(){

        viewVideo(video,context);

        }, 70);

        });

</script>

</body>

</html>

dan untuk isi visualizar.html masukan kode berikut:
<!DOCTYPE html>

<html>

<head>

<title>Visualizar Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<img id="play" width="100%">

<div id="logger"></div>



<script type="text/javascript">

        var socket = io();

        socket.on('stream', function(image){

        var img = document.getElementById("play");

        img.src = image;

        $("#logger").text(image);

        });

</script>

</body>

</html>


selanjutnya jalankan aplikasi anda dengan perintah node app.js, akan ada tulisan server dijalankan pada port 3000. selanjunya buka localhost:3000 jika webcam nya tampil di browser seperti pada gambar di bawah berarti anda telah berhasil,


 selanjunya kode ini bisa anda kembangkan untuk membuat aplikasi video call / confrence call. sekian tutorial kali ini semoga bermanfaat, jika artikel ini berguna silakan share ke teman anda, jika ada yang error bisa di tanyakan pada komentar dibawah

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar :

Langganan: Posting Komentar ( Atom )