html5调用摄像头,录音功能
HTML5 中的WebRTC提供了调用摄像头,录音等功能,WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。
getUserMedia介绍:
navigator.getUserMedia方法目前主要用于,在浏览器中获取音频(通过麦克风)和视频(通过摄像头),将来可以用于获取任意数据流,比如光盘和传感器。但是还是存在一定的兼容问题的,如下:一片红啊

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia){
alert("支持");
}else{
alert("您的浏览器不支持getUserMedia");
}getUserMedia方法接受三个参数
navigator.getUserMedia({
video : true,
audio : true
},success,error);getUserMedia的第一个参数是一个对象,表示要获取哪些多媒体设备,上面的代码表示获取摄像头和麦克风;success是一个回调函数,在获取多媒体设备成功时调用;error也是一个回调函数,在取多媒体设备失败时调用。
栗子:
<!-- 调用摄像头video --> <video id="video" width="300" height="350" controls></video>
navigator.getUserMedia({
video : true
},onSuccess,onError);
//调用成功
function onSuccess(stream){
var video = document.querySelector("#video");
if(window.URL){
video.src = window.URL.createObjectURL(stream);
}else{
video.src = stream;
}
video.play();
window.URL.revokeObjectURL(stream);
}
//调用失败
function onError(error){
alert("navigator.getUserMedia error: "+error);
}运行方式:必须在服务器中运行,可以使用http-server打开,方便快捷,当然也可以说tomcat,apache之类的,然后在浏览器中输入地址就可以了,它会提示你是否调用摄像头,

相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15