今天看啥
    热点:

      天发国际娱乐官网:SeniorDigitalEditorJobDescription:1.Reviewcopyandcorrecterrorsincontent,grammar,andpunctuation,followingprescribededitorialstyleandformatguidelines.2.Ensurethatallcopy,includingheadlines,summariesandgraphics,aresharp,currentandultra-cleanacrossallonlineplatforms,fromtheChinaDailywebsitetomobileapps.3.Buildandmanageanefficienteditorialprocessincludingtime-lines,qualitycontrol,photos,illustrationslayout.4.KeepabreastofthelatestdevelopmentsinChinaandfocusonemergingorhottopics.5.Helpbuildaudienceandreach,includingdevelopingstrategiestobestsharecontentonsocialmedia.6.WorkwithChineseeditorsandreportersonresearching,reportingandcraftingarticleswithaneyetowardoverallwritingfluency.7.ParticipateinshapingthevisionforChinaDailyWebsiteoperationsinacreative,ambitiousandopenenvironment.

      调用本地摄像头拍照(H5和画布),摄像头拍照h5画布


      关于H5 和 画布 调用本地摄像头拍照功能的实现

      1.代码的实现(html部分

      <input 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>

       

      2.js部分

      <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>

      3.实现效果图

      4.浏览器部分

      H5的拍照开启摄像头方法navigator.getUserMedia,测试适用于火狐,本地调用,和满足https协议的浏览器调用,本地localhost和127.0.0.1可以访问,然而发布到项目上面,通过其他页面访问,需要tomcat配置https协议,但是安全性很低,所以,只用于参考

       

      www.1click-soft.comtruehttp://www.1click-soft.com/HTML5/1281676.htmlTechArticle调用本地摄像头拍照(H5和画布),摄像头拍照h5画布 关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分 ) input type=...

      相关文章

      相关搜索: html5

      帮客评论

      视觉看点
      百度 360 搜狗