Remotion images rendering differently

[santoshgistto]

Remotion studio player and Remotion player rendering differently with same props

Remotion studio player and player composition are same

<Composition id="HelloWorld" component={MyComposition} durationInFrames={500} width={350} height={500} fps={30}/>

Here is the video

remotion-player_UUu1s06Q.mp4

remotion-studio_Hb6OU6I9.mp4

This may not be the issue, i may be missing something

[JonnyBurger]

Thanks for reporting!

Do you have some markup of your component that I could take a look at?
Would be interested to debug this!

[santoshgistto]

This is the Details :

For remotion player used https://github.com/shadcn/ui template
For remotion studio used remotion blank template

 import { useCurrentFrame, AbsoluteFill, useVideoConfig, Sequence, Audio, spring } from 'remotion'

const ImageUrls = [
    "https://images.unsplash.com/photo-1680771447988-94c040d9868b?w=687&q=80",
    "https://images.unsplash.com/photo-1680951103843-a370c042fb03?w=687&q=80",
    "https://images.unsplash.com/photo-1680527639693-6bc8f2ef2222?w=687&q=80",
    "https://plus.unsplash.com/premium_photo-1677458719435-0ed8962ac400?w=687&q=80",
    "https://images.unsplash.com/photo-1681015162686-79e9cd18a0e6?w=687&q=80",
    "https://images.unsplash.com/photo-1680948676063-bdc079cb11a9?w=687&q=80",
    "https://images.unsplash.com/photo-1680776192906-3d3d8fcccbdd?w=687&q=80",
    "https://plus.unsplash.com/premium_photo-1677456380311-91061b7694e2?w=687&q=80",
    "https://images.unsplash.com/photo-1679343316332-6b854e892a44?w=687&q=80",
    "https://images.unsplash.com/photo-1677261905060-7a93f54682fb?w=686&q=80"


]



const ImageComponent = ({ url }) => {
    const frame = useCurrentFrame()
    const { fps } = useVideoConfig()
    const opacity = Math.min(1, frame / 30);
    const f = frame / 3;
    const scale = spring({
        fps,
        frame: f,
    });
    return (
        <div style={{ transform: `scale(${scale})`, opacity }}>
            <img src={url} />

        </div>
    )
}

export const MyComposition = () => {
    const { fps, durationInFrames, width, height, } = useVideoConfig();
    const frame = useCurrentFrame()
    const opacity = Math.min(1, frame / 60);

    return (
        <AbsoluteFill
            style={{
                justifyContent: "center",
                alignItems: "center",
                fontSize: 30,
                backgroundColor: "white",
            }}
        >
            <Sequence durationInFrames={180}>
                <ImageComponent url={ImageUrls[1]} />
            </Sequence>
            <Sequence from={140}>
                <ImageComponent url={ImageUrls[1]} />

            </Sequence>
            <Sequence from={80}>
                <ImageComponent url={ImageUrls[2]} />
            </Sequence>
            <Sequence from={120}>
                <ImageComponent url={ImageUrls[3]} />
            </Sequence>
            <Sequence from={160}>
                <ImageComponent url={ImageUrls[4]} />
            </Sequence>
            <Sequence from={200}>
                <ImageComponent url={ImageUrls[5]} />
            </Sequence>
            <Sequence from={240}>
                <ImageComponent url={ImageUrls[6]} />
            </Sequence>
            <Sequence from={280}>
                <ImageComponent url={ImageUrls[7]} />
            </Sequence>
            <Sequence from={320}>
                <ImageComponent url={ImageUrls[8]} />
            </Sequence>
            <Sequence from={360}>
                <ImageComponent url={ImageUrls[1]} />
            </Sequence>

            <Audio src='https://pub-4bf634469b5c482e9546855c0abd7a17.r2.dev/ES_Love%20Me%20Back.mp3' />
        </AbsoluteFill>
    );
};

Player component

export default function RemotionPlayer() {
    return (
        <Player
            component={MyComposition}
            durationInFrames={500}
            compositionWidth={350}
            compositionHeight={500}
            fps={30}
            controls
        />
    )
}

Remotion Composition

export const RemotionRoot: React.FC = () => {
	return (
		<>
			<Composition
				id="MyComp"
				component={MyComposition}
				durationInFrames={500}
				fps={30}
				width={350}
				height={400}
			/>
		</>
	);
};

[JonnyBurger]

Thanks for posting your code!

I executed it and it looks like it renders the same on both the Player and Preview:

I noticed two small mistakes in your code:

1. The height is different, once it is 500, once it is 400
2. You should use Img from "remotion", not the <img> tag.

Other than that, I was not able to see a difference. There might be other factors, like for example the UI library you are using adding additional styles. For that you would have to see using the Element Inspector if some differences are introduced by that. I cannot reproduce that with just the code that was posted though.

[santoshgistto]

Thanks @JonnyBurger for this.
i will check from my end