Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

メディアデバイスの概要

Web向けに開発する場合、WebRTC標準は、コンピューターまたはスマートフォンに接続されたカメラとマイクにアクセスするためのAPIを提供します。これらのデバイスは一般にメディアデバイスと呼ばれ、 MediaDevicesインターフェイスを実装するnavigator.mediaDevicesオブジェクトを介してJavaScriptでアクセスできます。このオブジェクトから、接続されているすべてのデバイスを列挙し、デバイスの変更をリッスンし(デバイスが接続または切断されている場合)、デバイスを開いてメディアストリームを取得できます(以下を参照)。

これを使用する最も一般的な方法は、関数getUserMedia()使用することです。この関数は、一致するメディアデバイスのMediaStream解決されるpromiseを返します。この関数は、必要な要件を指定する1つのMediaStreamConstraintsオブジェクトを取ります。たとえば、デフォルトのマイクとカメラを開くには、次のようにします。

Promiseの使用

 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 / 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()を呼び出すと、権限リクエストがトリガーされます。ユーザーが許可を受け入れると、promiseは1つのビデオと1つのオーディオトラックを含むMediaStream解決されます。権限が拒否された場合、 PermissionDeniedErrorがスローされます。一致するデバイスが接続されていない場合、 NotFoundErrorがスローされます。

MediaDevicesインターフェイスの完全なAPIリファレンスは、 MDN Webドキュメントで入手できます。

メディアデバイスのクエリ

より複雑なアプリケーションでは、接続されているすべてのカメラとマイクを確認し、適切なフィードバックをユーザーに提供する必要があります。これは、関数enumerateDevices()呼び出すことで実行できます。これは、既知の各メディアデバイスを説明するMediaDevicesInfo配列に解決されるpromiseを返します。これを使用して、ユーザーにUIを提示し、好きなものを選択させることができます。各MediaDevicesInfoは、それがどのタイプのメディアデバイスであるかを示す、値audioinputaudiooutputまたはvideoinput持つkindという名前のプロパティが含まれています。

Promiseの使用

 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 / 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で接続されたWebカメラ、Bluetoothヘッドセット、または一連の外部スピーカーを使用できます。これを適切にサポートするために、Webアプリケーションはメディアデバイスの変更をリッスンする必要があります。これは、 devicechangeイベントのnavigator.mediaDevicesにリスナーを追加することで実行できます。

 // 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() 、特定の要件に一致するメディアデバイスを開くことができます。この要件は、非常に大まかに定義されている(オーディオまたはビデオ、あるいはその両方)か、非常に具体的(最小のカメラ解像度または正確なデバイス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);
    }
}
 

getUserMedia()使用される一般的なビデオ要素に必要なHTMLには、通常、属性autoplayおよびplaysinlineます。 autoplay属性により、要素に割り当てられた新しいストリームが自動的に再生されます。 playsinline属性を使用すると、特定のモバイルブラウザーで、ビデオをフルスクリーンだけでなくインラインで再生できます。また、ユーザーが一時停止できる必要がない限り、ライブストリームにはcontrols="false"を使用controls="false"ことをお勧めします。

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