當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

在 HTML5 中捕获音频和视频

發布時間：2023/12/15 HTML 19 豆豆

生活随笔收集整理的這篇文章主要介紹了在 HTML5 中捕获音频和视频小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Capture Audio and Video in HTML5 機翻

原文：Capture Audio and Video in HTML5 - HTML5 Rocks

介紹

長期以來，捕獲音頻和視頻的能力一直是Web開發的圣杯。多年來，您必須依靠瀏覽器插件（Flash或Silverlight）來完成工作。加油！

HTML5來拯救。這可能并不明顯，但HTML5的興起帶來了對設備硬件的訪問激增。地理位置?（GPS）、定向 API（加速度計）、WebGL（GPU）和?Web 音頻 API（音頻硬件）就是完美的例子。這些功能非常強大，并公開了位于系統基礎硬件功能之上的高級JavaScript API。

本教程介紹?navigator.mediaDevices.getUserMedia（），它允許 Web 應用訪問用戶的攝像頭和麥克風。

通往 API 之路getUserMedia()

如果您不知道它的歷史，那么通往API的道路就是一個有趣的故事。getUserMedia()

在過去幾年中，媒體捕獲 API 的幾種變體不斷發展。許多人認識到需要在網絡上訪問本機設備，但這導致許多人提出了新的規范。事情變得如此混亂，以至于W3C最終決定成立一個工作組。他們的唯一目的是什么？理解瘋狂！設備和傳感器工作組的任務是整合和標準化大量提案。

以下是2011年發生的事情的摘要。

第 1 輪：HTML 媒體捕獲

HTML Media Capture是該小組首次在網絡上標準化媒體捕獲。它將重載參數并為參數添加新值。<input type="file">accept

如果您想讓用戶使用網絡攝像頭拍攝自己的快照，則可以使用：capture=camera

相當不錯，對吧？從語義上講，這很有道理。這個特定的API不足之處在于能夠執行實時效果，例如將實時網絡攝像頭數據呈現到并應用WebGL過濾器。HTML 媒體捕獲僅允許您及時錄制媒體文件或拍攝快照。<canvas>

支持

Android 3.0 瀏覽器?— 首批實現之一。觀看此視頻，了解其實際應用。
谷歌瀏覽器安卓版（0.16）
火狐移動版 10.0
iOS 6 Safari 和 Chrome（部分支持）

回合 2：設備元件

許多人認為HTML媒體捕獲太有限，因此出現了一個新的規范，支持任何類型的（未來）設備。毫不奇怪，該設計需要一個新元素，即<設備>元素，它成為的前身。getUserMedia()

Opera是最早基于該元素創建視頻捕獲初始實現的瀏覽器之一。不久之后（確切地說是同一天），WhatWG決定放棄標簽，轉而支持另一個新興的，這次是一個名為的JavaScript API。一周后，Opera推出了新版本，其中包括對更新規范的支持。那年晚些時候，微軟加入了這個行列，發布了一個支持新規范的IE9實驗室。<device><device>navigator.getUserMedia()getUserMedia()

下面是這樣的：<device>

<code><device type="media" onchange="update(this.data)"></device> <video autoplay></video> <script>function update(stream) {document.querySelector('video').src = stream.url;} </script></code>

支持：

不幸的是，沒有已發布的瀏覽器包含。少一個需要擔心的 API。不過，確實有兩件很棒的事情：<device><device>

這是語義上的。
它易于擴展，可以支持音頻和視頻設備以外的更多內容。

深吸一口氣。這些東西移動得很快！

第三回合：WebRTC

該元素最終走上了渡渡鳥的道路。<device>

由于WebRTC（Web實時通信）工作，尋找合適的捕獲API的步伐加快了。該規范由?Web 實時通信工作組監督。Google，Opera，Mozilla和其他一些公司都有實現。

getUserMedia()與WebRTC相關，因為它是進入該組API的網關。它提供了訪問用戶的本地攝像頭和麥克風流的方法。

支持：

getUserMedia()自Chrome 21，Opera 18和Firefox 17以來一直可用。該方法最初提供了支持，但這已被棄用。Navigator.getUserMedia()

您現在應該使用?navigator.mediaDevices.getUserMedia（）?方法，該方法受到廣泛支持。

立即開始

