时间戳

首页 > 解决方案 > 在 webrtc 中是否可以在不使用画布的情况下获取视频帧？

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

问题描述

我的实际项目是使用 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;
  }
};

标签： javascriptwebrtc

解决方案

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

但正如this answerrequestAnimationFrame中所建议的，您可以使用（仅在chrome上）requestVideoFrameCallbackAPI ，而不是使用函数。正如这里所说：

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

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

推荐阅读