Trong bài viết này, mình sẽ hướng dẫn cách để truy cập WebCam trên thiết bị, sau đó thực hiện hiển thị hình ảnh lên màn hình trình duyệt sử dụng Javascript. Đây là một cách tương đối đơn giản và dễ thực hiện, mình đã xây dựng một demo nhỏ ở bên dưới, các bạn có thể xem demo để nắm rõ nhé!

Các truy cập WebCam và hiển thị hình ảnh lên trình duyệt

Đây là đoạn code quan trọng nhất, thực hiện chức năng truy cập webcam.

var stopWebCam = function () {
  var stream = video.srcObject;
  var tracks = stream.getTracks();

  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.stop();
  }
  video.srcObject = null;
}

var startWebCam = function () {
  var video = document.getElementById("video"), //Id của thẻ <video> sẽ được dùng để hiển thị hình ảnh
      vendorURL = window.URL || window.webkitURL;

  if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(function (stream) {
      video.srcObject = stream;
    }).catch(function (error) {
      console.log("Something went wrong");
    });
  }
}

$(function () { start(); });

Nút bật và tắt WebCam.

 <a href="#!" class="btn btn-success" onclick="startWebCam()">Start</a>
 <a href="#!" class="btn btn-danger" onclick="stopWebCam()">Stop</a>

Sử dụng thẻ <video> để hiển thị hình ảnh.

<video id="video" height="640" width="100%" autoplay></video>

Xây dựng hoàn thiện demo

Phần giao diện mình sử dụng bootstrap để xây dựng nhanh giao diện.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>WebCam</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row bg-light">
            <div class="col-md-12">
                <video id="video" height="640" width="100%" autoplay></video>
            </div>
        </div>
        <div class="row bg-dark">
            <div class="col-md-12" style="text-align: center;">
                <a href="#!" class="btn btn-success" onclick="startWebCam()">Start</a>
                <a href="#!" class="btn btn-danger" onclick="stopWebCam()">Stop</a>
            </div>
        </div>
    </div>

    <script>
        var stopWebCam = function () {
            var stream = video.srcObject;
            var tracks = stream.getTracks();

            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
            video.srcObject = null;
        }

        var startWebCam = function () {
            var video = document.getElementById("video"),
                vendorURL = window.URL || window.webkitURL;

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                    }).catch(function (error) {
                        console.log("Something went wrong");
                    });
            }
        }
        $(function () { start(); });
    </script>
</body>
</html>

Lời kết

Cảm ơn các bạn đã xem bài viết này và hẹn gặp lại trong các bài viết tiếp theo. Nếu các bạn có vấn đề cần được giải đáp, hãy để lại bình luận cho mình nhé!

Được phân loại:

Lập trình

Được gắn thẻ:

, , , , ,