首頁 web前端 H5教程 使用HTML5捕捉音訊與視訊資訊概觀及實例_html5教學技巧

使用HTML5捕捉音訊與視訊資訊概觀及實例_html5教學技巧

May 16, 2016 pm 03:49 PM
捕捉 音訊

本文概述
長期以來,音訊與視訊訊息的捕捉一直是Web開發中的一個難點。多年來,我們一直依賴瀏覽器插件來實現這個需求。
在HTML 5中,出現了許多可以存取硬體設備的API,例如存取GPS設備的Geolocation API、存取accelerometer設備的Orientation API、存取GPU設備的WebGL API、存取音訊播放設備的Web Audio API等等。這些API是非常強大的,因為開發者可以直接透過編寫JavaSccript腳本程式碼來存取底層硬體設備。
本文介紹一種新的API,該API透過使用navigatior.getUserMedia()方法來讓Web應用程式擁有存取使用者攝影機與麥克風設備的能力。

捕捉媒體資料的技術發展歷史
在過去幾年裡,開始出現了在Web應用程式中存取客戶端本地設備的需求,因此,W3C組織決定組織一個DAP(Device APIS POLICY)工作小組,來為該需求的實現制定一個統一的標準。
接下來讓我們來看看在2011年發生了哪些事情:

在HTML頁面文件中實現媒體資料的捕捉
DAP工作小組的第一個要製定的標準就是如何在Web應用程式的HTML頁面中實現媒體資料的捕捉。他們決定重載類型為file的input元素(),並且為accept屬性增加一個新的屬性值。
如果開發者想實現使用者透過相機拍照的功能,可以書寫如下所示的程式碼。

複製程式碼
程式碼如下:



錄影資料與音訊資料的程式碼與之類似:

複製代碼
代碼如下:




在這些程式碼中,只需使用file控制(類型為file的input元素)即可完成拍照或錄製媒體資料的功能。但是在因為這些程式碼中尚缺乏一些實現與之相關的需求(例如在canvas元素中渲染捕捉到的視訊資料,或者對捕捉到的視訊資料應用WEBGL濾鏡)的能力,所以沒有得到開發者的廣泛應用。
支援瀏覽器:
Android 3.0瀏覽器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
如果使用files,捕捉媒體資料後對其進行處理的能力是非常有限的,所以出現了一種新的可支援任何設備的標準。該標準使用device元素。
Opera瀏覽器是第一個透過device元素實現視訊資料捕捉的瀏覽器。幾乎在同一天,WhatWG組織決定使用navigator.getUserMedia()方法來捕捉媒體資料。一個星期後,Opera推出一個新的支援navigator.getUserMedia()方法的瀏覽器。後來,Microsoft工具推出支援此方法的IE 9瀏覽器。
device元素的使用方法如下所示。

複製程式碼
程式碼如下:



<script> <br />function update(stream) { <br />document.querySelector('video') .src = stream.url; <br />} <br /></script>

支援瀏覽器
不幸的是,目前為止尚沒有一個正式版的瀏覽器中支援device元素。
WEBRTC
最近,由於WebRTC(Web Real Time Communication:Web即時通訊)API的出現,媒體資料捕捉技術又有了一個很大的發展。 Google、Opera、Mozilla等公司都正在努力將其實現在自己的瀏覽器中。
WebRTC API是一個與getUserMedia方法緊密相關的API,它提供一種存取客戶端本地的攝影機或麥克風設備的能力。
支援瀏覽器:
目前為止,在Chrome 18版瀏覽器中,在chrome://flags頁面中進行設定後可使用WebRTC,在Chrome 21版本的瀏覽器中,該API被預設使用,不再需要設定。在Opera 12以上與Firefox 17版本的瀏覽器中預設支援WebRTC API。
使用getUserMedia方法
透過使用getUserMedia方法,我們可以不依靠插件而直接存取客戶端本地的攝影機設備與麥克風設備。
偵測瀏覽器支援
可以透過如下所示的方法來偵測瀏覽器是否支援getUserMedia方法。

複製程式碼
程式碼如下:

function hasG有>程式碼如下:


function hasGethasGetUser) /請注意:在Opera瀏覽器中不使用前綴
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia); if; (hasGetUserMedia()) {
alert('您的瀏覽器支援getUserMedia方法');
}
else {
alert('您的瀏覽器不支援getUserMedia方法');
}

取得存取裝置的權限
為了存取客戶端攝影機裝置與麥克風裝置,我們首先需要取得權限。 getUserMedia方法的第一個參數是用來指定媒體類型的物件。例如,當你想存取攝影機裝置時,第一個參數應該為{video:true},為了同時存取攝影機裝置與麥克風裝置,需要使用{video:true,audio:true}參數,程式碼如下所示:

複製程式碼
程式碼如下:

