Can't read an image layer while rendering the movie. The image is from remote, like (https://image/)

[Ziputrafa]

I'm using etro in nextjs. when I want to render a movie with an image layer (remote image file). it doesn't work. but It works when I render a movie with an image layer (local image file).

'use client';
import etro from 'etro';
import { useEffect, useRef } from 'react';
import './editor.css';
import { saveAs } from 'file-saver';

const Editor = () => {
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const movieRef = useRef<any>(null);

useEffect(() => {
const movie = new etro.Movie({
canvas: canvasRef.current,
background: etro.parseColor('gold'),
});

const localImageLayer = new etro.layer.Image({
startTime: 2,
duration: 2,
source: imageRef.current,
});
const remoteImageLayer = new etro.layer.Image({
startTime: 4,
duration: 1,
source: 'https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?``auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200',
});
movie.addLayer(remoteImageLayer); // render only a gold layer which is the movie background

movieRef.current = movie;
}, []);

const download = async () => {
if (movieRef.current) {
try {
await movieRef.current.stop();
const blob = await movieRef.current.record({
frameRate: 30,
});
await saveAs(blob, 'theVideo.mp4'); // render a video from the blob
} catch (error) {
console.error(error);
}
}
};
return (
<>
<button onClick={download}>download</button>
<canvas ref={canvasRef} />
<img ref={imageRef} src="./assets/photo.jpg" />
</>
);
};

export default Editor;

movie.addLayer(localImageLayer); will render a video with the image layer. but movie.addLayer(remoteImageLayer) will render a video with only contains a gold screen which is the movie background.

[clabe45]

Hi @Ziputrafa, are there any errors in the console or failed network requests?

[oceansam]

Ran into this issue as well for remote images.

No network or console errors. The blob does appear on the network
blob:https://... however, .record never resolves and doesn't call its then clause.

[angel1254mc]

Tried this exact code on my chrome and using the remoteImageLayer results in a corrupt video file :'(

Was playing around with this and I think it might have to do something with cross-origin images causing the canvas to become 'tainted', which makes it so that image data cannot be retrieved from the canvas later (for example, when we attempt to capture the stream of images from the canvas, we won't be able to read the image data, resulting in the image not being rendered on your end).

Here's a really good stack overflow post covering this

If you want to circumvent it, you can pass in an image element with its crossOrigin property set to 'anonymous'

 const img = document.createElement('img');
 img.crossOrigin = 'anonymous';
 img.src = "https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg?``auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200";
 const localImageLayer = new etro.layer.Image({
   startTime: 0,
   duration: 4,
   source: img,
 });