前端必須理解知識點(diǎn)—HTML5音視頻處理

天小編將分享前端開發(fā)中必學(xué)的知識點(diǎn)，HTML5中關(guān)于音視頻處理

視頻處理

基本內(nèi)容：目前國內(nèi)的視頻網(wǎng)站 - Flash技術(shù)，HTML5的視頻處理首先替換Flash技術(shù)，支持的視頻格式有：

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

2.OGG - .ogv 手機(jī)端的視頻格式。

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

問：如何處理視頻？

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

！！需要注意的是：視頻的寬高比不會改變，在video元素內(nèi)定義不支持的提示內(nèi)容。

如果要想在<video>元素引入多個格式視頻文件，那么就使用<source/>，使用這種方式能夠?qū)崿F(xiàn)各個瀏覽器的兼容性，語法規(guī)范：

<video>

</video>

<video>元素的屬性

autoplay屬性 - 自動播放

controls屬性 - 提供控制面板

loop屬性 - 循環(huán)播放

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

preload屬性 - 預(yù)加載(視頻)

none - 不加載

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

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

video的高級用法方法

play() - 播放視頻

pause() - 暫停視頻

load() - 加載視頻

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

事件

play - 播放視頻時觸發(fā)

pause - 暫停視頻時觸發(fā)

ended - 結(jié)束播放時觸發(fā)

error - 播放錯誤時觸發(fā)

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

canplaythrough - 整體播放順利時觸發(fā)

progress - 下載進(jìn)度

屬性

paused - 判斷視頻當(dāng)前是否暫停，如果暫停狀態(tài),返回true

ended - 判斷視頻當(dāng)前是否結(jié)束播放，如果結(jié)束播放,返回true

duration - 當(dāng)前視頻的總時長

currentTime - 獲取或設(shè)置當(dāng)前視頻播放的位置

音頻處理

基本內(nèi)容：目前HTML頁面實(shí)現(xiàn)音頻處理，將Windows Media Player播放器,內(nèi)置頁面中，使用Flash技術(shù)實(shí)現(xiàn)音頻處理，HTML5實(shí)現(xiàn)音頻處理支持的音頻格式有：

1.mp3 - 感謝百度(MP3)

2.ogg

3.wav

問：如何使用音頻？

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

<audio>元素的屬性

src屬性 - 引入音頻文件，作用 - 實(shí)現(xiàn)頁面背景音樂播放

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

source元素

autoplay - 自動播放

controls - 提供控制面板

loop - 循環(huán)播放

preload - 預(yù)加載

audio的高級用法

事件

play - 播放音頻時觸發(fā)

方法

play() - 播放音頻

pause() - 暫停音頻

屬性

paused - true,表示暫停狀態(tài)

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

么是WebRTC?

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

音視頻采集基本概念

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

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

幀率：現(xiàn)在的攝像頭功能已非常強(qiáng)大，一般情況下，一秒鐘可以采集 30 張以上的圖像，一些好的攝像頭甚至可以采集 100 張以上。我們把攝像頭一秒鐘采集圖像的次數(shù)稱為幀率。幀率越高，視頻就越平滑流暢。然而，在直播系統(tǒng)中一般不會設(shè)置太高的幀率，因?yàn)閹试礁撸嫉木W(wǎng)絡(luò)帶寬就越多。

分辨率：攝像頭除了可以設(shè)置幀率之外，還可以調(diào)整分辨率。我們常見的分辨率有 2K、1080P、720P、420P 等。分辨率越高圖像就越清晰，但同時也帶來一個問題，即占用的帶寬也就越多。所以，在直播系統(tǒng)中，分辨率的高低與網(wǎng)絡(luò)帶寬有緊密的聯(lián)系。也就是說，分辨率會跟據(jù)你的網(wǎng)絡(luò)帶寬進(jìn)行動態(tài)調(diào)整。

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

麥克風(fēng)：用于采集音頻數(shù)據(jù)。它與視頻一樣，可以指定一秒內(nèi)采樣的次數(shù)，稱為采樣率。每個采樣用幾個 bit 表示，稱為采樣位深或采樣大小。

軌（Track）：WebRTC 中的“軌”借鑒了多媒體的概念。火車軌道的特性你應(yīng)該非常清楚，兩條軌永遠(yuǎn)不會相交。“軌”在多媒體中表達(dá)的就是每條軌數(shù)據(jù)都是獨(dú)立的，不會與其他軌相交，如 MP4 中的音頻軌、視頻軌，它們在 MP4 文件中是被分別存儲的。
流（Stream）：可以理解為容器。在 WebRTC 中，“流”可以分為媒體流（MediaStream）和數(shù)據(jù)流（DataStream）。其中，媒體流可以存放 0 個或多個音頻軌或視頻軌；數(shù)據(jù)流可以存 0 個或多個數(shù)據(jù)軌。

音視頻采集

相關(guān)學(xué)習(xí)資料推薦，點(diǎn)擊下方鏈接免費(fèi)報名，先碼住不迷路~】

音視頻免費(fèi)學(xué)習(xí)地址：https://xxetb.xet.tech/s/2cGd0

【免費(fèi)分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點(diǎn)擊788280672加群免費(fèi)領(lǐng)取~

1. getUserMedia 方法

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

// 參數(shù)對于音視頻的描述
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 調(diào)用成功，則可以通過 Promise 獲得 MediaStream 對象，也就是說現(xiàn)在我們已經(jīng)從音視頻設(shè)備中獲取到音視頻數(shù)據(jù)了。
如果調(diào)用失敗，比如用戶拒絕該 API 訪問媒體設(shè)備（音頻設(shè)備、視頻設(shè)備），或者要訪問的媒體設(shè)備不可用，則返回的 Promise 會得到 PermissionDeniedError 或 NotFoundError 等錯誤對象。

如何使用 getUserMedia API

1.創(chuàng)建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，表示當(dāng)頁面加載時可以自動播放視頻；
playsinline，表示在 HTML5 頁面內(nèi)播放視頻，而不是使用系統(tǒng)播放器播放視頻

2.創(chuàng)建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 代碼中首先執(zhí)行 getUserMedia() 方法，該方法會請求訪問 Camera。如果是第一次請求 Camera（攝像頭），瀏覽器會向用戶彈出提示窗口，讓用戶決定是否可以訪問攝像頭。如果用戶允許訪問，且設(shè)備可用，則調(diào)用 gotLocalMediaStream 方法。

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

getUserMedia API 控制設(shè)備的參數(shù)及其含義如下：

原文 WebRTC（一）getUserMedia 使用

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

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

1.HTMLFormElement.reportValidity()

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

句法（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交互，跟隨鼠標(biāo)3D旋轉(zhuǎn)
下一篇：WebBrowser控件網(wǎng)頁數(shù)據(jù)抓取（I） - EX

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。