可以设置从webRTC API播放实时流视频时的延迟吗？

Question

我目前正在做艺术作品，彼此有2个视频重叠。 一个是来自网络摄像头的实时视频。 另一个是5秒前播放的实况视频。

我发现很难进行延迟，因为API调用会立即获取视频数据。 如果我想设置5秒钟的延迟，它假定将所有帧保存5秒钟。 那将是太多图像无法保存。

`

let processor = {
timerCallback: function() {
    if (this.video.paused || this.video.ended) {
        return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
    }, 0);
},

timerCallbackDelayed: function() {
    if (this.video.paused || this.video.ended) {
        return;
    }
    this.computeFrameDelayed();

    let self = this;
    setTimeout(function () {
        self.timerCallbackDelayed();
    }, 5000);
},

doLoad: function() {
    this.video = document.getElementById("video");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    this.c3 = document.getElementById("c3");
    this.ctx3 = this.c3.getContext("2d");
    let self = this;

    navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then(function(stream) {
            this.video.srcObject = stream;
            this.video.play();
        })
        .catch(function(err) {
            console.log("An error occurred: " + err);
        });

    this.video.addEventListener("canplay", function() {
        self.width = self.video.videoWidth;
        self.height = self.video.videoHeight;
        self.timerCallback();
        setTimeout(function(){
            self.timerCallbackDelayed();
        }, 5000);
    }, false);
},

computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    this.ctx2.putImageData(frame, 0, 0);
    return;
},

computeFrameDelayed: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    this.ctx3.putImageData(frame, 0, 0);
    return;
}
};

document.addEventListener("DOMContentLoaded", () => {
    processor.doLoad();
});

`