MediaDevices

Thuộc tính instance

Kế thừa các thuộc tính từ giao diện cha, EventTarget.

Phương thức instance

Kế thừa các phương thức từ giao diện cha, EventTarget.

enumerateDevices()

Lấy một mảng thông tin về các thiết bị đầu vào và đầu ra phương tiện có sẵn trên hệ thống.

getSupportedConstraints()

Trả về một đối tượng phù hợp với MediaTrackSupportedConstraints, cho biết những thuộc tính có thể ràng buộc nào được hỗ trợ trên giao diện MediaStreamTrack. Xem Media Streams API để tìm hiểu thêm về các ràng buộc và cách sử dụng chúng.

getDisplayMedia()

Nhắc người dùng chọn một màn hình hoặc một phần của màn hình (chẳng hạn như một cửa sổ) để thu lại dưới dạng MediaStream cho mục đích chia sẻ hoặc ghi hình. Trả về một promise được resolve thành MediaStream.

getUserMedia()

Với sự cho phép của người dùng thông qua hộp thoại nhắc, bật camera và/hoặc microphone trên hệ thống và cung cấp một MediaStream chứa track video và/hoặc audio với nguồn đầu vào.

selectAudioOutput() Experimental

Nhắc người dùng chọn một thiết bị đầu ra âm thanh cụ thể.

Sự kiện

devicechange

Được kích hoạt khi một thiết bị đầu vào hoặc đầu ra phương tiện được gắn vào hoặc tháo ra khỏi máy tính của người dùng.

Ví dụ

// Đặt các biến trong phạm vi toàn cục để chúng có thể dùng trong console của trình duyệt.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Media Capture and Streams API: API mà giao diện này là một phần của nó.
• Screen Capture API: API định nghĩa phương thức getDisplayMedia().
• WebRTC API
• Navigator.mediaDevices: Trả về một tham chiếu đến đối tượng MediaDevices có thể dùng để truy cập thiết bị.
• CameraCaptureJS: Quay và phát lại video HTML bằng MediaDevices và MediaStream Recording API
• OpenLang: Ứng dụng web phòng học ngôn ngữ video HTML dùng MediaDevices và MediaStream Recording API để ghi video