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 cho phép bạn chọn thiết bị đầu vào và đầu ra, bao gồm cả 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 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.
  • Để trò chuyện video, hãy chọn micrô hoặc máy ảnh bên trong hoặc bên ngoài.

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

MediaDevices có hai phương thức, cả hai đề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 Lời hứa cấp quyền truy cập vào một mảng các đối tượng MediaDeviceInfo cho các thiết bị có sẵn.

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à bao gồm các thiết bị đầu ra âm thanh. Bạn có thể thử tính năng này với các bản minh hoạ bên dưới.

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ị có sẵn bằng enumerateDevices(), bạn có thể sử dụng setSinkId() (được xác định trong Audio Output Devices API (API Thiết bị đầu ra âm thanh)) để 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 thiết lập thiết bị đầu ra cho âm thanh từ phần tử. Sau khi gọi setSinkId(), bạn có thể lấy mã nhận dạng của 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, sẽ trả về một Lời hứa cấp quyền truy cập vào MediaStream. Nhà phát triển nên sử dụng MediaDevices.getUserMedia(), nhưng không có kế hoạch xoá navigator.getUserMedia(): thuộc tính này vẫn là một phần của thông số kỹ thuật.

Có một bản minh hoạ tại trang web mẫu WebRTC.

Dưới đây là một đoạn mã trong 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) {
    // ...
    }

Bỏ qua cờ

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

--enable-blink-features=GetUserMedia

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

--enable-blink-features=AudioOutputDevices

Xem thêm thông tin chi tiết về tính năng hỗ trợ trình duyệt ở bên dưới.

Tương lai

Trình xử lý sự kiện ondevicechange được đề xuất thực hiện đúng như nội dung mô tả: sự kiện devicechange được kích hoạt khi nhóm thiết bị có sẵn thay đổi và trong 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 trong bất kỳ trình duyệt nào.

Bản nháp tính năng Chụp màn hình là một tiện ích mở rộng cho API Quay video, đề xuất phương thức MediaDevices.getDisplayMedia() cho phép sử dụng các vùng trên màn hình của người 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(). Tiện ích này 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