HTML5+JavaScript调用摄像头拍照或者摄像

时间： 2023-07-10 admin IT培训

HTML5+JavaScript调用摄像头拍照或者摄像推荐度：
相关推荐

调用摄像头拍照或者摄像有多种方法，之前介绍过两种：

HTML5 <input type="file">标签直接调用：

微信小程序相机组件实现：

现在我们来看一下第三种方法：

用HTML5和javascript来做，浏览器支持IE9+。

布局很简单，就是设置一个"拍照"按钮的监听器，调用摄像头video，然后显示出来画像（需要用户权限）。

首先，要允许网页宽度自动调整，我们在网页头添加viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1" />

接下来我们需要获取用户多媒体，就是getUserMedia：

使用这个getUserMedia API 可以访问多媒体设备，利用该API与<video>和canvas元素，可以在浏览器里捕获图片。

除了视频，还有音频，所以接口要变成类似{video:true, audio:false},可以设定音频和视频的开关。

navigator对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用的配置。

如果浏览器检测不到摄像头，则会提示：

Error ! [object NavigatorUserMediaError]

现在我们开始看代码：

<!DOCTYPE html>  
<head>  <title>HTML5 GetUserMedia Demo</title>  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
</head>  
<body>  <input type="button" title="开启摄像头" value="开启摄像头" οnclick="getMedia();" /><br />  <video height="120px" autoplay="autoplay"></video><hr />  <input type="button" title="拍照" value="拍照" οnclick="getPhoto();" /><br />  <canvas id="canvas1" height="120px" ></canvas><hr />  <input type="button" title="视频" value="视频" οnclick="getVedio();" /><br />  <canvas id="canvas2" height="120px"></canvas>  <script type="text/javascript">  var video = document.querySelector('video');  var audio, audioType;  var canvas1 = document.getElementById('canvas1');  var context1 = canvas1.getContext('2d');  var canvas2 = document.getElementById('canvas2');  var context2 = canvas2.getContext('2d');  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;  window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  var exArray = []; //存储设备源ID  MediaStreamTrack.getSources(function (sourceInfos) {  for (var i = 0; i != sourceInfos.length; ++i) {  var sourceInfo = sourceInfos[i];  //这里会遍历audio,video，所以要加以区分  if (sourceInfo.kind === 'video') {  exArray.push(sourceInfo.id);  }  }  });  function getMedia() {  if (navigator.getUserMedia) {  navigator.getUserMedia({  'video': {  'optional': [{  'sourceId': exArray[1] //0为前置摄像头，1为后置  }]  },  'audio':true  }, successFunc, errorFunc);    //success是获取成功的回调函数  }  else {  alert('Native device media streaming (getUserMedia) not supported in this browser.');  }  }  function successFunc(stream) {  //alert('Succeed to get media!');  if (video.mozSrcObject !== undefined) {  //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持  video.mozSrcObject = stream;  }  else {  video.src = window.URL && window.URL.createObjectURL(stream) || stream;  }  //video.play();  // 音频  audio = new Audio();  audioType = getAudioType(audio);  if (audioType) {  audio.src = 'polaroid.' + audioType;  audio.play();  }  }  function errorFunc(e) {  alert('Error！'+e);  }  // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果  function drawVideoAtCanvas(video,context) {  window.setInterval(function () {  context.drawImage(video, 0, 0,90,120);  }, 60);  }  //获取音频格式  function getAudioType(element) {  if (element.canPlayType) {  if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {  return ('aac');  } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {  return ("ogg");  }  }  return false;  }  // vedio播放时触发，绘制vedio帧图像到canvas  
//        video.addEventListener('play', function () {  
//            drawVideoAtCanvas(video, context2);  
//        }, false);  //拍照  function getPhoto() {  context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。  }  //视频  function getVedio() {  drawVideoAtCanvas(video, context2);  }  </script>  
</body>