Можно ли установить задержку при воспроизведении живого потокового видео из API webRTC? - PullRequest
Новая
       13

Можно ли установить задержку при воспроизведении живого потокового видео из API webRTC?

0 голосов
/ 15 июня 2019

В настоящее время я делаю художественную работу, имея 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();
});

`

...