Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Memulai dengan perangkat media

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

Cara paling umum ini digunakan adalah melalui fungsi getUserMedia() , yang mengembalikan janji yang akan diselesaikan ke MediaStream untuk perangkat media yang cocok. Fungsi ini mengambil objek MediaStreamConstraints tunggal yang menentukan persyaratan yang kami miliki. Misalnya, untuk hanya membuka mikrofon dan kamera default, 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 / tunggu

 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 ke getUserMedia() akan memicu permintaan izin. Jika pengguna menerima izin, janji tersebut diselesaikan dengan MediaStream berisi satu video dan satu trek audio. Jika izin ditolak, sebuah PermissionDeniedError dilemparkan. Jika tidak ada perangkat yang cocok yang terhubung, NotFoundError akan dibuang.

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

Meminta perangkat media

Dalam aplikasi yang lebih kompleks, kemungkinan besar kami ingin memeriksa semua kamera dan mikrofon yang terhubung dan memberikan umpan balik yang sesuai kepada pengguna. Ini dapat dilakukan dengan memanggil fungsi enumerateDevices() . Ini akan mengembalikan janji yang diselesaikan ke array MediaDevicesInfo yang menjelaskan setiap perangkat media yang dikenal. Kita dapat menggunakan ini untuk menyajikan UI kepada pengguna yang memungkinkan mereka memilih yang mereka inginkan. 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 / tunggu

 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 perubahan perangkat

Sebagian besar komputer mendukung plugging di berbagai perangkat selama runtime. Itu bisa berupa webcam yang terhubung dengan USB, headset Bluetooth, atau satu set speaker eksternal. Untuk mendukung hal ini dengan benar, aplikasi web harus mendengarkan perubahan perangkat media. Ini dapat dilakukan dengan menambahkan pendengar ke navigator.mediaDevices untuk acara 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);
});
 

Kendala media

Objek kendala, yang harus mengimplementasikan antarmuka MediaStreamConstraints , yang kami lewati sebagai parameter untuk getUserMedia() memungkinkan kami untuk membuka perangkat media yang cocok dengan persyaratan tertentu. Persyaratan ini dapat didefinisikan dengan sangat longgar (audio dan / atau video), atau sangat spesifik (resolusi kamera minimum atau ID perangkat yang tepat). Disarankan bahwa aplikasi yang menggunakan API getUserMedia() pertama-tama memeriksa perangkat yang ada dan kemudian menentukan batasan yang cocok dengan perangkat yang tepat menggunakan kendala deviceId . Perangkat juga, jika mungkin, akan dikonfigurasi sesuai dengan kendala. Kami dapat mengaktifkan pembatalan gema pada mikrofon atau mengatur lebar dan tinggi video tertentu atau minimum 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 antarmuka MediaStreamConstraints dapat ditemukan di MDN web docs .

Pemutaran lokal

Setelah perangkat media dibuka dan kami memiliki MediaStream , kami dapat menetapkannya ke elemen video atau audio untuk memutar streaming secara 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 yang diperlukan untuk elemen video khas yang digunakan dengan getUserMedia() biasanya akan memiliki atribut autoplay dan playsinline . Atribut autoplay akan menyebabkan stream baru yang ditetapkan untuk elemen diputar secara otomatis. Atribut playsinline memungkinkan video untuk bermain inline, bukan hanya di layar penuh, pada browser seluler tertentu. Disarankan juga menggunakan controls="false" untuk streaming langsung, kecuali jika pengguna dapat menghentikannya.

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