h5调用摄像头不兼容的问题

最终目的是在微信端调用摄像头实现拍照功能,目前只在火狐下能用,谷歌都不行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <video src="" id="video"></video>
    <canvas id="canvas1" height="120px" ></canvas><hr />
    <input type="button" title="视频" value="视频" onclick="getVedio();" /><br />  
</body>
  <script>
  var canvas1 = document.getElementById('canvas1');  
        var context1 = canvas1.getContext('2d'); 
    var promisifiedOldGUM = function(constraints){
      var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
      if(!getUserMedia){
        return Promise.reject(new Error('getUserMedia is not work'))
      }
      return new Promise(function(resolve,reject){
        getUserMedia.call(navigator,constraints,resolve,reject);
      })
    }

    if(navigator.mediaDevices.getUserMedia === undefined){
      navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
    }

    var constraints = {audio:true,video:{width:1280,height:720}};

    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream){
      var video = document.querySelector('video');
     video.src = window.URL && window.URL.createObjectURL(stream) || stream;  
      video.onloadedmetadata = function(e){
        video.play();
      };
    })
    .catch(function(err){
      console.log(err.name+":"+err.message);
    })
    function drawVideoAtCanvas(video,context) {  
            window.setInterval(function () {  
                context.drawImage(video, 0, 0,90,120);  
            }, 60);  
        }  
  
    function getVedio() {  
            drawVideoAtCanvas(video, context1);  
    }  
  </script>
</html>
阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题