如何使用网络摄像头或手机使用 jquery 捕获图像？

Question

我正在构建一个网络应用程序，它应该在手机或网络摄像头中打开前置摄像头。我的代码在网络上运行良好，但在移动设备和标签上没有响应。我该如何解决这个问题？ 我正在使用 getUserMedia Web API。 如何更改代码以在网络摄像头和移动设备中捕获图像？

HTML 代码

<video id="video"></video>
<canvas id="canvas" style="display:none;"></canvas>
<div id="buttoncontent">

</div>

 {{ csrf_field() }}
<button id="startbutton" class="btn btn-primary "  >CAPTURE</button>
<button type="submit" id="cancel" class="btn btn-primary  cancel">Next</button>

jquery 代码

  var streaming = false,
    video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas'),
    buttoncontent = document.querySelector('#buttoncontent'),
    cancel= document.querySelector('#cancel'),
    //photo = document.querySelector('#photo'),
    startbutton = document.querySelector('#startbutton'),
    width = 320,
    height = 0;


  navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia    ||
                       navigator.msGetUserMedia
                       );

  navigator.getMedia({
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev) {
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth / width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    video.style.display = "none";
    canvas.style.display = "block";
    startbutton.innerText= "RETAKE";
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');

    canvas.setAttribute('src', data);
    return   data;
  }

  startbutton.addEventListener('click', function(ev) {

    if(startbutton.innerText==="CAPTURE")
    {
        var data=takepicture();

        $('#file').val(data);
    }
    else
    {
        video.style.display = "block";
        canvas.style.display = "none";
      startbutton.innerText= "CAPTURE";
    }
    ev.preventDefault();
  }, false);
  cancel.addEventListener('click',function(e)
    {
            if(cancel.innerText==="Next")
            {
                    video.mozSrcObject.getTracks().forEach( (track) =>
                    {
                        track.stop();
                     });
            }

    }, false);


});

它在手机中不起作用。请帮我解决这个问题。它在网络上运行良好。

如何更改我的代码以在网络摄像头或移动设备中捕获图像？

Answer 1

1. 在 https 或本地主机上运行它们
2. 在您的视频标签中添加playsinline