在這段程式碼中,結合了video元素的使用。請注意我們沒有使用video元素的src屬性值,而是為video元素指定了一個引用媒體文件的URL地址,同時將代表了從攝像頭中獲取到的視頻數據的LocalMediaStream對象轉換為一個Blob URL。
在這段程式碼中,同時為video元素使用autoplay屬性,如果不使用該屬性,則video元素將停留在所取得的第一幀畫面處。
請注意:在Chrome瀏覽器中,如果只使用{audio:true},則引發BUG,在Opera瀏覽器中,同樣不能使用audio元素。
如果你想讓多個瀏覽器同時支援getUserMedia方法,請使用如下所示的程式碼:


複製程式碼
複製程式碼

程式碼如下:


window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserator.webkitGet mozGetUserMedia || navigator.msGetUserMedia;
var video = document.getElementById('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({vidaudio: trueeounction (stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
}
else {
alert('您的瀏覽器不支援getUserMedia方法');
}
セキュリティ
一部のブラウザでは、getUserMedia メソッドが呼び出されるときに、カメラまたはマイクへのアクセスを許可するか拒否するかをユーザーに尋ねるプロンプト ウィンドウが表示されます。
写真を撮る
Canvas API では、ctx.drawImage(video,0,0) メソッドを使用して、video 要素内の特定のフレームを Canvas 要素に出力できます。もちろん、ユーザーのカメラから撮影した画像情報をvideo要素に出力しているので、video要素を介してcanvas要素に画像情報を出力することも可能です。つまり、リアルタイムの写真撮影を実現します。関数は次のとおりです。

コードをコピーします
コードは次のとおりです:

<ビデオ自動再生>< ;/video> ;

var video = document.getElementById('video');
var ctx = Canvas.getContext('2d'); var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0).src = Canvas .toDataURL( 'image/png');
}
}
video.addEventListener('click', snapshot, false)
//ベンダープレフィックスを使用しないでください
navigator.getUserMedia ({video : true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
},

<); 🎜>
CSS フィルターを適用する

これまでのところ、CSS フィルターは Chrome 18 以降のブラウザーで使用できます。
CSS フィルターを使用すると、video 要素でキャプチャされたビデオにさまざまな画像フィルター効果を追加できます。



