整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
脸识别迎来重大进展。
人脸识别的最新消息：人脸识别是基于人的脸部特征信息进行身份识别的一种生物识别技术。现成的识别系统可以通过摄像头捕捉含有人脸的图像或视频流，并自动在图像中检测和跟踪人脸，对检测到的人脸进行识别。识别结果可以输出姓名和置信度信息，以及根据置信度范围判断是否可以识别该人脸。
现代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小时内与您取得联系。
