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