摘要：比如就會(huì)報(bào)出警告，并執(zhí)行出錯(cuò)。視頻的寬高，并不會(huì)因?yàn)樘顚?xiě)的數(shù)值比例不合法而失真。通過(guò)綁定事件，來(lái)獲取視頻片段數(shù)據(jù)，并在內(nèi)存中累積。執(zhí)行之后會(huì)停止觸發(fā)事件。錄制結(jié)束后，把累計(jì)的片段數(shù)據(jù)保存為對(duì)象，并從瀏覽器下載存為視頻文件。

HTML5的權(quán)限越來(lái)越大了，瀏覽器可以直接調(diào)用攝像頭、麥克風(fēng)了，好激動(dòng)啊。我們要用純潔的HTML代碼造出自己的天地。

本篇介紹的栗子 都是在chrome 47 版本以上的，低版本的可能會(huì)出現(xiàn)白屏和錯(cuò)誤。

隨著Chrome版本的升高，安全性問(wèn)題也越來(lái)越被重視，較新版本的Chrome瀏覽器在調(diào)用一些API時(shí)需要頁(yè)面處在安全環(huán)境中。本篇文章所介紹的API函數(shù)，都需要在安全環(huán)境中執(zhí)行。如果處在非安全環(huán)境下 ( http頁(yè)面 ) 這些API就會(huì)有意想不到的問(wèn)題。

比如 getUserMedia()就會(huì)報(bào)出警告，并執(zhí)行出錯(cuò)。而在設(shè)備枚舉enumerateDevices()時(shí)，雖然不會(huì)報(bào)錯(cuò)，但是他隱藏了設(shè)備label。

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

根據(jù)谷歌的意思，常用的安全環(huán)境有如下

http://localhost

http://127.0.0.1

https 開(kāi)頭的地址頁(yè)面

如果你做了一個(gè)視頻測(cè)試的頁(yè)面，想嘚瑟給局域網(wǎng)的其他人，但是又沒(méi)有域名證書(shū)怎么辦？
這時(shí)候只能通過(guò)修改其他人的hosts文件了
比如你的測(cè)試服務(wù)器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：

#localhost 127.0.0.1
localhost 192.168.2.18

當(dāng)使用別人的Chrome瀏覽器訪(fǎng)問(wèn) http://localhost/[getUserMedi...時(shí)，就會(huì)順利的執(zhí)行這些API了。

但是移動(dòng)端的瀏覽器并不認(rèn)localhost，就算你修改了hosts ，移動(dòng)端的瀏覽器根本不理你，解析都不解析。
所以想在手機(jī)上測(cè)試，只能老老實(shí)實(shí)申請(qǐng)個(gè)證書(shū)了。

在開(kāi)啟攝像頭之前，先要把可以使用的麥克風(fēng)和攝像頭 ( 輸入設(shè)備 ) 列出來(lái)，如果沒(méi)有這兩樣設(shè)備也就無(wú)法繼續(xù)。

代碼如下:

 錄音設(shè)備: 

  



 錄影設(shè)備: 

  

效果如下圖，和瀏覽器自己獲取的一模一樣。

注意：上圖的實(shí)例中，瀏覽器地址欄最右邊的攝像頭標(biāo)識(shí)是需要使用 getUserMedia()函數(shù)時(shí)才會(huì)出現(xiàn)。

這時(shí)候可以通過(guò)瀏覽器給出的菜單下拉選擇設(shè)備。

我們可以通過(guò)代碼來(lái)指定使用哪個(gè)攝像頭和麥克風(fēng)設(shè)備。
也可以通過(guò)代碼設(shè)置視頻的寬、高和幀率。

代碼如下：

輸出的視頻流通過(guò)blob對(duì)象鏈接綁定到video標(biāo)簽輸出。

這個(gè)deviceId就是從上文設(shè)備枚舉 enumerateDevices() 獲取到的。
兩種設(shè)備，如果有一個(gè)deviceId填寫(xiě)不正確，就會(huì)報(bào)出一個(gè)DevicesNotFoundError的錯(cuò)誤。而且一旦指定了設(shè)備后，瀏覽器自己的設(shè)備選擇就會(huì)變成灰色不可選。

視頻的寬高，并不會(huì)因?yàn)樘顚?xiě)的數(shù)值比例不合法而失真。
比如你設(shè)定了寬度30，高度100，那么他會(huì)從視頻中心截取 30x100 的畫(huà)面，而不是把原畫(huà)面擠壓到這個(gè)30x100的尺寸。

效果如下：

如果您的預(yù)覽一片漆黑，或者只有一個(gè)小黑點(diǎn)，那么說(shuō)明您的攝像頭正在被占用...

吐槽：這個(gè)getUserMedia()函數(shù)的參數(shù)，w3的官方文檔鏈接如下：
https://www.w3.org/TR/mediaca...
可是Chrome并沒(méi)有遵循它，而且差距還挺大...

Chrome瀏覽器是大力推廣webm的視頻格式的?？梢杂?b>MediaRecorder.isTypeSupported("video/webm")來(lái)測(cè)試是否支持這種類(lèi)型的編碼。如果返回true，那么我們錄制的視頻就可以被保存為這種指定的格式。如果不指定，那么將會(huì)使用瀏覽器自動(dòng)指定的文件格式。文檔原話(huà)如下

If this paramater is not specified, the UA will use a platform-specific default format.

但是這個(gè)默認(rèn)值卻無(wú)法直接獲取，全靠猜...

我們使用 MediaRecorder來(lái)錄制視頻，參數(shù)是通過(guò)getUserMedia()獲取的媒體流。

通過(guò)綁定ondataavailable事件，來(lái)獲取視頻片段數(shù)據(jù)，并在內(nèi)存中累積。

錄制的開(kāi)始和結(jié)束分別使用 start和stop 函數(shù)。

執(zhí)行start之后會(huì)周期性觸發(fā)ondataavailable事件。

執(zhí)行stop之后會(huì)停止觸發(fā)ondataavailable事件。

錄制結(jié)束后，把累計(jì)的片段數(shù)據(jù)保存為blob對(duì)象，并從瀏覽器下載存為視頻文件。

代碼如下：

注意：本例并沒(méi)有填寫(xiě)視頻文件頭，所以保存出來(lái)的視頻文件沒(méi)有時(shí)間軌，無(wú)法快進(jìn)和跳躍?？梢杂酶袷焦S(chǎng)轉(zhuǎn)

“莫基了”上面有一個(gè)錄制音頻的例子 傳送門(mén)

這篇文章的DEMO請(qǐng)戳 這里

相關(guān)閱讀

多屏互動(dòng)——H5中級(jí)進(jìn)階
前端，想說(shuō)愛(ài)你不容易！
無(wú)需Flash實(shí)現(xiàn)圖片裁剪——HTML5中級(jí)進(jìn)階

作者信息
作者來(lái)自力譜宿云 LeapCloud 團(tuán)隊(duì)_UX成員：王詩(shī)詩(shī) 【原創(chuàng)】
力譜宿云 LeapCloud 團(tuán)隊(duì)首發(fā)：https://blog.maxleap.cn/archi...

歡迎關(guān)注微信訂閱號(hào)：MaxLeap_yidongyanfa