Html 5: Kết nối với Webcam

Trước đây, nếu các bạn muốn kết nối với webcam bằng trình duyệt, bạn phải cài plugin là flash hoặc silverlight…. Nhưng với công nghệ Html5, mọi thứ đã thay đổi.

Trình duyệt hỗ trợ

Google Chrome từ bản 21 trở lên.
Opera từ bản 12 trở lên.

Html5

Với navigator.getUserMedia(), chúng ta có thể kết nối với Webcam và Microphone mà không cần plugin
Cú pháp:

navigator.getUserMedia({audio: true, video: true}, success, error);

 function success(stream) {
  // ... use 'stream' ...
  }
 
  function error(){
  //display fallback content
  }

Kiểm tra sự hỗ trợ của trình duyệt

    function hasGetUserMedia() {
        // Note: Opera builds are unprefixed.
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

Lưu ý: Khi bạn từ chối cho phép chương trình truy cập thiết bị, thì nó sẽ ghi nhớ cho các lần sau. Để khắc phục, bạn hãy xóa cache của trình duyệt.

Sử dụng

Để sử dụng thiết bị webcam hoặc microphone, chúng ta cần cấp quyền truy cập. Tham số đầu tiên của hàm getUserMedia() là 1 đối tượng chỉ ra loại thiết bị media mà bạn muốn truy cập.
Ví dụ:

Truy cập webcam: {video: true}
Truy cập microphone và webcam: {video: true, audio: true}

Tham số thứ hai: success callback-được thực hiện sau khi người dùng cho phép ứng dụng truy cập thiết bị Tham số thứ ba (tùy chọn): failure callback- được thực hiện khi chương trình bị lỗi.
Toàn bộ code chương trình:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
</head>

<body>
    <div style="margin-left: 100px;">
    <div>
        <video id="sourcevid" autoplay width="480" height="360">
            Sorry, you're browser doesn't support video. Please try 
            <a href="http://snapshot.opera.com/labs/camera/">Opera</a>.
        </video>
    </div>
    <div style="margin-left: 170px;">
        <input type="button" value="Start" onclick="start()" class="button" >
        <input type="button" value="Stop" onclick="stop()" class="button" >
    </div>
</div>
<script type="text/javascript">

    function hasGetUserMedia() {
        // Note: Opera builds are unprefixed.
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    function onFailSoHard(){

    }
    
    function start() {
        if (hasGetUserMedia()) {
            if (navigator.webkitGetUserMedia)
                navigator.getUserMedia = navigator.webkitGetUserMedia;
            //var getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

            var video = document.querySelector('video');
            //var gumOptions = { video: true, toString: function () { return 'video'; } };    
            if (navigator.getUserMedia) {
                navigator.getUserMedia({ video: true, audio: true }, function (stream) {
                    debugger;
                    if (navigator.webkitGetUserMedia) {
                        video.src = window.webkitURL.createObjectURL(stream);
                    } else {
                        video.src = stream; // Opera
                    }
                }, onFailSoHard);
            } else {
                video.src = 'somevideo.webm'; // fallback.
            }
        }
    }

    function stop() {
        video = document.getElementById('sourcevid');
        video.src = "";
    }

    $(document).ready(function () {
        $('.button').button();
    });
</script>
</body>
</html>

Xem demo: http://jsfiddle.net/anbinhtrong/kMrLs/embedded/result/

Nhật ký học tập

Tìm kiếm Blog này