Chọn máy ảnh, micrô và loa từ ứng dụng web của bạn

Sam Dutton

Các trình duyệt hiện đại giúp bạn có thể chọn các thiết bị đầu vào và đầu ra bao gồm máy ảnh, micrô và loa.

Ví dụ:

  • Trên điện thoại, hãy chọn máy ảnh trước hoặc mặt sau.
  • Trên máy tính xách tay, hãy chọn loa trong hoặc loa được kết nối qua Bluetooth.
  • Đối với cuộc trò chuyện video, hãy chọn micrô hoặc máy ảnh nội bộ hoặc bên ngoài.

Tất cả chức năng này đều được hiển thị bởi đối tượng MediaDevices. Đối tượng này do navigator.mediaDevices trả về.

MediaDevices có hai phương thức, cả hai phương thức đều được triển khai trong Chrome 47 trên máy tính và Android: enumerateDevices() và getUserMedia().

Chọn thiết bị đầu ra âm thanh.

enumerateDevices()

Trả về một Promise cấp quyền truy cập vào một mảng gồm các đối tượng MediaDeviceInfo cho các thiết bị hiện có.

Phương thức này tương tự như MediaStreamTrack.getSources(), nhưng không giống như phương thức đó (chỉ được triển khai trong Chrome), phương thức này tuân thủ các tiêu chuẩn và có chứa các thiết bị đầu ra âm thanh. Bạn có thể thử điều này qua bản minh hoạ dưới đây.

Dưới đây là một số mã được đơn giản hoá một chút từ một trong các bản minh hoạ:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

Sau khi truy xuất mã nhận dạng của các thiết bị hiện có bằng enumerateDevices(), bạn có thể sử dụng setSinkId() (được định nghĩa trong Audio Output Devices API) để thay đổi đích đầu ra âm thanh cho một phần tử video hoặc âm thanh:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

Phương thức này sẽ đặt thiết bị đầu ra cho âm thanh của phần tử. Sau khi setSinkId() được gọi, bạn có thể lấy mã nhận dạng thiết bị âm thanh đầu ra hiện tại cho phần tử có thuộc tính sinkId.

getUserMedia()

Thao tác này sẽ thay thế navigator.getUserMedia(), nhưng thay vì sử dụng lệnh gọi lại, hãy trả về một Promise cấp quyền truy cập vào MediaStream. Các nhà phát triển nên sử dụng MediaDevices.getUserMedia(), nhưng không có kế hoạch xoá navigator.getUserMedia(): tài nguyên này vẫn có trong quy cách.

Bạn có thể xem bản minh hoạ tại trang web mẫu WebP.

Dưới đây là một đoạn mã từ bản minh hoạ:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

Cờ từ bỏ

Phương thức enumerateDevices() "không gắn cờ" trong Chrome, còn đối với MediaDevices.getUserMedia(), bạn vẫn cần bật các tính năng Nền tảng web thử nghiệm trong chrome://flags hoặc sử dụng cờ dòng lệnh sau:

--enable-blink-features=GetUserMedia

Tương tự đối với setSinkId(): hãy bật các tính năng của Nền tảng web thử nghiệm hoặc sử dụng cờ:

--enable-blink-features=AudioOutputDevices

Dưới đây là thông tin chi tiết khác về tính năng hỗ trợ trình duyệt.

Tương lai

Trình xử lý sự kiện ondevicechange đề xuất có chức năng như sau: sự kiện devicechange được kích hoạt khi tập hợp các thiết bị có sẵn thay đổi. Đồng thời, trong một trình xử lý, bạn có thể gọi enumerateDevices() để lấy danh sách thiết bị mới. Tính năng này chưa được triển khai trên bất kỳ trình duyệt nào.

Bản nháp Chụp ảnh màn hình là một tiện ích cho API Media Capture (Ghi lại nội dung nghe nhìn), API này đề xuất phương thức MediaDevices.getDisplayMedia() cho phép các khu vực màn hình của người dùng được dùng làm nguồn của luồng nội dung nghe nhìn. Ngoài ra, còn có đề xuất tiện ích MediaDevices cho getSupportedConstraints(), cung cấp thông tin về những quy tắc ràng buộc có thể được sử dụng cho lệnh gọi getUserMedia(): các tính năng âm thanh và video mà trình duyệt hỗ trợ.

Bản thu thử

Tìm hiểu thêm