整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
臉識別迎來重大進展。
人臉識別的最新消息：人臉識別是基于人的臉部特征信息進行身份識別的一種生物識別技術。現成的識別系統可以通過攝像頭捕捉含有人臉的圖像或視頻流，并自動在圖像中檢測和跟蹤人臉，對檢測到的人臉進行識別。識別結果可以輸出姓名和置信度信息，以及根據置信度范圍判斷是否可以識別該人臉。
現代Web應用程序可以通過結合HTML5和JavaScript庫實現調用手機攝像頭并進行人臉識別功能。通過獲取攝像頭實時視頻流并使用第三方庫如face-apis或TensorFIowjs處理視頻流中的圖像數據，實現人臉識別。也可在Linux環境下基于OpenCv和Socket實現人臉識別系統。
人臉識別功能也被廣泛應用在不同的設備中，如夏普推出的H3-FV3D人臉識別智能門鎖。門鎖配備了主攝和超廣角攝像頭，可以識別1.3-2米高度的人類。然而用人臉識別技術的同時也需要考慮到隱私保護和信息安全的問題。因此有建議在直播打賞功能中引入后臺人臉識別以識別用戶身份。
但人臉識別技術的應用也引發了社會的廣泛關注。一些人提出取消旅游場景中過度人臉識別的提案，認為人臉識別系統的使用降低了服務效率，增加了企業經營成本，且無明確法律依據。
總的來說，人臉識別技術是現代科技發展的重要產物，具有很高的實用性和創新性，但同時也需要兼顧到用戶的隱私權和信息安全。
TML5的權限越來越大了，瀏覽器可以直接調用攝像頭、麥克風了，好激動啊。我們要用純潔的HTML代碼造出自己的天地。
視頻采集
本篇介紹的栗子 都是在chrome 47 版本以上的，低版本的可能會出現白屏和錯誤。
1.安全環境
隨著Chrome版本的升高，安全性問題也越來越被重視，較新版本的Chrome瀏覽器在調用一些API時需要頁面處在安全環境中。本篇文章所介紹的API函數，都需要在安全環境中執行。如果處在非安全環境下 ( http頁面 ) 這些API就會有意想不到的問題。
比如 getUserMedia()就會報出警告，并執行出錯。
而在設備枚舉enumerateDevices()時，雖然不會報錯，但是他隱藏了設備label。
注意：第一次在一個安全頁面下執行enumerateDevices()時也會隱藏label，在允許使用攝像頭等設備后，第二次執行才會顯示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.
根據谷歌的意思，常用的安全環境有如下
http://localhost
http://127.0.0.1
https 開頭的地址頁面
如果你做了一個視頻測試的頁面，想嘚瑟給局域網的其他人，但是又沒有域名證書怎么辦？
這時候只能通過修改其他人的hosts文件了
比如你的測試服務器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：
#localhost 127.0.0.1
localhost 192.168.2.18
當使用別人的Chrome瀏覽器訪問 http://localhost/[getUserMediaTestPage]時，就會順利的執行這些API了。
但是移動端的瀏覽器并不認localhost，就算你修改了hosts ，移動端的瀏覽器根本不理你，解析都不解析。
所以想在手機上測試，只能老老實實申請個證書了。
2.設備枚舉
在開啟攝像頭之前，先要把可以使用的麥克風和攝像頭 ( 輸入設備 ) 列出來，如果沒有這兩樣設備也就無法繼續。
代碼如下:
<label for="audioDevice"> 錄音設備: </label>
<select id="audioDevice">
</select>
<br>
<label for="videoDevice"> 錄影設備: </label>
<select id="videoDevice">
</select>
<script>
navigator.mediaDevices.enumerateDevices().then(function (data) {
data.forEach(function (item) {
if(item.kind=="audioinput"){ //麥克風
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>
效果如下圖，和瀏覽器自己獲取的一模一樣。
注意：上圖的實例中，瀏覽器地址欄最右邊的攝像頭標識是需要使用 getUserMedia()函數時才會出現。
<script>
var getUserMedia=navigator.webkitGetUserMedia; //Chrome瀏覽器的方法
getUserMedia.call(navigator, {
video:true, // 開啟音頻
audio:true // 開啟視頻
}, function(stream){
console.log(stream); // 成功獲取媒體流
}, function(error){
//處理媒體流創建失敗錯誤
});
</script>
這時候可以通過瀏覽器給出的菜單下拉選擇設備。
3.設置參數，預覽
我們可以通過代碼來指定使用哪個攝像頭和麥克風設備。
也可以通過代碼設置視頻的寬、高和幀率。
代碼如下：
<video id="video" autoplay></video> <!-- 一定要有 autoplay -->
<script>
var getUserMedia=navigator.webkitGetUserMedia ;
getUserMedia.call(navigator, {
"audio":{
"mandatory":{
"sourceId":"" // 指定設備的 deviceId
}
},
"video":{
"optional":[
{"minWidth":400},
{"maxWidth":400}, // 數字類型，固定寬度
{"minHeight":220}，
{"maxHeight":220}, // 數字類型，固定高度
{"frameRate":"12"} // 幀率
],"mandatory":{
"sourceId":"" // 指定設備的 deviceId
}
}
}, function(stream){
//綁定本地媒體流到video標簽用于輸出
document.getElementById("video").src=URL.createObjectURL(stream);
}, function(error){
//處理媒體流創建失敗錯誤
});
</script>
輸出的視頻流通過blob對象鏈接綁定到video標簽輸出。
這個deviceId就是從上文設備枚舉 enumerateDevices() 獲取到的。
兩種設備，如果有一個deviceId填寫不正確，就會報出一個DevicesNotFoundError的錯誤。
而且一旦指定了設備后，瀏覽器自己的設備選擇就會變成灰色不可選。
視頻的寬高，并不會因為填寫的數值比例不合法而失真。
比如你設定了寬度30，高度100，那么他會從視頻中心截取 30x100 的畫面，而不是把原畫面擠壓到這個30x100的尺寸。
效果如下：
如果您的預覽一片漆黑，或者只有一個小黑點，那么說明您的攝像頭正在被占用...
吐槽：這個getUserMedia()函數的參數，w3的官方文檔鏈接如下：
https://www.w3.org/TR/mediacapture-streams/
可是Chrome并沒有遵循它，而且差距還挺大...
視頻保存
1. 格式支持
Chrome瀏覽器是大力推廣webm的視頻格式的。可以用MediaRecorder.isTypeSupported("video/webm")來測試是否支持這種類型的編碼。
如果返回true，那么我們錄制的視頻就可以被保存為這種指定的格式。
如果不指定，那么將會使用瀏覽器自動指定的文件格式。文檔原話如下
If this paramater is not specified, the UA will use a platform-specific default format.
但是這個默認值卻無法直接獲取，全靠猜...
2. 視頻錄制 MediaRecorder
我們使用 MediaRecorder來錄制視頻，參數是通過getUserMedia()獲取的媒體流。
通過綁定ondataavailable事件，來獲取視頻片段數據，并在內存中累積。
錄制的開始和結束分別使用 start和stop 函數。
執行start之后會周期性觸發ondataavailable事件。
執行stop之后會停止觸發ondataavailable事件。
錄制結束后，把累計的片段數據保存為blob對象，并從瀏覽器下載存為視頻文件。
代碼如下：
<script>
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>
注意：本例并沒有填寫視頻文件頭，所以保存出來的視頻文件沒有時間軌，無法快進和跳躍。可以用格式工廠轉
“莫基了”上面有一個錄制音頻的例子 傳送門：http://t.cn/RvxZAeo
這篇文章的DEMO請戳 這里：http://t.cn/RVt9Q6I
?―――――――――↓―――――――――?
相關閱讀
多屏互動——H5中級進階
前端，想說愛你不容易！
無需Flash實現圖片裁剪——HTML5中級進階
作者信息
作者來自力譜宿云 LeapCloud 團隊_UX成員：王詩詩 【原創】
力譜宿云 LeapCloud 團隊首發：https://blog.maxleap.cn/archives/1197
歡迎關注微信訂閱號：MaxLeap_yidongyanfa
景介紹
** 涉及技術：vue、electron、ffmpeg、node **
關于錄屏和攝像對比了兩種方法
navigator.mediaDevices.enumerateDevices().then(devicelist=> {
// audiooutput 揚聲器
// audioinput 麥克風
// audiooutput 攝像
console.log(devicelist)
}).catch(err=> console.log(err))navigator.mediaDevices.getUserMedia(MediaStreamConstraints).then(stream=> {
videoElement.srcObject=stream; //
}, error=> console.log(error));getDisplayMedia
而Electron基于node + chromium構建，在electron需要引入desktopCapturer模塊，并在基于該模塊使用這個方法
navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream=> {
videoElement.srcObject=stream;
}, error=> console.log(error));相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】
音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發
【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~
let herf
this.recorder=new MediaRecorder(stream);
this.recorder.ondataavailable=e=> {
herf=e.data;
download.href=URL.createObjectURL(herf);
};
this.recorder.start();官網安裝包下載 ffmpeg.zeranoe.com/builds/
一些基本參數
-formats 輸出所有可用格式
-f fmt 指定格式(音頻或視頻格式)
-i filename 指定輸入文件名，在linux下當然也能指定:0.0(屏幕錄制)或攝像頭
-y 覆蓋已有文件
-t duration 記錄時長為t
-fs limit_size 設置文件大小上限
-itsoffset time_off 設置時間偏移(s)，該選項影響所有后面的輸入文件。該偏移被加到輸入文件的時戳，定義一個正偏移意味著相應的流被延遲了 offset秒。 [-]hh:mm:ss* [.xxx]的格式也支持 音 頻
-ab bitrate 設置音頻碼率
-ar freq 設置音頻采樣率
-ac channels 設置通道 缺省為1 視 頻
-b bitrate 設置比特率，缺省200kb/s
-r fps 設置幀頻 缺省25
-s size 設置幀大小 格式為WXH 缺省160X128.下面的簡寫也可以直接使用：
錄屏相關命令
列出可用的設備包括音頻和攝像等等
ffmpeg -list_devices true -f dshow -i dummy
錄屏，你也可以加入關于視頻的一些基本參數來獲得你想要的文件
ffmpeg -f gdigrab -i desktop captrue.mkv -ycd進入bin文件夾后執行錄屏相關命令
關于停止錄制，雖然ffmpeg按 Q 可以停止錄制，但是我們通過代碼調用是看不到cmd命令行的而且他在錄制過程中是一直占用這個進程什么命令也無法輸入 所以這個地方我只想到一個辦法就是強制停止該進程
參考文章
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實現錄屏攝像等功能 - 掘金
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
