Google berkomitmen untuk memajukan ekuitas ras bagi masyarakat Hitam. Lihat bagaimana.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Memulai dengan perangkat media

Ketika mengembangkan untuk web, WebRTC standar menyediakan API untuk mengakses kamera dan mikrofon yang terhubung ke komputer atau smartphone. Perangkat ini biasanya disebut sebagai Media Devices dan dapat diakses dengan JavaScript melalui navigator.mediaDevices objek, yang mengimplementasikan yang MediaDevices antarmuka. Dari objek ini kita dapat menghitung semua perangkat yang terhubung, mendengarkan perubahan perangkat (bila perangkat terhubung atau terputus), dan membuka perangkat untuk mengambil Media Streaming (lihat di bawah).

Cara yang paling umum ini digunakan adalah melalui fungsi getUserMedia() , yang mengembalikan janji bahwa akan menyelesaikan ke MediaStream untuk perangkat media yang cocok. Fungsi ini membutuhkan satu MediaStreamConstraints keberatan yang menentukan persyaratan yang kita miliki. Misalnya, untuk hanya membuka mikrofon default dan kamera, kami akan melakukan hal berikut.

menggunakan Janji

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

Menggunakan async / Tunggulah

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

Panggilan untuk getUserMedia() akan memicu permintaan izin. Jika pengguna menerima izin, janji itu diselesaikan dengan MediaStream mengandung satu video dan satu track audio. Jika izin ditolak, sebuah PermissionDeniedError dilemparkan. Dalam hal tidak ada perangkat yang cocok terhubung, sebuah NotFoundError akan dilempar.

Referensi API penuh untuk MediaDevices antarmuka tersedia di docs web MDN .

Query perangkat media

Dalam aplikasi yang lebih kompleks, kita kemungkinan besar akan ingin memeriksa semua kamera yang terhubung dan mikrofon dan memberikan umpan balik yang sesuai untuk pengguna. Hal ini dapat dilakukan dengan memanggil fungsi enumerateDevices() . Ini akan mengembalikan janji yang resolve ke array MediaDevicesInfo yang menggambarkan setiap perangkat media yang diketahui. Kita dapat menggunakan ini untuk menyajikan UI untuk pengguna yang Mari kita mereka memilih yang mereka sukai. Setiap MediaDevicesInfo berisi properti bernama kind dengan nilai audioinput , audiooutput atau videoinput , menunjukkan jenis perangkat media apa itu.

menggunakan Janji

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

Menggunakan async / Tunggulah

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

Mendengarkan untuk perubahan perangkat

Sebagian besar komputer mendukung plugging dalam berbagai perangkat selama runtime. Ini bisa menjadi webcam terhubung dengan USB, headset Bluetooth, atau satu set speaker eksternal. Dalam rangka untuk benar mendukung ini, sebuah aplikasi web harus mendengarkan untuk perubahan dari perangkat media. Hal ini dapat dilakukan dengan menambahkan pendengar untuk navigator.mediaDevices untuk devicechange acara.

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

kendala Media

Kendala objek, yang harus melaksanakan MediaStreamConstraints antarmuka, bahwa kita lulus sebagai parameter untuk getUserMedia() memungkinkan kita untuk membuka perangkat media yang cocok dengan persyaratan tertentu. Persyaratan ini dapat sangat longgar didefinisikan (audio dan / atau video), atau sangat spesifik (resolusi kamera minimal atau perangkat ID yang tepat). Disarankan bahwa aplikasi yang menggunakan getUserMedia() API periksa dulu perangkat yang ada dan kemudian menentukan kendala yang cocok dengan perangkat yang tepat menggunakan deviceId kendala. Perangkat akan juga, jika mungkin, dikonfigurasi sesuai dengan kendala. Kita dapat mengaktifkan gema pada mikrofon atau menetapkan tertentu atau lebar dan tinggi minimum video dari kamera.

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

Dokumentasi lengkap untuk MediaStreamConstraints antarmuka dapat ditemukan pada dokumen web MDN .

pemutaran lokal

Setelah perangkat media telah dibuka dan kami memiliki MediaStream tersedia, kita bisa menetapkan ke video atau elemen audio untuk memutar sungai lokal.

 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 diperlukan untuk elemen video yang khas digunakan dengan getUserMedia() biasanya akan memiliki atribut autoplay dan playsinline . The autoplay atribut akan menyebabkan aliran baru ditugaskan ke elemen yang bermain secara otomatis. The playsinline atribut memungkinkan video ke bermain inline, bukan hanya di layar penuh, pada browser ponsel tertentu. Hal ini juga dianjurkan untuk menggunakan controls="false" untuk streaming langsung, kecuali pengguna harus dapat berhenti mereka.

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