html5调用摄像头,录音功能

xiluoenm 2016-06-11

    HTML5 中的WebRTC提供了调用摄像头,录音等功能,WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。

getUserMedia介绍:

   navigator.getUserMedia方法目前主要用于,在浏览器中获取音频(通过麦克风)和视频(通过摄像头),将来可以用于获取任意数据流,比如光盘和传感器。但是还是存在一定的兼容问题的,如下:一片红啊


html5调用摄像头,录音功能
 

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之类的,然后在浏览器中输入地址就可以了,它会提示你是否调用摄像头,

 
html5调用摄像头,录音功能
 

相关推荐