Cách sử dụng getUserMedia ()

CácMediaDevicesđối tượng tiếp xúc bởinavigator.mediaDevicescho chúng tôigetUserMediaphương pháp.

Cảnh báo:navigatorđối tượng phơi bày mộtgetUserMedia()phương pháp này vẫn có thể hoạt động nhưngkhông dùng nữa. API đã được chuyển vào bên trongmediaDevicesđối tượng cho các mục đích nhất quán.

Đây là cách chúng ta có thể sử dụng phương pháp này.

Giả sử chúng tôi có một nút:

<button>Start streaming</button>

Chúng tôi đợi cho đến khi người dùng nhấp vào nút này và chúng tôi gọinavigator.mediaDevices.getUserMedia()phương pháp.

Chúng tôi truyền một đối tượng mô tả các ràng buộc phương tiện mà chúng tôi muốn. Nếu chúng tôi muốn có đầu vào video, chúng tôi sẽ gọi

navigator.mediaDevices.getUserMedia({
  video: true
})

Chúng tôi có thể rất cụ thể với những ràng buộc đó:

navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 60,
    width: 640,
    heigth: 480
  }
})

Bạn có thể nhận danh sách tất cả các ràng buộc được thiết bị hỗ trợ bằng cách gọinavigator.mediaDevices.getSupportedConstraints().

Nếu chúng tôi chỉ muốn âm thanh, chúng tôi có thể vượt quaaudio: true:

navigator.mediaDevices.getUserMedia({
  audio: true
})

và nếu chúng ta muốn cả hai:

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})

Phương thức này trả về một lời hứa, vì vậy chúng tôi sẽ sử dụng async / await để nhận được kết quả trong mộtstreamBiến đổi:

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
})

Nhấp vào nút sẽ kích hoạt một bảng điều khiển trong trình duyệt để cho phép quyền sử dụng các thiết bị phương tiện:

Xem trên Codepen:https://codepen.io/flaviocopes/pen/WWyGmr

Sau khi chúng tôi hoàn thành,streamđối tượng mà chúng tôi nhận được từgetUserMedia()bây giờ có thể được sử dụng cho nhiều thứ khác nhau. Ngay lập tức là hiển thị luồng video trongvideophần tử trong trang:

<button>Start streaming</button> <video autoplay>Start streaming</video>

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video').srcObject = stream
})

Xem trên Codepen:https://codepen.io/flaviocopes/pen/wZXzbB

Một ví dụ

Đây là một ví dụ Codepen yêu cầu bạn truy cập máy quay video và phát video trong trang:

Xem bútVí dụ đơn giản về WebRTC MediaStreambởi Flavio Copes (@flaviocopes) trênCodePen.