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

html5调用摄像头，录音功能

猜你喜欢