เลือกกล้อง ไมโครโฟน และลำโพงจากเว็บแอป

Sam Dutton

เบราว์เซอร์ที่ทันสมัยช่วยให้สามารถเลือกอุปกรณ์อินพุตและเอาต์พุต ซึ่งรวมถึงกล้อง ไมโครโฟน และลำโพง

เช่น

  • ในโทรศัพท์ ให้เลือกกล้องหน้าหรือกล้องหลัง
  • ในแล็ปท็อป ให้เลือกลำโพงภายในหรือลำโพงที่เชื่อมต่อด้วยบลูทูธ
  • สำหรับวิดีโอแชท ให้เลือกไมโครโฟนหรือกล้องภายในหรือภายนอก

ออบเจ็กต์ Mediadevices แสดงฟังก์ชันการทำงานนี้ทั้งหมด ซึ่งแสดงผลโดย navigator.mediaDevices

MediaDevice มี 2 วิธี ซึ่งใช้ทั้งใน Chrome 47 ในเดสก์ท็อปและ Android คือ enumerateDevices() และ getUserMedia()

เลือกอุปกรณ์เอาต์พุตเสียง

enumerateDevices()

แสดงผล Promise ที่ให้สิทธิ์เข้าถึงอาร์เรย์ของออบเจ็กต์ MediaDeviceInfo สำหรับอุปกรณ์ที่พร้อมใช้งาน

วิธีการนี้คล้ายกับ MediaStreamTrack.getSources() แต่ต่างจากวิธีการดังกล่าว (ซึ่งเคยใช้ใน Chrome เท่านั้น) คือเป็นไปตามมาตรฐานและรวมถึงอุปกรณ์เอาต์พุตเสียง คุณทดลองใช้ได้ในรูปแบบการสาธิตด้านล่าง

ต่อไปนี้เป็นโค้ดที่เรียบง่ายเล็กน้อยจากการสาธิตรายการใดรายการหนึ่ง:

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);
    }

    ...

}

หลังจากเรียกข้อมูลรหัสของอุปกรณ์ที่พร้อมใช้งานด้วย enumerateDevices() แล้ว คุณจะใช้ setSinkId() (ตามที่กำหนดไว้ใน Audio Export Devices API) เพื่อเปลี่ยนปลายทางเอาต์พุตเสียงสำหรับองค์ประกอบวิดีโอหรือเสียงได้ ดังนี้

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

เมธอดนี้จะตั้งค่าอุปกรณ์เอาต์พุตสำหรับเสียงจากองค์ประกอบนั้นๆ เมื่อมีการเรียก setSinkId() คุณจะดูรหัสอุปกรณ์เสียงเอาต์พุตปัจจุบันสำหรับองค์ประกอบที่มีพร็อพเพอร์ตี้ sinkId ได้

getUserMedia()

ซึ่งจะมาแทนที่ navigator.getUserMedia() แต่แทนที่จะใช้โค้ดเรียกกลับ จะเป็นการส่งคืนคำสัญญาที่ให้สิทธิ์เข้าถึงMediaStream เราแนะนําให้นักพัฒนาแอปใช้ MediaDevices.getUserMedia() แต่ยังไม่มีแผนที่จะนํา navigator.getUserMedia() ออก เนื่องจากยังเป็นส่วนหนึ่งของข้อกำหนดอยู่

โดยมีการสาธิตที่เว็บไซต์ตัวอย่าง WebRTC

นี่คือส่วนหนึ่งของโค้ดจากเดโม

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) {
    // ...
    }

สละสิทธิ์ธง

เมธอด enumerateDevices() เป็นแบบ "ไม่มีธง" ใน Chrome แต่สำหรับ MediaDevices.getUserMedia() คุณยังคงต้องเปิดใช้ฟีเจอร์แพลตฟอร์มเว็บแบบทดลองใน chrome://flags หรือใช้แฟล็กบรรทัดคำสั่งต่อไปนี้

--enable-blink-features=GetUserMedia

ในทำนองเดียวกัน สำหรับ setSinkId() ให้เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บทดลองหรือใช้แฟล็ก ดังนี้

--enable-blink-features=AudioOutputDevices

โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับการรองรับเบราว์เซอร์ด้านล่าง

อนาคต

ตัวแฮนเดิลเหตุการณ์ ondevicechange ที่เสนอจะทำงานตามที่แสดงไว้ กล่าวคือ เหตุการณ์ devicechange จะเริ่มทำงานเมื่อชุดอุปกรณ์ที่ใช้งานได้มีการเปลี่ยนแปลง และในเครื่องจัดการ คุณสามารถเรียกใช้ enumerateDevices() เพื่อรับรายการอุปกรณ์ใหม่ได้ ยังไม่มีการติดตั้งใช้งานในเบราว์เซอร์ใด

ฉบับร่างของการจับภาพหน้าจอเป็นส่วนขยายของ Media Recording API ซึ่งนำเสนอเมธอด MediaDevices.getDisplayMedia() ที่ช่วยให้สามารถใช้ภูมิภาคของการแสดงผลของผู้ใช้เป็นแหล่งที่มาของสตรีมสื่อได้ นอกจากนี้ยังมีข้อเสนอขยายเวลาของ MediaDevices สำหรับ getSupportedConstraints() ซึ่งให้ข้อมูลว่าข้อจำกัดใดบ้างที่ใช้กับการโทร getUserMedia() ได้ ได้แก่ ฟังก์ชันเสียงและวิดีโอที่เบราว์เซอร์รองรับ

เดโม

ดูข้อมูลเพิ่มเติม