This entry is part 3 of 5 in the series #1 WebRTC Code Labs

Mục đích của bài này là viết một chương trình truy cập webcam để lấy video và hiện thị lên trang Web. Nội dung thực hành của bài lab này gồm các nội dung sau:

  • 1. Tạo một trang HTML5
  • 2. Xem trang từ localhost
  • 3. Chèn một thẻ video vào trang web
  • 4. Viết mã JavaScript gọi WebRTC API thứ 1: getUserMedia
  • 5. Gợi ý tự khám phá

1. Tạo một trang HTML5

Để bắt đầu hãy tạo ra một tài liệu HTML5 tại thư mục /home/codelab/webrtc/ và đặt tên cho file này là wcl-step01.html. Và nhập vào nội dung sau đây:

<!DOCTYPE html>
<html>

<head>

<meta name="keywords" content="JavaScript, WebRTC" />
<meta name="description" content="WebRTC codelab" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">

<title>WebRTC codelab: Step 1</title>

<!-- When we finish the codelab we'll move CSS and JavaScript to separate files -->

<!-- CSS will go here -->

<style>
</style>


</head>

<body>

<!-- HTML will go here -->

<h1>Hello WebRTC</h1>

<!-- JavaScript will go here -->
<script>
</script>

</body>

</html>

2. Xem trang từ localhost

Mở Terminal và di chuyển đến thư mục làm việc:

cd /home/codelab/webrtc

Trên Windows bạn có thể dùng lệnh: cd /d D:\codelab\webrtc

Khởi động một máy chủ web tại thư mục này, và mở trên cổng 8000

here --port 8000
Listening on port 8000 serving files from ./

Chú ý: here đã được cài đặt từ bài trước !

Bây giờ hãy truy cập web vào link: http://localhost:8000/wcl-step01.html và bạn sẽ nhìn thấy 1 thông điệp: Hello WebRTC.

Như vậy là máy chủ web here đang hoạt động. Bạn cứ để nguyên đấy, bước tiếp theo chúng ta sẽ mở lại Notepad++ và viết các đoạn mã HTML5 + JavaScript.

3. Sử dụng WebRTC API: getUserMedia()

3.1. Chèn một thẻ video vào trang web

Hãy thêm 1 đoạn mã HTML5 sau vào trang web wcl-step01.html của bạn, nhớ là để trong thẻ body:

<video id="FIGURE_IT_OUT"></video>

3.2. Chèn đoạn mã gọi WebRTC API sau đây vào trong thẻ script

          navigator.getUserMedia = navigator.getUserMedia ||
          navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        var constraints = {video: true};

        function successCallback(localMediaStream) {
          window.stream = localMediaStream; // stream available to console
          var video = document.querySelector("video");
          video.src = window.URL.createObjectURL(localMediaStream);
          video.play();
        }

        function errorCallback(error){
          console.log("navigator.getUserMedia error: ", error);
        }

        navigator.getUserMedia(constraints, successCallback, errorCallback);

3.3. Trở lại trình duyệt Chrome, nhấn F5 refresh lại trang web

Khi bạn F5 thì trình duyệt sẽ hỏi bạn có cho phép trang web truy cập Camera của bạn hay ko ? Thì hãy đồng ý, bạn sẽ nhìn thấy hình ảnh của mình trên trang web như sau đây:

webrtc-codelab

3.4 Giải thích getUserMedia()

API 'getUserMedia' được gọi như thế này:

navigator.getUserMedia(constraints, successCallback, errorCallback);

Các tham số ràng buộc truyền vào để yêu cầu những thứ chúng ta cần truy cập, cụ thể ở đây ta chỉ yêu cầu lấy Video từ webcam mà thôi:

var constraints = {video: true};

Nếu truy cập webcam thành công, video stream truy xuất từ webcam sẽ được gắn vào thẻ video mà bạn đã chèn vào trang HTML5, bằng hàm successCallback

function successCallback(localMediaStream) {
      window.stream = localMediaStream; // stream available to console
      var video = document.querySelector("video");
      video.src = window.URL.createObjectURL(localMediaStream);
      video.play();
}

4. Gợi ý tự khám phá

Giờ là lúc bạn phải tự khám phá thêm từ Chrome DevTools. Để bật console của Chrome DevTools bạn hãy ấn tổ hợp phím Ctrl + Shift + I và chọn tab Console

  1. Gõ vào console tên biến stream và nhấn enter. Bạn thấy gì ?
  2. Hàm stream.getVideoTracks() trả về những thông tin gì ?
  3. Vẫn trên console: Thử gọi hàm stream.stop() 😀
  4. Kích thước mặc định của thẻ video là bao nhiêu ? Dùng hàm JavaScript nào để lấy được thông tin size của thẻ video ?
  5. Thay đổi biến ràng buộc var constraints = {video: true, audio: true}; ?
  6. Thay đổi các ràng buộc khác theo ví dụ mẫu tại trang simpl.info/getusermedia/constraints/

Và cuối cùng, hãy thêm đoạn mã CSS sau đây vào trong thẻ style: Để xem hiệu ứng bạn thấy là gì ?

 video {
      filter: hue-rotate(180deg) saturate(200%);
      -moz-filter: hue-rotate(180deg) saturate(200%);
      -webkit-filter: hue-rotate(180deg) saturate(200%);
    }

Rất vui nếu bạn có thể comment các kết quả bạn làm được tại đây ?

5. Các liên kết tham khảo

About The Author