3月12日人臉識(shí)別的最新信息2

臉識(shí)別迎來(lái)重大進(jìn)展。

人臉識(shí)別的最新消息：人臉識(shí)別是基于人的臉部特征信息進(jìn)行身份識(shí)別的一種生物識(shí)別技術(shù)。現(xiàn)成的識(shí)別系統(tǒng)可以通過(guò)攝像頭捕捉含有人臉的圖像或視頻流，并自動(dòng)在圖像中檢測(cè)和跟蹤人臉，對(duì)檢測(cè)到的人臉進(jìn)行識(shí)別。識(shí)別結(jié)果可以輸出姓名和置信度信息，以及根據(jù)置信度范圍判斷是否可以識(shí)別該人臉。

現(xiàn)代Web應(yīng)用程序可以通過(guò)結(jié)合HTML5和JavaScript庫(kù)實(shí)現(xiàn)調(diào)用手機(jī)攝像頭并進(jìn)行人臉識(shí)別功能。通過(guò)獲取攝像頭實(shí)時(shí)視頻流并使用第三方庫(kù)如face-apis或TensorFIowjs處理視頻流中的圖像數(shù)據(jù)，實(shí)現(xiàn)人臉識(shí)別。也可在Linux環(huán)境下基于OpenCv和Socket實(shí)現(xiàn)人臉識(shí)別系統(tǒng)。

人臉識(shí)別功能也被廣泛應(yīng)用在不同的設(shè)備中，如夏普推出的H3-FV3D人臉識(shí)別智能門(mén)鎖。門(mén)鎖配備了主攝和超廣角攝像頭，可以識(shí)別1.3-2米高度的人類(lèi)。然而用人臉識(shí)別技術(shù)的同時(shí)也需要考慮到隱私保護(hù)和信息安全的問(wèn)題。因此有建議在直播打賞功能中引入后臺(tái)人臉識(shí)別以識(shí)別用戶(hù)身份。

但人臉識(shí)別技術(shù)的應(yīng)用也引發(fā)了社會(huì)的廣泛關(guān)注。一些人提出取消旅游場(chǎng)景中過(guò)度人臉識(shí)別的提案，認(rèn)為人臉識(shí)別系統(tǒng)的使用降低了服務(wù)效率，增加了企業(yè)經(jīng)營(yíng)成本，且無(wú)明確法律依據(jù)。

總的來(lái)說(shuō)，人臉識(shí)別技術(shù)是現(xiàn)代科技發(fā)展的重要產(chǎn)物，具有很高的實(shí)用性和創(chuàng)新性，但同時(shí)也需要兼顧到用戶(hù)的隱私權(quán)和信息安全。

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

視頻采集

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

1.安全環(huán)境

隨著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。

注意：第一次在一個(gè)安全頁(yè)面下執(zhí)行enumerateDevices()時(shí)也會(huì)隱藏label，在允許使用攝像頭等設(shè)備后，第二次執(zhí)行才會(huì)顯示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. Seehttps://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/[getUserMediaTestPage]時(shí)，就會(huì)順利的執(zhí)行這些API了。

但是移動(dòng)端的瀏覽器并不認(rèn)localhost，就算你修改了hosts ，移動(dòng)端的瀏覽器根本不理你，解析都不解析。

所以想在手機(jī)上測(cè)試，只能老老實(shí)實(shí)申請(qǐng)個(gè)證書(shū)了。

2.設(shè)備枚舉

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

代碼如下:

</select>

<br>

</select>

