End mobile phone camera pulled H5

End mobile phone camera pulled H5

At present mobile phone browser to pull the camera in two ways MediaDevices.getUserMedia()and use inputlabels

Pull up camera input tag

As long as the correct configuration acceptand captureyou can open the phone book, camera, microphone

<div>
  <h2>camear</h2>
  <input type="file" accept="image/*" capture="camera" />
  <br />
  <h2>camcorder</h2>
  <input type="file" accept="video/*" capture="camcorder" />
  <br />
  <h2>microphone</h2>
  <input type="file" accept="audio/*" capture="microphone" />
</div>
复制代码

Note stepped pit

• Determining the App (embedded webview of APP, or the browser used by) a corresponding permissions
• You may encounter Android phones can only pull up the camera fails to open the album at this point you want to modify some configuration with webview in reference to this article

MediaDevices.getUserMedia () to pull the camera

MediaDevices.getUserMedia()You can call the camera and audio, but compatibility is not very good, such as face recognition, if supported MediaDevices Ali is not supported by MediaDevices to use input tag

// 这里是MDN的小DEMO更多细节自己查阅吧
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
复制代码

Note stepped pit

• Determining the App (embedded webview of APP, or the browser used by) a corresponding permissions
• On the computer you are OK test how mobile phones can be used not so that, then you're probably not using the https protocol in the mobile terminal test to use https protocol

reference

• The market share of each system ios
• Android market share of each version of the system
• getUserMedia API and HTML5 call cell phone camera to take pictures
• Tencent face verification
• Baidu biopsy

Reproduced in: https: //juejin.im/post/5cf679c8e51d45777540fd6b