js实现手机原生拍照界面

[MrSuperJ]

1.navigator.getUserMedia 已废弃

该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

2.MediaDevices.getUserMedia()

MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject

先决条件

服务器端条码SDK：  Dynamsoft条码SDK 4.0  - 适用于Windows，Linux和Mac。
WebSocket服务器：  Jetty - 一个Java HTTP（Web）服务器和Java Servlet容器。
网络浏览器：适用于Android或Windows的Chrome和Firefox。不支持iOS。

不支持IOS是硬伤

使用方式

//在HTML5中，Navigator.getUserMedia（） 会提示用户获取相机权限。
//该方法在Chrome和Firefox中的行为不同，下面是我们如何正确使用它：
navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;
 
if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occured: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

3.input

常用调取手机原生拍照功能，但是无法满足需求

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
    //accept表示打开的系统文件目录
    //capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；