navigator.mediaDevices.enumerateDevices().then(function (data) {

data.forEach(function (item) {

if(item.kind=="audioinput"){ //麥克風(fēng)

document.getElementById("audioDevice").innerHTML +="<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}else if(item.kind=="videoinput"){ //攝像頭

document.getElementById("videoDevice").innerHTML +="<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}

})

},function (error) {

console.log(error);

})

</script>

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

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

var getUserMedia=navigator.webkitGetUserMedia; //Chrome瀏覽器的方法

getUserMedia.call(navigator, {

video:true, // 開(kāi)啟音頻

audio:true // 開(kāi)啟視頻

}, function(stream){

console.log(stream); // 成功獲取媒體流

}, function(error){

//處理媒體流創(chuàng)建失敗錯(cuò)誤

});

</script>

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

3.設(shè)置參數(shù)，預(yù)覽

我們可以通過(guò)代碼來(lái)指定使用哪個(gè)攝像頭和麥克風(fēng)設(shè)備。

也可以通過(guò)代碼設(shè)置視頻的寬、高和幀率。

代碼如下：

var getUserMedia=navigator.webkitGetUserMedia ;

getUserMedia.call(navigator, {

"audio":{

"mandatory":{

"sourceId":"" // 指定設(shè)備的 deviceId

}

"video":{

"optional":[

{"minWidth":400},

{"maxWidth":400}, // 數(shù)字類(lèi)型，固定寬度

{"minHeight":220}，

{"maxHeight":220}, // 數(shù)字類(lèi)型，固定高度

{"frameRate":"12"} // 幀率

],"mandatory":{

"sourceId":"" // 指定設(shè)備的 deviceId

}

}, function(stream){

//綁定本地媒體流到video標(biāo)簽用于輸出

document.getElementById("video").src=URL.createObjectURL(stream);

}, function(error){

//處理媒體流創(chuàng)建失敗錯(cuò)誤

});

</script>

輸出的視頻流通過(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/mediacapture-streams/

可是Chrome并沒(méi)有遵循它，而且差距還挺大...

視頻保存

1. 格式支持

Chrome瀏覽器是大力推廣webm的視頻格式的。可以用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ú)法直接獲取，全靠猜...

2. 視頻錄制 MediaRecorder

我們使用 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ì)象，并從瀏覽器下載存為視頻文件。

代碼如下：

var getUserMedia=navigator.webkitGetUserMedia ;

var g_stream=null, g_recorder=null;

function startPreview(){

getUserMedia.call(navigator, {

video:true,

audio:true

}, function(stream){

g_stream=stream;

}, function(error){

});

}

function stopRecording(){

g_recorder.stop();

}

function startRecording(){

var chunks=[];

g_recorder=new MediaRecorder(g_stream,{mimeType:"video/webm"});

g_recorder.ondataavailable=function(e) {

chunks.push(e.data);

}

g_recorder.onstop=function(e) {

var blob=new Blob(chunks, { 'type' : 'video/webm' });

var audioURL=URL.createObjectURL(blob);

window.open(audioURL);

}

g_recorder.start();

}

</script>

注意：本例并沒(méi)有填寫(xiě)視頻文件頭，所以保存出來(lái)的視頻文件沒(méi)有時(shí)間軌，無(wú)法快進(jìn)和跳躍。可以用格式工廠(chǎng)轉(zhuǎn)

“莫基了”上面有一個(gè)錄制音頻的例子傳送門(mén)：http://t.cn/RvxZAeo

這篇文章的DEMO請(qǐng)戳這里：http://t.cn/RVt9Q6I

?―――――――――↓―――――――――?

相關(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/archives/1197
歡迎關(guān)注微信訂閱號(hào)：MaxLeap_yidongyanfa

景介紹

** 涉及技術(shù)：vue、electron、ffmpeg、node **
關(guān)于錄屏和攝像對(duì)比了兩種方法

使用HTML5的api實(shí)現(xiàn)
攝像：mediaDevices（獲取設(shè)備）+ getUserMedia（獲取流） + MediaRecorder（存儲(chǔ)）
錄屏：getDisplayMedia（獲取流） + MediaRecorder（存儲(chǔ)）
ffmpeg + node：FFmpeg是一套非常強(qiáng)大的音視頻處理的開(kāi)源工具，不多介紹，而Electron基于node和chromium，它允許使用node的API以及幾乎所有的node模塊，這意味這著我們可以調(diào)用cmd命令來(lái)操作ffmpeg實(shí)現(xiàn)錄屏和攝像錄制，當(dāng)然ffmpeg功能絕不止這點(diǎn)

HTML5實(shí)現(xiàn)

mediaDevices

用于收集系統(tǒng)上可用的多媒體輸入和輸出設(shè)備的信息
該方法調(diào)用成功返回設(shè)備列表，并傳入帶有devceID的MediaStreamConstraints對(duì)象可以指定設(shè)備獲取流媒體來(lái)源

navigator.mediaDevices.enumerateDevices().then(devicelist=> {
    // audiooutput 揚(yáng)聲器
    // audioinput  麥克風(fēng)
    // audiooutput 攝像
    console.log(devicelist)
  }).catch(err=> console.log(err))

getUserMedia

用戶(hù)提供訪(fǎng)問(wèn)硬件設(shè)備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開(kāi)發(fā)者可以在不依賴(lài)任何瀏覽器插件的條件下訪(fǎng)問(wèn)硬件媒體設(shè)備。
該方法返回視頻流，將獲取到的流賦給video標(biāo)簽可實(shí)現(xiàn)邊錄邊看

navigator.mediaDevices.getUserMedia(MediaStreamConstraints).then(stream=> {
    videoElement.srcObject=stream; // 
  }, error=> console.log(error));

getDisplayMedia

將用戶(hù)的顯示或其部分用作媒體流的來(lái)源，它允許以視頻流的形式獲取用戶(hù)的顯示器或其一部分
錄屏主要依靠該方法，和getUserMedia一樣返回一個(gè)promise對(duì)象，調(diào)用成功返回流，將這個(gè)流賦給video 元素實(shí)現(xiàn)邊錄邊看
** 需要注意的是** 如果你做的是網(wǎng)頁(yè)端在谷歌上使用這個(gè)元素，需要在chrome://flags/開(kāi)啟Experimental Web Platform features功能

而Electron基于node + chromium構(gòu)建，在electron需要引入desktopCapturer模塊，并在基于該模塊使用這個(gè)方法

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream=> {
    videoElement.srcObject=stream;
  }, error=> console.log(error));

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

音視頻免費(fèi)學(xué)習(xí)地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開(kāi)發(fā)

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

MediaRecorder

記錄和捕獲媒體，也就是視頻和音頻
getDisplayMedia 和 getUserMedia 獲取到的流都需要使用MediaRecorder存儲(chǔ)起來(lái)，并且可以保存成文件

let herf
this.recorder=new MediaRecorder(stream);
this.recorder.ondataavailable=e=> { 
  herf=e.data;
  download.href=URL.createObjectURL(herf);
};
this.recorder.start();

第二種使用ffmpeg

官網(wǎng)安裝包下載 ffmpeg.zeranoe.com/builds/

一些基本參數(shù)

-formats 輸出所有可用格式
-f fmt 指定格式(音頻或視頻格式)
-i filename 指定輸入文件名，在linux下當(dāng)然也能指定:0.0(屏幕錄制)或攝像頭
-y 覆蓋已有文件
-t duration 記錄時(shí)長(zhǎng)為t
-fs limit_size 設(shè)置文件大小上限
-itsoffset time_off 設(shè)置時(shí)間偏移(s)，該選項(xiàng)影響所有后面的輸入文件。該偏移被加到輸入文件的時(shí)戳，定義一個(gè)正偏移意味著相應(yīng)的流被延遲了 offset秒。 [-]hh:mm:ss* [.xxx]的格式也支持音頻
-ab bitrate 設(shè)置音頻碼率
-ar freq 設(shè)置音頻采樣率
-ac channels 設(shè)置通道缺省為1 視頻
-b bitrate 設(shè)置比特率，缺省200kb/s
-r fps 設(shè)置幀頻缺省25
-s size 設(shè)置幀大小格式為WXH 缺省160X128.下面的簡(jiǎn)寫(xiě)也可以直接使用：

錄屏相關(guān)命令

列出可用的設(shè)備包括音頻和攝像等等
ffmpeg -list_devices true -f dshow -i dummy

錄屏，你也可以加入關(guān)于視頻的一些基本參數(shù)來(lái)獲得你想要的文件
ffmpeg -f gdigrab -i desktop captrue.mkv -y

node調(diào)用

cd進(jìn)入bin文件夾后執(zhí)行錄屏相關(guān)命令

關(guān)于停止錄制，雖然ffmpeg按 Q 可以停止錄制，但是我們通過(guò)代碼調(diào)用是看不到cmd命令行的而且他在錄制過(guò)程中是一直占用這個(gè)進(jìn)程什么命令也無(wú)法輸入所以這個(gè)地方我只想到一個(gè)辦法就是強(qiáng)制停止該進(jìn)程

參考文章
MDN developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/en-US/docs/… developer.mozilla.org/zh-CN/docs/…
W3C w3c.github.io/mediacaptur…

原文前端使用html5、ffmpeg實(shí)現(xiàn)錄屏攝像等功能 - 掘金

在線(xiàn)咨詢(xún)

上一篇：蘋(píng)果官網(wǎng)也經(jīng)常故障？官網(wǎng)購(gòu)買(mǎi)頁(yè)面經(jīng)常錯(cuò)亂
下一篇：珍愛(ài)生命，遠(yuǎn)離Angular！

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

3月12日人臉識(shí)別的最新信息2

HTML5實(shí)現(xiàn)

mediaDevices

getUserMedia

MediaRecorder

第二種使用ffmpeg

node調(diào)用

您的項(xiàng)目需求