前端必須理解知識點—HTML5音視頻處理

天小編將分享前端開發中必學的知識點，HTML5中關于音視頻處理

視頻處理

基本內容：目前國內的視頻網站 - Flash技術，HTML5的視頻處理首先替換Flash技術，支持的視頻格式有：

1.MP4 - .mp4 目前比較主流的視頻格式。

2.OGG - .ogv 手機端的視頻格式。

3.WebM - 目前唯一一個支持超高清視頻格式，該視頻格式出自Goggle公司。

問：如何處理視頻？

答：<video>元素 - 引入單個格式視頻文件，它由自己的屬性組成。 src屬性 - 指定視頻文件的地址， width屬性 - 設置視頻寬度， height屬性 - 設置視頻高度。語法規范：<video src="視頻文件路徑" width=“100px”>

?。⌒枰⒁獾氖牵阂曨l的寬高比不會改變，在video元素內定義不支持的提示內容。

如果要想在<video>元素引入多個格式視頻文件，那么就使用<source/>，使用這種方式能夠實現各個瀏覽器的兼容性，語法規范：

<video>

</video>

<video>元素的屬性

autoplay屬性 - 自動播放

controls屬性 - 提供控制面板

loop屬性 - 循環播放

poster屬性 - 播放之前顯示一張圖片

preload屬性 - 預加載(視頻)

none - 不加載

auto - (默認值)自動(盡快加載完畢)

metadata - 只加載除視頻之外的信息(寬和高)

video的高級用法方法

play() - 播放視頻

pause() - 暫停視頻

load() - 加載視頻

canPlayType() - 判斷是否支持該格式

事件

play - 播放視頻時觸發

pause - 暫停視頻時觸發

ended - 結束播放時觸發

error - 播放錯誤時觸發

canplay - 可播放時觸發(不考慮整體)

canplaythrough - 整體播放順利時觸發

progress - 下載進度

屬性

paused - 判斷視頻當前是否暫停，如果暫停狀態,返回true

ended - 判斷視頻當前是否結束播放，如果結束播放,返回true

duration - 當前視頻的總時長

currentTime - 獲取或設置當前視頻播放的位置

音頻處理

基本內容：目前HTML頁面實現音頻處理，將Windows Media Player播放器,內置頁面中，使用Flash技術實現音頻處理，HTML5實現音頻處理支持的音頻格式有：

1.mp3 - 感謝百度(MP3)

2.ogg

3.wav

問：如何使用音頻？

答： audio元素 - 引入一種音頻格式。

<audio>元素的屬性

src屬性 - 引入音頻文件，作用 - 實現頁面背景音樂播放

audio元素 - 引入多種音頻格式

source元素

autoplay - 自動播放

controls - 提供控制面板

loop - 循環播放

preload - 預加載

audio的高級用法

事件

play - 播放音頻時觸發

方法

play() - 播放音頻

pause() - 暫停音頻

屬性

paused - true,表示暫停狀態

?。?需要特別注意，IE 8及之前的版本都不支持

么是WebRTC?

WebRTC，網頁即時通信（Web Real-Time Communication），實現了基于網頁的視頻會議。WebRTC具有免安裝，方便接入的特點，它不需要安裝任何插件，在瀏覽器上就可以實現網頁端的實時通信。在瀏覽器之間快速地實現音視頻通信。
WebRTC是一個開源項目，旨在使得瀏覽器能為實時通信（RTC）提供簡單的JavaScript接口。說的簡單明了一點就是讓瀏覽器提供JS的即時通信接口。這個接口所創立的信道并不是像WebSocket一樣，打通一個瀏覽器與WebSocket服務器之間的通信，而是通過一系列的信令，建立一個瀏覽器與瀏覽器之間（peer-to-peer）的信道，這個信道可以發送任何數據，而不需要經過服務器。并且WebRTC通過實現MediaStream，通過瀏覽器調用設備的攝像頭、話筒，使得瀏覽器之間可以傳遞音頻和視頻。

音視頻采集基本概念

在正式介紹 JavaScript 采集音視頻數據的 API 之前，你還需要了解一些基本概念。這些概念雖然都不難理解，但在后面講解 API 時都會用到它們，很是重要，所以在這里我還是給你著重匯總和強調下。

攝像頭 ：用于捕捉（采集）圖像和視頻。

幀率：現在的攝像頭功能已非常強大，一般情況下，一秒鐘可以采集 30 張以上的圖像，一些好的攝像頭甚至可以采集 100 張以上。我們把攝像頭一秒鐘采集圖像的次數稱為幀率。幀率越高，視頻就越平滑流暢。然而，在直播系統中一般不會設置太高的幀率，因為幀率越高，占的網絡帶寬就越多。

分辨率：攝像頭除了可以設置幀率之外，還可以調整分辨率。我們常見的分辨率有 2K、1080P、720P、420P 等。分辨率越高圖像就越清晰，但同時也帶來一個問題，即占用的帶寬也就越多。所以，在直播系統中，分辨率的高低與網絡帶寬有緊密的聯系。也就是說，分辨率會跟據你的網絡帶寬進行動態調整。

寬高比：分辨率一般分為兩種寬高比，即 16:9 或 4:3。4:3 的寬高比是從黑白電視而來，而 16:9 的寬高比是從顯示器而來?，F在一般情況下都采用 16:9 的比例。

麥克風：用于采集音頻數據。它與視頻一樣，可以指定一秒內采樣的次數，稱為采樣率。每個采樣用幾個 bit 表示，稱為采樣位深或采樣大小。

軌（Track）：WebRTC 中的“軌”借鑒了多媒體的概念。火車軌道的特性你應該非常清楚，兩條軌永遠不會相交?！败墶痹诙嗝襟w中表達的就是每條軌數據都是獨立的，不會與其他軌相交，如 MP4 中的音頻軌、視頻軌，它們在 MP4 文件中是被分別存儲的。
流（Stream）：可以理解為容器。在 WebRTC 中，“流”可以分為媒體流（MediaStream）和數據流（DataStream）。其中，媒體流可以存放 0 個或多個音頻軌或視頻軌；數據流可以存 0 個或多個數據軌。

音視頻采集

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：https://xxetb.xet.tech/s/2cGd0

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

1. getUserMedia 方法

在瀏覽器中訪問音視頻設備非常簡單，只要調用 getUserMedia 這個 API 即可。該 API 的基本格式如下：

// 參數對于音視頻的描述
const constraints={
    video: {
        frameRate: {min: 20},  //視頻的幀率最小 20 幀每秒
        width: {min: 640, ideal: 1280}, //最小寬度640，理想寬度1280
        height: {min: 360, ideal: 720},//最小高度640，理想高度1280
        aspectRatio: 16/9 //寬高比是 16:9
    },
    audio: {
        echoCancellation: true, //音頻開啟回音消除
        noiseSuppression: true, // 開啟降噪
        autoGainControl: true // 開啟自動增益功能
    }
};

let promise=navigator.mediaDevices.getUserMedia(constraints);

它返回一個 Promise 對象。

如果 getUserMedia 調用成功，則可以通過 Promise 獲得 MediaStream 對象，也就是說現在我們已經從音視頻設備中獲取到音視頻數據了。
如果調用失敗，比如用戶拒絕該 API 訪問媒體設備（音頻設備、視頻設備），或者要訪問的媒體設備不可用，則返回的 Promise 會得到 PermissionDeniedError 或 NotFoundError 等錯誤對象。

如何使用 getUserMedia API

1.創建html文件

<!DOCTYPE html>
<html>
    <head>
        <title>Realtime communication with WebRTC</title>
        <link rel="stylesheet", href="css/client.css" />
    </head>
    <body>
        <h1>Realtime communication with WebRTC </h1>
        <video autoplay playsinline></video>
        <script src="js/client.js"></script>
    </body>
</html>

 <video autoplay playsinline></video>

autoplay，表示當頁面加載時可以自動播放視頻；
playsinline，表示在 HTML5 頁面內播放視頻，而不是使用系統播放器播放視頻

2.創建client.js在html中引入

const mediaStreamContrains={
    video: true
};
const localVideo=document.querySelector('video');
function gotLocalMediaStream(mediaStream){
    localVideo.srcObject=mediaStream;
}
function handleLocalMediaStreamError(error){
    console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
    gotLocalMediaStream
).catch(
    handleLocalMediaStreamError
);

JavaScript 代碼中首先執行 getUserMedia() 方法，該方法會請求訪問 Camera。如果是第一次請求 Camera（攝像頭），瀏覽器會向用戶彈出提示窗口，讓用戶決定是否可以訪問攝像頭。如果用戶允許訪問，且設備可用，則調用 gotLocalMediaStream 方法。

在 gotLocalMediaStream 方法中，其輸入參數為 MediaStream 對象，該對象中存放著 getUserMedia 方法采集到的音視頻軌。我們將它作為視頻源賦值給 HTML5 的 video 標簽的 srcObject 屬性。這樣在 HTML 頁面加載之后，就可以在該頁面中看到攝像頭采集到的視頻數據了。

getUserMedia API 控制設備的參數及其含義如下：

原文 WebRTC（一）getUserMedia 使用

責制定Web標準的World Wide Web Consortium (W3C)正式發表了HTML5.1推薦規格，規格定義了HTML語言第五大版本的第一個小版本。W3C已在著手制定下個版本HTML5.2。大部分瀏覽器已經實現或即將實現HTML5.1引入的新特性和變化。根據HTML5.1實現報告，Edge/IE在實現進展上要落在Chrome和Firefox后面。

下面給大家介紹下新功能。

1.HTMLFormElement.reportValidity()

如果元素的子控件滿足其驗證約束，HTMLFormElement.reportValidity（）方法將返回true。返回Whenfalse時，對每個無效子項觸發可取消的無效事件，并將驗證問題報告給用戶。

句法（syntax）

HTMLFormElement.reportValidity()

例子：

document.forms["myform"].addEventListener('invalid', function() {
//Optional response here.
}, false);
document.forms["myform"].addEventListener('submit', function() {
document.forms["myform"].reportValidity();
}, false);

今天筆記本沒有電了，只能到這了，還有更多的看大家興趣了，大概列下：HTMLMediaElement.fastseek()

HTMLElement.forceSpellcheck()

ImageBitmap interface

registerProtocolHandler()

XMLDocument interface

Restore <a rev="">

在線咨詢

上一篇：前端CSS-3D交互，跟隨鼠標3D旋轉
下一篇：WebBrowser控件網頁數據抓?。↖） - EX

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。