Recording fabricjs as video with a video element from external link inside of the canvas

Viewed 480

I am trying to record a fabricjs canvas as a video that has a video element inside o it, when i record the canvas without the video element it records the canvas and the other elements, but when i add the video it doesn't seem to record anything, it does not record anything.

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;
  }

I am using fabricjs inside an angular project

1 Answers

if the video being played is from a different domain (or more specifically, a different origin), it cannot be captured with MediaRecorder due to the same-origin policy

Related