正在录制用户的视频

Mat Scales
X

现在，许多浏览器都能够访问用户的视频和音频输入。不过，根据浏览器的不同，它可能是完全动态的内嵌体验，也可能委托给用户设备上的其他应用。

从简单开始，逐步

最简单的方法是直接要求用户提供预先录制的文件。为此，请创建一个简单的文件输入元素，并添加一个 accept 过滤器（表示我们只能接受视频文件）和一个 capture 属性（表示我们希望直接从相机获取视频）。

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

此方法适用于所有平台。在桌面设备上，它会提示用户从文件系统上传文件（忽略 capture 属性）。在 iOS 上的 Safari 中，它会打开相机应用，让您录制视频，然后将其发送回网页；在 Android 上，它会先让用户选择使用哪个应用录制视频，然后再将其发送回网页。

许多移动设备都有多个摄像头。如果您有偏好，可以将 capture 属性设置为 user（如果您希望使用面向用户的摄像头）或 environment（如果您希望使用面向外部的摄像头）。

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

请注意，这只是一个提示，如果浏览器不支持该选项，或者您请求的摄像头类型不可用，浏览器可能会选择其他摄像头。

用户完成录制并返回网站后，您需要以某种方式获取文件数据。您可以通过将 onchange 事件附加到输入元素，然后读取事件对象的 files 属性来快速访问。

<input type="file" accept="video/*" capture="camera" id="recorder" />
<video id="player" controls></video>
<script>
  var recorder = document.getElementById('recorder');
  var player = document.getElementById('player');

  recorder.addEventListener('change', function (e) {
    var file = e.target.files[0];
    // Do something with the video file.
    player.src = URL.createObjectURL(file);
  });
</script>

获得文件访问权限后，您就可以对文件执行任何操作。例如，您可以：

  • 直接将其附加到 <video> 元素，以便播放
  • 将其下载到用户的设备
  • 通过附加到 XMLHttpRequest 将其上传到服务器
  • 将帧绘制到画布中，并对其应用滤镜

虽然使用输入元素方法获取视频数据很常见，但这是最不理想的选择。我们非常希望能够访问摄像头，并在页面中直接提供良好的体验。

以交互方式访问摄像头

现代浏览器可以直接连接到相机，从而使我们能够构建与网页完全集成的体验，并且用户永远不会离开浏览器。

获取相机访问权限

我们可以使用 WebRTC 规范中名为 getUserMedia() 的 API 直接访问摄像头。getUserMedia() 会提示用户授予对其连接的麦克风和摄像头的访问权限。

如果成功，API 将返回一个 Stream，其中包含来自摄像头或麦克风的数据，然后我们可以将其附加到 <video> 元素、附加到 WebRTC 流，或使用 MediaRecorder API 保存。

如需从摄像头获取数据，我们只需在传递给 getUserMedia() API 的 constraints 对象中设置 video: true

<video id="player" controls></video>
<script>
  var player = document.getElementById('player');

  var handleSuccess = function (stream) {
    player.srcObject = stream;
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: true})
    .then(handleSuccess);
</script>

如果您想选择特定摄像头，可以先枚举可用摄像头。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'videoinput');
});

然后，您可以在调用 getUserMedia 时传递要使用的 deviceId。

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    deviceId: devices[0].deviceId,
  },
});

就其本身而言，这并不是很有用。我们只能获取视频数据并进行播放。

访问相机中的原始数据

如需访问来自相机的原始视频数据，您可以将每个帧绘制到 <canvas> 中，并直接操作像素。

对于 2D 画布，您可以使用上下文的 drawImage 方法将 <video> 元素的当前帧绘制到画布中。

context.drawImage(myVideoElement, 0, 0);

借助 WebGL 画布，您可以使用 <video> 元素作为纹理的来源。

gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  myVideoElement,
);

请注意，无论哪种情况，都会使用正在播放的视频的当前帧。如需处理多个帧，您需要每次都将视频重新绘制到画布上。

如需了解详情，请参阅我们关于为图片和视频应用实时效果的文章。

保存相机中的数据

保存相机数据的最简单方法是使用 MediaRecorder API。

MediaRecorder API 将获取 getUserMedia 创建的流，然后逐步将流中的数据保存到您的首选目标位置。

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
  })

  var handleSuccess = function(stream) {
    const options = {mimeType: 'video/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
      }

      if(shouldStop === true && stopped === false) {
        mediaRecorder.stop();
        stopped = true;
      }
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.webm';
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(handleSuccess);
</script>

在我们的示例中，我们将数据直接保存到一个数组中，稍后可以将其转换为 Blob，然后用于保存到我们的 Web 服务器或直接保存到用户设备上的存储空间中。

以负责任的方式请求使用相机权限

如果用户之前未向您的网站授予相机访问权限，那么在您调用 getUserMedia 的瞬间，浏览器会提示用户向您的网站授予相机权限。

用户讨厌系统提示他们访问其机器上的强大设备，他们经常会阻止请求，或者如果他们不了解创建提示的上下文，则会忽略该请求。最佳做法是仅在首次需要时请求访问摄像头。用户授予访问权限后，系统不会再次询问，但如果用户拒绝访问，您将无法再次请求用户授予权限。

使用 Permissions API 检查您是否已拥有访问权限

getUserMedia API 不会告知您是否已拥有相机访问权限。这会给您带来一个问题：为了提供一个良好的界面来让用户授予您对相机的访问权限，您必须请求对相机的访问权限。

在某些浏览器中，可以使用 Permission API 来解决此问题。借助 navigator.permission API，您可以查询访问特定 API 的能力状态，而无需再次提示。

如需查询您是否有权访问用户的摄像头，您可以将 {name: 'camera'} 传入查询方法，该方法将返回以下任一值：

  • granted - 用户之前已向您授予相机访问权限；
  • prompt - 用户尚未向您授予访问权限，当您调用 getUserMedia 时，系统会提示用户授予访问权限；
  • denied - 系统或用户已明确禁止访问摄像头，您将无法访问摄像头。

现在，您可以快速检查是否需要更改界面，以适应用户需要执行的操作。

navigator.permissions.query({name: 'camera'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

反馈