在 webrtc 中是否可以在不使用画布的情况下获取视频帧？

Question

我的实际项目是使用webrtc开发一个视频通话应用程序并为NDI SDK传输视频音频帧，NDI输入应该以帧为单位。为此，现在我使用画布完成了此操作，但延迟很高。是否可以直接从摄像头直接获取帧，或者有其他方法将流转为帧？

这是我现在获取帧的示例代码（var frame = this.ctx1.getImageData(0, 0, this.width, this.height);)

var processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    var self = this;
    setTimeout(function () {
      self.timerCallback();
    }, 16); // roughly 60 frames per second
  },

  doLoad: function() {
    this.video = document.getElementById("my-video");
    this.c1 = document.getElementById("my-canvas");
    this.ctx1 = this.c1.getContext("2d");
    var self = this;

    this.video.addEventListener("play", function() {
      self.width = self.video.width;
      self.height = self.video.height;
      self.timerCallback();
    }, false);
  },

  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    var l = frame.data.length / 4;

    for (var i = 0; i < l; i++) {
      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;

      frame.data[i * 4 + 0] = grey;
      frame.data[i * 4 + 1] = grey;
      frame.data[i * 4 + 2] = grey;
    }
    this.ctx1.putImageData(frame, 0, 0);

    return;
  }
};

Answer 1

我认为没有其他方法可以实时访问（和编辑）视频帧。

但正如this answer 中所建议的那样，您可以使用（仅在 chrome 上）requestVideoFrameCallback API，而不是使用 requestAnimationFrame 函数。正如here 所说：

requestVideoFrameCallback() 方法允许 Web 作者注册一个回调，该回调在新视频帧发送到合成器时在渲染步骤中运行。这旨在允许开发人员对视频执行高效的每视频帧操作，例如视频处理和画布绘制、视频分析、[...]

另一方面，正如this post 中所说，画布操作对 CPU 的负担很大。要简单地编辑视频显示，您应该尝试使用一些 CSS3 转换。

Answer 2

您可以创建ImageCapture 对象并使用takePhoto 方法，而不是将MediaStream 分配给画布，请参阅

https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture

对于音频，您可以使用： https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder 见requestData方法和ondataavailable