使用，您終于可以在沒有插件的情況下進入網絡攝像頭和麥克風輸入。攝像機訪問現在是一個呼叫，而不是安裝離開。它直接烘焙到瀏覽器中。興奮了嗎？getUserMedia()

特征檢測

特征檢測是對是否存在以下各項的簡單檢查：navigator.mediaDevices.getUserMedia

<code>function hasGetUserMedia() {return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); } if (hasGetUserMedia()) {// Good to go! } else {alert("getUserMedia() is not supported by your browser"); }</code>

訪問輸入設備

要使用網絡攝像頭或麥克風，您需要請求權限。to 參數是一個對象，用于指定要訪問的每種類型的媒體的詳細信息和要求。例如，如果要訪問網絡攝像頭，則參數應為。要同時使用麥克風和攝像頭，請通過：getUserMedia(){video: true}{video: true, audio: true}

好。這到底是怎么回事呢？媒體捕獲是 HTML5 API 協同工作的一個完美示例。它與您的其他HTML5伙伴和.請注意，您不會設置屬性，也不會在元素上包含元素。您從網絡攝像頭為視頻提供，而不是媒體文件的 URL。<audio><video>src<source><video>MediaStream

您還告訴 to ，否則它將凍結在第一幀。添加也像您預期的那樣工作。<video>autoplaycontrols

設置媒體約束（分辨率、高度和寬度）

該參數 to 還可用于指定對返回的媒體流的更多要求（或約束）。例如，除了僅基本訪問視頻（例如），您還可以要求流為 HD：getUserMedia(){video: true}

<code>const hdConstraints = {video: { width: { min: 1280 }, height: { min: 720 } }, };navigator.mediaDevices.getUserMedia(hdConstraints).then((stream) => {video.srcObject = stream; });</code> <code>const vgaConstraints = {video: { width: { exact: 640 }, height: { exact: 480 } }, };navigator.mediaDevices.getUserMedia(vgaConstraints).then((stream) => {video.srcObject = stream; });</code>

如果當前所選攝像機不支持分辨率，則會被拒絕，并且系統不會提示用戶授予訪問其攝像機的權限。getUserMedia()OverconstrainedError

有關更多配置，請參閱約束 API。

選擇媒體源

該方法提供有關可用輸入和輸出設備的信息，并可以選擇攝像頭或麥克風。（該 API?已被棄用。navigator.mediaDevices.enumerateDevices()MediaStreamTrack.getSources()

此示例使用戶能夠選擇音頻和視頻源：

<code>const videoElement = document.querySelector("video"); const audioSelect = document.querySelector("select#audioSource"); const videoSelect = document.querySelector("select#videoSource");navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);audioSelect.onchange = getStream; videoSelect.onchange = getStream;function gotDevices(deviceInfos) {for (let i = 0; i !== deviceInfos.length; ++i) {const deviceInfo = deviceInfos[i];const option = document.createElement("option");option.value = deviceInfo.deviceId;if (deviceInfo.kind === "audioinput") {option.text =deviceInfo.label || "microphone " + (audioSelect.length + 1);audioSelect.appendChild(option);} else if (deviceInfo.kind === "videoinput") {option.text = deviceInfo.label || "camera " + (videoSelect.length + 1);videoSelect.appendChild(option);} else {console.log("Found another kind of device: ", deviceInfo);}} }function getStream() {if (window.stream) {window.stream.getTracks().forEach(function (track) {track.stop();});}const constraints = {audio: {deviceId: { exact: audioSelect.value },},video: {deviceId: { exact: videoSelect.value },},};navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError); }function gotStream(stream) {window.stream = stream; // make stream available to consolevideoElement.srcObject = stream; }function handleError(error) {console.error("Error: ", error); }</code>

查看Sam Dutton關于如何讓用戶選擇媒體源的精彩演示。

安全

getUserMedia()只能從 HTTPS URL 或本地主機調用。否則，來自調用的承諾將被拒絕。也不適用于來自 iframe 的跨域調用。有關更多信息，請參閱?棄用跨域 Iframe 中的權限。getUserMedia()

所有瀏覽器都會在調用時生成一個信息欄，使用戶可以選擇授予或拒絕對其攝像頭或麥克風的訪問權限。以下是來自 Chrome 的權限對話框：getUserMedia()

Chrome 中的權限對話框

此權限是持久的。也就是說，用戶不必每次都授予或拒絕訪問權限。如果用戶以后改變主意，他們可以從瀏覽器設置中更新每個來源的相機訪問選項。

主動使用相機，這會占用資源并保持相機打開（并且相機燈亮起）。當您不再使用軌道時，請呼叫以關閉攝像機。MediaStreamTracktrack.stop()

截取屏幕截圖

API 的方法使得將幀繪制到變得輕而易舉。當然，現在您已經通過視頻輸入了，創建帶有實時視頻的照相亭應用程序也同樣容易：<canvas>ctx.drawImage(video, 0, 0)<video><canvas>getUserMedia()

<code><video autoplay></video> <img src=""> <canvas style="display:none;"></canvas><script> const captureVideoButton = document.querySelector("#screenshot .capture-button" ); const screenshotButton = document.querySelector("#screenshot-button"); const img = document.querySelector("#screenshot img"); const video = document.querySelector("#screenshot video");const canvas = document.createElement("canvas");captureVideoButton.onclick = function () {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError); };screenshotButton.onclick = video.onclick = function () {canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext("2d").drawImage(video, 0, 0);// Other browsers will fall back to image/pngimg.src = canvas.toDataURL("image/webp"); };function handleSuccess(stream) {screenshotButton.disabled = false;video.srcObject = stream; } </script></code>

應用效果

CSS 過濾器

使用CSS濾鏡，您可以在捕獲時對應用一些粗糙的效果：<video>

<code><video autoplay></video> <button class="capture-button">Capture video</button> <button id="cssfilters-apply">Apply CSS filter</button><script> const captureVideoButton = document.querySelector("#cssfilters .capture-button" ); const cssFiltersButton = document.querySelector("#cssfilters-apply"); const video = document.querySelector("#cssfilters video");let filterIndex = 0; const filters = ["grayscale","sepia","blur","brightness","contrast","hue-rotate","hue-rotate2","hue-rotate3","saturate","invert","", ];captureVideoButton.onclick = function () {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError); };cssFiltersButton.onclick = video.onclick = function () {video.className = filters[filterIndex++ % filters.length]; };function handleSuccess(stream) {video.srcObject = stream; } </script></code>