コードをコピーします
コードは次のとおりです。
スクリプト>
var idx = 0;
var フィルター = ['グレースケール'、'セピア'、'ぼかし'、'明るさ'、'コントラスト'、'色相回転'、
'色相回転2 ', ' hue-rotate3', 'saturate', 'invert', ''];
function changeFilter(e) {
var el = e.target;
el.className = ''; 🎜>var effect = filters[idx % filters.length]; // フィルターをループします。
el.classList.add(effect);
>document.getElementById('video').addEventListener('click',changeFilter,false);
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
Win11如何調節音訊平衡? (Win11調整音量的左右聲道) Win11如何調節音訊平衡? (Win11調整音量的左右聲道) Feb 11, 2024 pm 05:57 PM

在Win11電腦上聽音樂或看電影,如果揚聲器或耳機聽起來不平衡,用戶可以根據自己的需求手動調整平衡等級。那我們要如何調整呢?針對這個問題,小編帶來了詳細的操作教學,希望可以幫助大家。如何在Windows11中平衡左右音訊通道?方法一:使用「設定」套用點擊鍵並點選設定。 Windows按一下系統,然後選擇聲音。選擇更多聲音設定。按一下您的揚聲器/耳機,然後選擇屬性。導航至“等級”選項卡,然後按一下“餘額”。確保“左”和

調整 Windows 11 上的音訊平衡 [左右聲道] 的方法 調整 Windows 11 上的音訊平衡 [左右聲道] 的方法 Oct 04, 2023 pm 07:17 PM

如果您在Windows電腦上聽音樂或看電影,您可能已經注意到一側的聲音比另一側大。這可能是音訊設備的預設設定。幸運的是,調整系統的音頻平衡相當容易。本文將介紹執行此操作的步驟。為什麼我的耳機一側在Windows11上更安靜?大多數情況下,問題可能是耳機未緊密插入或連接鬆動。此外,如果耳機插孔損壞,您的音效卡問題或音訊設備受到干擾,您會注意到聲音的差異。另一個原因可能是因為它們內部的佈線。電線可能已經鬆動或彼此斷開,這會導致耳機不同部分之間的通訊出現問題。如何在Windows11中平衡左右音訊通道

Bose Soundbar Ultra首發體驗:開箱即用的家庭劇院? Bose Soundbar Ultra首發體驗:開箱即用的家庭劇院? Feb 06, 2024 pm 05:30 PM

從我記事開始,家裡就有一對落地式的大尺寸音響,讓我一直認為電視只有配上一套完整的音響系統才能稱得上是電視。但是剛開始工作的時候,我買不起專業的家庭音響。經過查詢、了解產品定位後,我發現回音壁這個品類非常適合我,不論是音質、體積或價格都符合我的需求。因此,我決定選擇回音壁。精挑細選後,我選了2024年初Bose推出了這款全景聲回音壁產品:Bose家庭娛樂揚聲器Ultra。 (圖片來源:雷科技攝製)一般來說,想要體驗到「原汁原味」的杜比全景聲效果,需要我們在家中佈置一套經過測量、校準的環繞聲+天花板

7種方法來在Windows 11上重新設定聲音設置 7種方法來在Windows 11上重新設定聲音設置 Nov 08, 2023 pm 05:17 PM

雖然Windows能夠管理電腦上的聲音,但您可能仍希望幹預和重置聲音設置,以防您遇到音訊問題或故障。然而,隨著Microsoft在Windows11中所做的美學變化,將這些設定歸零變得更加困難。因此,讓我們深入了解如何在Windows11上找到和管理這些設定或重設它們以防出現任何問題。如何以7種簡單的方式重設Windows11中的聲音設定以下是在Windows11中重設聲音設定的七種方法,具體取決於您面臨的問題。讓我們開始吧。方法1:重設應用程式的聲音和音量設定按鍵盤上的按鈕開啟「設定」應用程式。現在點

如何在 Windows 11 上快速啟用或停用單聲道音訊 如何在 Windows 11 上快速啟用或停用單聲道音訊 Sep 22, 2023 pm 06:29 PM

如果您的某個揚聲器出現故障且不再運作,您的音質將受到影響。立即更換它可能不是一種選擇,但您可以啟用單聲道音訊設定以獲得標準化的聲音輸出。但是,預設情況下它是禁用的,因此以下是在Windows電腦上將左右通道合併為一個的方法。開啟或關閉單聲道音訊會更好嗎?這取決於情況。如果您有很多背景雜訊或主體移動太多,那麼單聲道聲音可能是您專案的最佳選擇。但是,如果您想要更好地控制聲音或每個小聲音都很重要的身臨其境的體驗,立體聲模式將是一個更好的選擇。單聲道音訊有哪些好處?聽音頻不需要太多的注意力。聽起來更

realtek高清晰音訊管理器如何設定麥克風 realtek高清晰音訊管理器如何設定麥克風 Jan 02, 2024 am 09:33 AM

win10系統是一款可以進行各種設定與調節的系統,今天小編為大家帶來的就是realtek高清晰音訊管理器怎麼設定麥克風的解決方法!有興趣的話就快來看看。 realtek高清晰音訊管理器怎麼設定麥克風:1、在桌面左下角的顯示隱藏圖示中找到「realtek高清晰音訊管理員」圖示。 2.點擊進入介面中,首先看到的是“揚聲器頁面”,這個介面可以透過喇叭組態調整喇叭的聲音。 3.接著是音效,你可以選擇自己想要的音效的環境以及「均衡器,流行、搖滾、俱樂部」等等。 4.接著是室內矯正音質,室內空間矯正只能夠矯正“

如何啟用Win11音訊增強功能 如何啟用Win11音訊增強功能 Jan 26, 2024 am 10:54 AM

有一些小夥伴反映自己電腦中的聲音即使開到了最大,音量依舊偏小,這時就可以將系統中的增強音頻功能打開,那麼具體應該怎麼操作呢,接下來小編就給大家詳細介紹一下Win11增強音訊的開啟方法,有需要的小夥伴可以來看看。開啟方法:1、右鍵點選左下角工作列中的開始,選擇選項清單中的"設定"。 2、進入到新的介面後,點選"系統"中的"聲音"選項。 3.隨後點擊"高級"中的"所有聲音設備"。 4、然後選擇"輸出裝置"中的"耳機"或"喇叭"。 5、最後找到"增強音訊",並將其右側的開關按鈕打開就可以了。

使用Python存取各種音訊和視訊檔案的元數據 使用Python存取各種音訊和視訊檔案的元數據 Sep 05, 2023 am 11:41 AM

我們可以使用Mutagen和Python中的eyeD3模組存取音訊檔案的元資料。對於視訊元數據,我們可以使用影片和Python中的OpenCV庫。元資料是提供有關其他資料(例如音訊和視訊資料)的資訊的資料。音訊和視訊檔案的元資料包括檔案格式、檔案解析度、檔案大小、持續時間、位元率等。透過存取這些元數據,我們可以更有效地管理媒體並分析元數據以獲得一些有用的信息。在本文中,我們將了解Python提供的一些用於存取音訊和視訊檔案元資料的庫或模組。存取音頻元資料一些用於存取音訊檔案元資料的庫是-使用誘變

See all articles