Webcam sử dụng JavaScript

Trong bài đăng này, tôi sẽ trình bày một đoạn đơn giản về cách truy cập webcam trong trình duyệt của bạn bằng giao diện MediaDevices javascript và hàm getUserMedia()

Những người cố gắng truy cập webcam gần đây có xu hướng cài đặt plugin flash của bên thứ ba để thêm hỗ trợ webcam trong trình duyệt nhưng như chúng tôi biết rằng plugin flash dường như không cung cấp giải pháp hiệu quả về cách tùy chỉnh mọi thứ bằng mã. May mắn thay cho mục đích này, một Api mới được thêm vào Javascript để cho phép các nhà phát triển truy cập các thiết bị đa phương tiện, đó là giao diện MediaDevices

Giao diện MediaDevices kết hợp một số phương pháp và apis để xử lý các thiết bị đa phương tiện dễ dàng hơn, chẳng hạn như webcam, chẳng hạn như bạn có thể chụp ảnh, quay video, phát hiện khi thiết bị được gắn hoặc tách ra, nhận danh sách các thiết bị đa phương tiện được đính kèm, v.v.

Lấy danh sách các thiết bị media

Trong ví dụ này, chúng tôi sử dụng mediaDevices. enumerateDevices() để lấy danh sách các thiết bị đa phương tiện. Hàm này trả về một lời hứa cần được giải quyết hoặc từ chối

// check for mediaDevices.enumerateDevices() support
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

Khi chạy tập lệnh này, tôi cho rằng trình duyệt của bạn hỗ trợ hàm enumerateDevices(), nó sẽ hiển thị một số đầu ra như thế này

Đầu ra kết quả hiển thị danh sách các thiết bị đầu vào và đầu ra với mỗi thiết bị có deviceId, groupId, loại cho dù đây là thiết bị âm thanh hay video và nhãn. Trong trường hợp của tôi, có một đầu vào video là máy ảnh máy tính xách tay của tôi

Không, chúng tôi có máy ảnh, hãy thử truy cập máy ảnh đó bằng javascript và chụp vài bức ảnh. Đối với điều này, chúng tôi sẽ sử dụng một chức năng khác trong giao diện MediaDevices, đó là getUserMedia()

getUserMedia()

Hàm getUserMedia() yêu cầu quyền của người dùng để bật hoặc tắt thiết bị đa phương tiện để sẵn sàng sử dụng, ví dụ: cho phép hoặc không cho phép máy ảnh. Hàm trả về một lời hứa và sau khi người dùng cấp quyền, chức năng Promise then() sẽ được kích hoạt và thiết bị được bật. Ngược lại, nếu người dùng không cho phép yêu cầu thì chức năng Promise catch() sẽ được kích hoạt và thiết bị bị tắt

Hàm này cũng nhận một tham số mà một đối tượng đại diện cho một ràng buộc sẽ áp dụng. Ví dụ: chúng tôi có thể yêu cầu ảnh đã chụp có chiều rộng và chiều cao cụ thể để đối tượng ràng buộc sẽ là {chiều rộng. giá trị, chiều cao. giá trị}. Có rất nhiều ràng buộc để áp dụng, bạn có thể tìm thấy chúng trên trang web của nhà phát triển mozilla

Truy cập ví dụ về webcam

In this example we will use an html

     
         
         
         
     
     
	   Start camera
           

           

            
     

Khi chạy tập lệnh và nhấp vào nút, trình duyệt sẽ yêu cầu sự cho phép của bạn nếu bạn nhấp vào cho phép, máy ảnh sẽ bật và luồng sẽ hiển thị trong phần tử video. Vì vậy, hãy giải thích mã từng bước

Trước tiên, tôi đã thêm phần tử video html để hiển thị luồng đến từ thiết bị đa phương tiện (máy ảnh). Sau đó, trong javascript tôi đã kiểm tra hoa tiêu. thiết bị truyền thông. getUserMedia(), vì vậy chúng ta có thể tiến hành bước tiếp theo là giải quyết Promise được trả về bởi hàm getUserMedia(). Lời hứa được trả lại đã được giải quyết thành một đối tượng MediaStream mà chúng ta có thể sử dụng để hiển thị trong phần tử video như tôi đã làm ở đây

var video = document.querySelector('video');
    if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    // Avoid using this in new browsers, as it is going away.
    video.src = window.URL.createObjectURL(stream);
  }

Some browsers support the srcObject attribute in

Tham số mà tôi đã truyền cho hàm getUserMedia() được gọi là đối tượng ràng buộc và đối tượng này xác định kết quả đầu ra nên trong tập lệnh tôi đã thêm ràng buộc này {audio. đúng, video. true}, ràng buộc này yêu cầu thiết bị đa phương tiện tìm nạp âm thanh và video, bây giờ hãy thử tạo âm thanh. sai, bạn sẽ không nghe thấy gì

Bạn có thể truy xuất các ràng buộc useragent được hỗ trợ bằng mediaDevices. getSupportedConstraints() chức năng như trong đoạn mã này

let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

console.log(supportedConstraints);


// output
autoGainControl: true
​
browserWindow: true
​
channelCount: true
​
deviceId: true
​
echoCancellation: true
​
facingMode: true
​
frameRate: true
​
height: true
​
mediaSource: true
​
noiseSuppression: true
​
scrollWithPage: true
​
viewportHeight: true
​
viewportOffsetX: true
​
viewportOffsetY: true
​
viewportWidth: true
​
width: true

Điện thoại di động camera trước và sau

Đối với điện thoại di động, có một ràng buộc đặc biệt để sử dụng là facesMode và có thể nhận một trong các giá trị này "người dùng" hoặc "môi trường". “user” là camera trước và “environment” là camera sau

var constraints = { video: { facingMode: "user" } };

Lưu ý rằng để làm cho đoạn mã trên hoạt động trên điện thoại di động, bạn phải tải nó lên một máy chủ từ xa có hỗ trợ giao thức “https”