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

Sam Dutton

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

เช่น

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

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

MediaDevices มี 2 วิธี ซึ่งทั้ง 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 Output Devices API) เพื่อเปลี่ยนปลายทางเอาต์พุตเสียงสำหรับองค์ประกอบวิดีโอหรือเสียงได้ ดังนี้

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

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

getUserMedia()

การดำเนินการนี้จะแทนที่ navigator.getUserMedia() แต่แทนที่จะใช้การเรียกกลับ จะแสดงผล Promise ที่ให้สิทธิ์เข้าถึง 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() เป็น "ไม่มี Flag" ใน Chrome ส่วนสำหรับ MediaDevices.getUserMedia() คุณยังคงต้องเปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองใน chrome://flags หรือใช้ Flag บรรทัดคำสั่งต่อไปนี้

--enable-blink-features=GetUserMedia

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

--enable-blink-features=AudioOutputDevices

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

อนาคต

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

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

เดโม

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