HTML5 相机访问 - 控制分辨率

Question

我正在使用普通表单输入来访问客户端手机上的相机，如下所示：

<input type="file" name="video" accept="video/*" capture></input>

我的问题是：我可以控制最终视频将以什么质量/分辨率录制，以便我可以减小与表单一起发布的视频的大小吗？

此致敬意雅 各 布

Answer 1

不，HTML Media Capture 没有为您提供执行所需操作的方法。

有一个名为getUserMedia的新规范。

一些文档：这里

这是使用 API 的真实演示。您必须扩展它才能使用套接字或webrtc或其他东西将视频流式传输回服务器。在手机或带摄像头的东西上去看它。

下面是一个非常原始的例子。不要在此处运行代码段。我这样做是为了格式化。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');
  var mediaConfig = {
    audio: false,
    video: {
      facingMode: {
        //"user"
        //The video source is facing toward the user; this includes, for example, 
        //the front-facing camera on a //smartphone.
        //"environment"
        //The video source is facing away from the user, thereby viewing their environment. 
        //This is the back //camera on a smartphone.
        exact: "environment"
      },
      width: {
        min: 1920,
        ideal: 1920,
        max: 2900
      },
      height: {
        min: 1080,
        ideal: 1080,
        max: 2900
      }
    }
  };
  var errBack = function(e) {
    console.log('An error has occurred!', e)
  };
  // Put video listeners into place
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }).catch(this.errBack);
  }
  //Older browser support
  else if (navigator.getUserMedia) { // Standard
    navigator.getUserMedia(mediaConfig, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(mediaConfig, function(stream) {
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia(mediaConfig, function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
  // Trigger photo take
  document.getElementById('snap').addEventListener('click', function() {
    context.drawImage(video, 0, 0, 640, 480);
  });
}, false);

<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Take Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>