Запись Fabricjs в виде видео с элементом видео из внешней ссылки внутри холста

Я пытаюсь записать холст Fabricjs как видео, внутри которого есть видеоэлемент, когда я записываю холст без видеоэлемента, он записывает холст и другие элементы, но когда я добавляю видео, это не похоже ничего не записывает, ничего не записывает.

this.videoElement = new fabric.Image(this.getVideoElement(this.action.link), {
        left: 0,
        top: 0,
        crossOrigin: 'anonymous',
        id: 'videoRecordElement',
      });
      this.canvas.add(this.videoElement);
      let self = this;
      fabric.util.requestAnimFrame(function render() {
        self.canvas.renderAll();
        fabric.util.requestAnimFrame(render);
      });
      this.videoElement.getElement().play();
      const chunks = []; // here we will store our recorded media chunks (Blobs)
      const stream = (this.drawingCanvas.nativeElement as any).captureStream(); // grab our canvas MediaStream
      this.rec = new MediaRecorder(stream, {mimeType: 'video/webm;codecs=vp8'}); // init the recorder
      // every time the recorder has new data, we will store it in our array
      this.rec.ondataavailable = e => chunks.push(e.data);
      // only when the recorder stops, we construct a complete Blob from all the chunks
      this.rec.onstop = e => this.exportVid(new Blob(chunks, {type: 'video/mp4'}));
      
      this.rec.start();

getVideoElement(url) {
    var videoE = document.createElement('video');
    videoE.width = document.getElementById('videoConatiner').clientWidth;
    videoE.height = document.getElementById('videoConatiner').clientHeight;
    videoE.muted = true;
    videoE.controls = true;
    (videoE as any).crossorigin = "anonymous";
    videoE.autoplay = true;
    var source = document.createElement('source');
    source.src = url;
    source.type = 'video/mp4';
    videoE.appendChild(source);
    return videoE;
  }

Я использую Fabricjs внутри углового проекта.


person Angular Dev    schedule 09.02.2021    source источник


Ответы (1)


если воспроизводимое видео из другого домена (или, точнее, из другого источника), оно не может быть захвачено с помощью MediaRecorder из-за политики того же источника.

person dontcallmedom    schedule 15.02.2021
comment
есть ли какая-нибудь работа, чтобы сделать это? каким-либо образом, например, объединить анимацию, сделанную в Fabricjs, с видео? или любое другое решение - person Angular Dev; 16.02.2021