video

了解如何使用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....