H5调用摄像头

来源：互联网发布：南平广电网络招聘编辑：程序博客网时间：2024/05/17 23:24

看完一个坑爹的，然后发现还是靠自己靠谱。于是乎，就有了以下的代码。

先介绍下开启摄像头的方法：

主要有以下几种，具体哪个行上哪个吧。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;          window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

然后具体实现：

 function getMedia() {              if (navigator.getUserMedia) {                  navigator.getUserMedia({                      'video': {                          'optional': [{                              'sourceId': exArray[0] //0为前置摄像头，1为后置                          }]                      },                      'audio':true                  }, successFunc, errorFunc);    //success是获取成功的回调函数              }              else {                  alert('Native device media streaming (getUserMedia) not supported in this browser.');              }          }

继续:Error不写了，自定义去

        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();              }          }

最后：完整代码

<!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <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 id="button111" type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />      <video height="120px" autoplay="autoplay"></video><hr />      <input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />      <canvas id="canvas1" height="120px" ></canvas><hr />      <input type="button" title="视频" value="视频" onclick="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[0] //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;          }            //拍照          function getPhoto() {              context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。          }            //视频          function getVedio() {              drawVideoAtCanvas(video, context2);          }        </script>  </body>  </html>

阅读全文

0 0