Question

我使用普通表单输入来访问客户端电话上的摄像头，如下所示：

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

我的问题是：我可以控制录制最终视频的质量/分辨率，以便减少使用表单发布的视频的大小吗？

祝你好运雅各布

Answer 1

不，HTML Media Capture无法为您提供找到所需内容的方法。

有一个名为getUserMedia的新规范。

一些文档：Here

Here是使用api的真实演示。你必须扩展它以使用套接字或webrtc或其他东西将视频流回服务器。在手机上或带相机的东西上去。

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

＆＃13;

// 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);

＆＃13;

<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>

＆＃13;

HTML5相机访问 - 控制分辨率

1 个答案: