了解如何使用getUserMedia()來從用戶端獲取音頻和視頻輸入。
由navigator.mediaDevices暴露的MediaDevices對象提供了getUserMedia()方法。
警告:navigator對象還公開了一個getUserMedia()方法,但已被標記為過時。這個API已經被移動到mediaDevices對象中以保持一致性。
以下是如何使用這個方法。
假設我們有一個按鈕:
<button>開始串流</button>
等待用戶點擊此按鈕,然後調用navigator.mediaDevices.getUserMedia()方法。
我們傳遞一個描述我們想要的媒體約束的對象。如果我們需要視頻輸入,我們將調用:
navigator.mediaDevices.getUserMedia({
video: true
})
我們也可以對這些約束進行細化:
navigator.mediaDevices.getUserMedia({
video: {
minAspectRatio: 1.333,
minFrameRate: 60,
width: 640,
height: 480
}
})
您可以通過調用navigator.mediaDevices.getSupportedConstraints()來獲取設備支持的所有約束的列表。
如果我們只需要音頻,我們可以傳遞audio: true:
navigator.mediaDevices.getUserMedia({
audio: true
})
如果我們需要音頻和視頻,則傳遞video: true和audio: true:
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
此方法返回一個promise,因此我們將使用async/await來獲取結果到stream變量中:
document.querySelector('button').addEventListener('click', async (e) => {
const stream = await navigator.mediaDevices.getUserMedia({
video: true
});
});
點擊按鈕會觸發瀏覽器中的一個面板,允許我們獲取使用媒體設備的權限:
在完成後,我們從getUserMedia()獲取的stream對象現在可以用於各種用途。最直接的用法是在頁面中的video元素中顯示視頻流:
<button>開始串流</button> <video autoplay>開始串流</video>
document.querySelector('button').addEventListener('click', async (e) => {
const stream = await navigator.mediaDevices.getUserMedia({
video: true
});
document.querySelector('video').srcObject = stream;
});
以下是在Codepen上的例子:https://codepen.io/flaviocopes/pen/WWyGmr
示例
這是一個Codepen示例,該示例要求您訪問視頻攝像頭並將視頻在頁面中播放:
在HTML中添加一個按鈕以獲取訪問攝像頭,然後添加一個帶有autoplay屬性的video元素。
<button id="get-access">獲取訪問攝像頭</button> <video autoplay></video>
JavaScript偵聽按鈕的點擊事件,然後調用navigator.mediaDevices.getUserMedia()請求視頻。然後我們通過調用getUserMedia()的結果的stream.getVideoTracks()來獲取使用的攝像頭的名稱。
將stream設置為video標籤的源對象,以便進行播放:
document.querySelector('#get-access').addEventListener('click', async function init(e) {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
document.querySelector('video').srcObject = stream;
document.querySelector('#get-access').setAttribute('hidden', true);
setTimeout(() => {
stream.getVideoTracks()[0].stop();
}, 3 * 1000);
} catch (error) {
alert(`${error.name}`);
console.error(error);
}
});
getUserMedia()的參數可以指定視頻流的其他要求:
navigator.mediaDevices.getUserMedia(
{
video: {
mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },
optional: [{ minFrameRate: 60 }, { maxWidth: 640 }, { maxHeight: 480 }]
}
},
successCallback,
errorCallback
);
要獲取音頻流,您需要要求音頻媒體對象,然後調用stream.getAudioTracks()而不是stream.getVideoTracks()。
在3秒的播放時間結束後,通過調用track.stop()停止視頻流。