使用来自画布内部外部链接的视频元素将fabricjs 录制为视频

如何解决使用来自画布内部外部链接的视频元素将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;
  }

我在 angular 项目中使用 fabricjs

解决方法

如果正在播放的视频来自不同的域（或更具体地说，不同的来源），由于同源策略，它不能被 MediaRecorder 捕获