WebGL 紋理

視頻捕獲的一個驚人用例是將實時輸入渲染為 WebGL 紋理。給杰羅姆·艾蒂安的教程和演示看一看。它討論了如何使用和Three.js將實時視頻渲染到WebGL中。getUserMedia()

將 API 與 Web 音頻 API 結合使用getUserMedia

Chrome 支持從網絡音頻 API?輸入實時麥克風，以獲得實時效果。它看起來像這樣：getUserMedia()

<code>window.AudioContext = window.AudioContext || window.webkitAudioContext;const context = new AudioContext();navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {const microphone = context.createMediaStreamSource(stream);const filter = context.createBiquadFilter();// microphone -> filter -> destinationmicrophone.connect(filter);filter.connect(context.destination); });</code>

演示：

實時輸入可視化工具
錄音機
變槳檢測器

有關更多信息，請參閱Chris Wilson的帖子。

結論

從歷史上看，網絡上的設備訪問一直是一個難以破解的難題。許多人嘗試過，很少有人成功。大多數早期的想法從未被廣泛采用，也沒有在專有環境之外扎根。也許主要問題是Web的安全模型與原生世界非常不同。特別是，您可能不希望每個Joe Shmoe網站都可以隨機訪問您的攝像機或麥克風。很難做對。

從那時起，在移動設備日益普及的功能的推動下，Web開始提供更豐富的功能?，F在，您可以使用 API?來拍攝照片、控制相機設置、錄制音頻和視頻以及訪問其他類型的傳感器數據，例如位置、運動和設備方向。通用傳感器框架將所有這些與通用 API 聯系在一起，使 Web 應用能夠訪問 USB?并與藍牙設備交互。

getUserMedia()只是硬件交互性的第一波浪潮。

其他資源

W3C 規格
Bruce Lawson 的?HTML5Doctor 文章
布魯斯·勞森的 dev.opera.com 文章
開始使用WebRTC

演示

WebRTC 示例：規范演示和代碼存儲庫
保羅·尼夫的WebGL攝像機效果
WebGL 中的實時視頻
用手玩木琴

總結

以上是生活随笔為你收集整理的在 HTML5 中捕获音频和视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决时间差太大导致Windows无法同步
下一篇： SpringBoot整合Elastric