Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

เริ่มต้นใช้งานอุปกรณ์สื่อ

เมื่อพัฒนาสำหรับเว็บมาตรฐาน WebRTC จะมี API สำหรับการเข้าถึงกล้องและไมโครโฟนที่เชื่อมต่อกับคอมพิวเตอร์หรือสมาร์ทโฟน อุปกรณ์เหล่านี้มักเรียกว่าอุปกรณ์สื่อและสามารถเข้าถึงได้ด้วย JavaScript ผ่านวัตถุ navigator.mediaDevices ซึ่งใช้ส่วนต่อประสาน MediaDevices จากวัตถุนี้เราสามารถระบุอุปกรณ์ที่เชื่อมต่อทั้งหมดฟังการเปลี่ยนแปลงอุปกรณ์ (เมื่ออุปกรณ์เชื่อมต่อหรือตัดการเชื่อมต่อ) และเปิดอุปกรณ์เพื่อดึง Media Stream (ดูด้านล่าง)

วิธีที่ใช้กันมากที่สุดคือการใช้ฟังก์ชั่น getUserMedia() ซึ่งคืนสัญญาที่จะแก้ไขให้กับ MediaStream สำหรับอุปกรณ์สื่อที่ตรงกัน ฟังก์ชั่นนี้ใช้วัตถุ MediaStreamConstraints เดียวที่ระบุข้อกำหนดที่เรามี ตัวอย่างเช่นเพียงแค่เปิดไมโครโฟนและกล้องเริ่มต้นเราจะทำสิ่งต่อไปนี้

ใช้สัญญา

 const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
 

ใช้ async / คอย

 const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}
 

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

การอ้างอิง API แบบเต็มสำหรับส่วนต่อประสาน MediaDevices มีให้ที่ MDN เอกสารเว็บ

การสืบค้นอุปกรณ์สื่อ

ในแอปพลิเคชันที่ซับซ้อนมากขึ้นเรามักจะต้องการตรวจสอบกล้องและไมโครโฟนที่เชื่อมต่ออยู่ทั้งหมดและให้ข้อเสนอแนะที่เหมาะสมกับผู้ใช้ สิ่งนี้สามารถทำได้โดยการเรียกใช้ฟังก์ชัน enumerateDevices() สิ่งนี้จะส่งคืนสัญญาที่แก้ไขเป็นอาร์เรย์ของ MediaDevicesInfo ที่อธิบายถึงอุปกรณ์สื่อที่รู้จักกันแต่ละรายการ เราสามารถใช้สิ่งนี้เพื่อแสดง UI ให้กับผู้ใช้ซึ่งให้พวกเขาเลือกอันที่พวกเขาต้องการ MediaDevicesInfo แต่ละรายการจะมีคุณสมบัติที่ระบุชื่อ kind ด้วยค่า audioinput , audiooutput หรือ videoinput เพื่อระบุประเภทของอุปกรณ์สื่อ

ใช้สัญญา

 function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
 

ใช้ async / คอย

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
 

การฟังการเปลี่ยนแปลงอุปกรณ์

คอมพิวเตอร์ส่วนใหญ่รองรับการเสียบอุปกรณ์ต่าง ๆ ระหว่างรันไทม์ อาจเป็นเว็บแคมที่เชื่อมต่อด้วย USB ชุดหูฟังบลูทู ธ หรือชุดลำโพงภายนอก เพื่อรองรับสิ่งนี้อย่างเหมาะสมเว็บแอปพลิเคชั่นควรรับฟังการเปลี่ยนแปลงของอุปกรณ์สื่อ ซึ่งสามารถทำได้โดยการเพิ่มฟังให้ navigator.mediaDevices สำหรับ devicechange เหตุการณ์

 // Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
 

ข้อ จำกัด ของสื่อ

วัตถุข้อ จำกัด ซึ่งจะต้องใช้อินเทอร์เฟซ MediaStreamConstraints ที่เราส่งผ่านเป็นพารามิเตอร์เพื่อ getUserMedia() ช่วยให้เราสามารถเปิดอุปกรณ์สื่อที่ตรงกับความต้องการบางอย่าง ข้อกำหนดนี้สามารถกำหนดได้อย่างอิสระมาก (เสียงและ / หรือวิดีโอ) หรือเฉพาะเจาะจงมาก (ความละเอียดของกล้องขั้นต่ำหรือรหัสอุปกรณ์ที่แน่นอน) ขอแนะนำให้แอปพลิเคชันที่ใช้ getUserMedia() API ตรวจสอบอุปกรณ์ที่มีอยู่ก่อนจากนั้นระบุข้อ จำกัด ที่ตรงกับอุปกรณ์ที่แน่นอนโดยใช้ข้อ จำกัด deviceId อุปกรณ์จะถูกกำหนดค่าตามข้อ จำกัด ด้วยถ้าเป็นไปได้ เราสามารถเปิดใช้งานการยกเลิกเสียงสะท้อนบนไมโครโฟนหรือตั้งค่าความกว้างและความสูงขั้นต่ำของวิดีโอจากกล้อง

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
 

เอกสารฉบับเต็มสำหรับส่วนต่อประสาน MediaStreamConstraints สามารถพบได้บน MDN เว็บเอกสาร

การเล่นในท้องถิ่น

เมื่อเปิดอุปกรณ์สื่อแล้วและเรามี MediaStream ให้ใช้งานเราสามารถกำหนดให้กับองค์ประกอบวิดีโอหรือเสียงเพื่อเล่นกระแสข้อมูลในเครื่อง

 async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
 

HTML ที่จำเป็นสำหรับองค์ประกอบวิดีโอทั่วไปที่ใช้กับ getUserMedia() มักจะมีคุณสมบัติ autoplay และ autoplay playsinline แอตทริบิวต์การ autoplay จะทำให้สตรีมใหม่ที่กำหนดให้กับองค์ประกอบเล่นโดยอัตโนมัติ แอตทริบิวต์ playsinline อนุญาตให้วิดีโอเล่นแบบอินไลน์แทนที่จะเป็นแบบเต็มหน้าจอในเบราว์เซอร์มือถือบางรุ่น ขอแนะนำให้ใช้ controls="false" สำหรับสตรีมแบบสดยกเว้นว่าผู้ใช้จะสามารถหยุดพวกเขาได้ชั่วคราว

 <html>
<head><title>Local video playback</video></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>