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.