グーグルは、ブラックコミュニティのための人種的資本を進めてまいります。 どのように参照してください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

メディアデバイス入門

Web用に開発する場合、標準のWebRTCは、コンピュータやスマートフォンに接続されたカメラやマイクにアクセスするためのAPIを提供します。これらのデバイスは、一般的にメディアデバイスと呼ばれを通して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);
    });
 

非同期/のawaitを使います

 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一つのビデオとオーディオトラック1を含みます。許可が拒否された場合、 PermissionDeniedErrorスローされます。場合には、一致するデバイスが接続されていないがあるNotFoundErrorスローされます。

以下のための完全なAPIリファレンスMediaDevicesインタフェースが利用可能であるMDNのWebドキュメント

メディアデバイスの照会

より複雑なアプリケーションでは、我々は、最も可能性の高い接続されているすべてのカメラやマイクをチェックして、ユーザーに適切なフィードバックを提供したいと思うでしょう。これは、関数を呼び出すことによって行うことができますenumerateDevices() 。これは、配列に解決されることを約束戻りますMediaDevicesInfo各既知のメディアデバイスを記述する。我々は、彼らが好むものを選択しましょうユーザーにUIを提示するためにこれを使用することができます。各MediaDevicesInfo名前のプロパティが含まkind値でaudioinputaudiooutputまたは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));
 

非同期/のawaitを使います

 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で接続されたウェブカメラ、Bluetoothヘッドセット、または外部スピーカーのセットである可能性があります。これを適切にサポートするために、Webアプリケーションは、メディアデバイスの変化を聞く必要があります。これはにリスナーを追加することによって行うことができ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()私たちは、特定の要件に合致するメディアデバイスを開くことができます。この要件は非常に緩く(オーディオおよび/またはビデオ)が定義され、又は非常に特異的な(最小のカメラの解像度や正確なデバイスID)することができます。使用するアプリケーションことをお勧めし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のWebドキュメント

ローカルでの再生

メディアデバイスが開かれていると我々が持ってたら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()通常の属性がありますautoplayplaysinlineautoplay属性は、要素に割り当てられた新しいストリームが自動的に再生します。 playsinline属性は、特定の携帯電話のブラウザ上で、フルスクリーンに代わりのみで、動画がインライン再生することができます。また、使用することが推奨されcontrols="false" 、ユーザがそれらを一時停止することができるはずがない限り、ライブストリームのために。

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