Google มุ่งมั่นที่จะก้าวทุนเชื้อชาติชุมชนสีดำ มาดูกันว่า
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

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

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

วิธีที่ใช้กันมากที่สุดนี้จะใช้ผ่านฟังก์ชั่น 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 และ playsinline autoplay แอตทริบิวต์จะทำให้เกิดกระแสใหม่ที่ได้รับมอบหมายไปยังองค์ประกอบที่จะเล่นโดยอัตโนมัติ playsinline แอตทริบิวต์ช่วยให้วิดีโอเพื่อเล่นอินไลน์แทนเฉพาะในแบบเต็มหน้าจอบนเบราว์เซอร์มือถือบางอย่าง นอกจากนี้ยังแนะนำให้ใช้ controls="false" สำหรับสตรีมสดเว้นแต่ผู้ใช้ควรจะสามารถที่จะหยุดพวกเขา

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