Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@remotion/webcodecs: Initial docs and refine API #4493

Merged
merged 8 commits into from
Nov 8, 2024
Merged

@remotion/webcodecs: Initial docs and refine API #4493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3172cf9
`@remotion/webcodecs`: Initial docs and refine API
JonnyBurger Nov 8, 2024
eb83937
flip video options
JonnyBurger Nov 8, 2024
85f551d
remotion.dev/webcodecs
JonnyBurger Nov 8, 2024
9729e53
flip options
JonnyBurger Nov 8, 2024
76875fe
initial docs
JonnyBurger Nov 8, 2024
3985d54
further documentation
JonnyBurger Nov 8, 2024
deaf85e
Update web-fs.ts
JonnyBurger Nov 8, 2024
22b744e
new type
JonnyBurger Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions packages/convert/app/components/ConvertForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import {
ConvertMediaAudioCodec,
ConvertMediaTo,
ConvertMediaVideoCodec,
} from '@remotion/webcodecs';
import React from 'react';
import {Container} from '~/lib/generate-new-name';
import {Checkbox} from './ui/checkbox';
import {Label} from './ui/label';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from './ui/select';

export const ConvertForm: React.FC<{
readonly container: ConvertMediaTo;
readonly setContainer: React.Dispatch<React.SetStateAction<ConvertMediaTo>>;
readonly videoCodec: ConvertMediaVideoCodec;
readonly setVideoCodec: React.Dispatch<
React.SetStateAction<ConvertMediaVideoCodec>
>;
readonly audioCodec: ConvertMediaAudioCodec;
readonly setAudioCodec: React.Dispatch<
React.SetStateAction<ConvertMediaAudioCodec>
>;
readonly flipHorizontal: boolean;
readonly setFlipHorizontal: React.Dispatch<React.SetStateAction<boolean>>;
readonly flipVertical: boolean;
readonly setFlipVertical: React.Dispatch<React.SetStateAction<boolean>>;
}> = ({
container,
setContainer,
setVideoCodec,
videoCodec,
audioCodec,
setAudioCodec,
flipHorizontal,
flipVertical,
setFlipHorizontal,
setFlipVertical,
}) => {
const [showAdvanced, setShowAdvanced] = React.useState(false);

return (
<div className="gap-4 grid">
<div>
<Label htmlFor="container">Container</Label>
<Select
value={container}
onValueChange={(v) => setContainer(v as Container)}
>
<SelectTrigger id="container">
<SelectValue placeholder="Select a container" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="webm">WebM</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="videoCodec">Video codec</Label>
<Select
value={videoCodec}
onValueChange={(v) => setVideoCodec(v as ConvertMediaVideoCodec)}
>
<SelectTrigger id="videoCodec">
<SelectValue placeholder="Select a video codec" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="vp8">VP8</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="audioCodec">Audio codec</Label>
<Select
value={audioCodec}
onValueChange={(a) => setAudioCodec(a as ConvertMediaAudioCodec)}
>
<SelectTrigger id="audioCodec">
<SelectValue placeholder="Select a audio codec" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="opus">Opus</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
{showAdvanced ? (
<>
<div className="flex flex-row">
<Checkbox
checked={flipHorizontal}
id="flipHorizontal"
onCheckedChange={() => setFlipHorizontal((e) => !e)}
/>
<div className="w-2" />
<div className="grid gap-1.5 leading-none">
<label
htmlFor="flipHorizontal"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Flip video horizontally
</label>
</div>
</div>
<div className="flex flex-row">
<Checkbox
checked={flipVertical}
id="flipVertical"
onCheckedChange={() => setFlipVertical((e) => !e)}
/>
<div className="w-2" />
<div className="grid gap-1.5 leading-none">
<label
htmlFor="flipVertical"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Flip video vertically
</label>
</div>
</div>
</>
) : (
<div className="flex flex-row justify-center text-muted-foreground">
<button
type="button"
className="font-brand"
onClick={() => setShowAdvanced(true)}
>
Advanced settings
</button>
</div>
)}
</div>
);
};
100 changes: 39 additions & 61 deletions packages/convert/app/components/ConvertUi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import {Button} from '@/components/ui/button';
import {CardTitle} from '@/components/ui/card';
import {Label} from '@/components/ui/label';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {fetchReader} from '@remotion/media-parser/fetch';
import {webFileReader} from '@remotion/media-parser/web-file';
import {convertMedia} from '@remotion/webcodecs';
import {
convertMedia,
ConvertMediaAudioCodec,
ConvertMediaTo,
ConvertMediaVideoCodec,
} from '@remotion/webcodecs';
import {useCallback, useEffect, useRef, useState} from 'react';
import {ConvertState, Source} from '~/lib/convert-state';
import {Container, getNewName} from '~/lib/generate-new-name';
import {getNewName} from '~/lib/generate-new-name';
import {ConvertForm} from './ConvertForm';
import {ConvertProgress, convertProgressRef} from './ConvertProgress';
import {ErrorState} from './ErrorState';
import {flipVideoFrame} from './flip-video';
import {Badge} from './ui/badge';

export default function ConvertUI({src}: {readonly src: Source}) {
const [container, setContainer] = useState<Container>('webm');
const [videoCodec, setVideoCodec] = useState('vp8');
const [audioCodec, setAudioCodec] = useState('opus');
const [container, setContainer] = useState<ConvertMediaTo>('webm');
const [videoCodec, setVideoCodec] = useState<ConvertMediaVideoCodec>('vp8');
const [audioCodec, setAudioCodec] = useState<ConvertMediaAudioCodec>('opus');
const [state, setState] = useState<ConvertState>({type: 'idle'});
const [name, setName] = useState<string | null>(null);
const [flipHorizontal, setFlipHorizontal] = useState(false);
const [flipVertical, setFlipVertical] = useState(false);

const abortSignal = useRef<AbortController | null>(null);

Expand All @@ -39,13 +39,18 @@ export default function ConvertUI({src}: {readonly src: Source}) {
convertMedia({
src: src.type === 'url' ? src.url : src.file,
reader: src.type === 'file' ? webFileReader : fetchReader,
onVideoFrame: (frame) => {
onVideoFrame: ({frame}) => {
const flipped = flipVideoFrame({
frame,
horizontal: flipHorizontal,
vertical: flipVertical,
});
if (videoFrames % 15 === 0) {
convertProgressRef.current?.draw(frame);
convertProgressRef.current?.draw(flipped);
}

videoFrames++;
return Promise.resolve();
return flipped;
},
logLevel: 'verbose',
onMediaStateUpdate: (s) => {
Expand Down Expand Up @@ -106,7 +111,7 @@ export default function ConvertUI({src}: {readonly src: Source}) {
return () => {
abortController.abort();
};
}, [src, videoCodec, audioCodec, container]);
}, [src, videoCodec, audioCodec, container, flipHorizontal, flipVertical]);

const cancel = useCallback(() => {
if (state.type !== 'in-progress') {
Expand Down Expand Up @@ -183,54 +188,27 @@ export default function ConvertUI({src}: {readonly src: Source}) {
</>
) : (
<>
<div className="grid w-full items-center gap-4">
<div className=" w-full items-center">
<div className="flex flex-row">
<CardTitle>Convert video</CardTitle>
<div className="w-2" />
<Badge variant="default">Alpha</Badge>
</div>
<div>
<Label htmlFor="container">Container</Label>
<Select
value={container}
onValueChange={(v) => setContainer(v as Container)}
>
<SelectTrigger id="container">
<SelectValue placeholder="Select a container" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="webm">WebM</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="videoCodec">Video codec</Label>
<Select value={videoCodec} onValueChange={setVideoCodec}>
<SelectTrigger id="videoCodec">
<SelectValue placeholder="Select a video codec" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="vp8">VP8</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="audioCodec">Audio codec</Label>
<Select value={audioCodec} onValueChange={setAudioCodec}>
<SelectTrigger id="audioCodec">
<SelectValue placeholder="Select a audio codec" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="opus">Opus</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="h-6" />
<ConvertForm
{...{
container,
setContainer,
setVideoCodec,
videoCodec,
audioCodec,
setAudioCodec,
flipHorizontal,
flipVertical,
setFlipHorizontal,
setFlipVertical,
}}
/>
</div>
<div className="h-4" />
<Button
Expand Down
34 changes: 34 additions & 0 deletions packages/convert/app/components/flip-video.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export const flipVideoFrame = ({
frame,
horizontal,
vertical,
}: {
frame: VideoFrame;
horizontal: boolean;
vertical: boolean;
}) => {
if (!horizontal && !vertical) {
return frame;
}

const canvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error('Could not get 2d context');
}
canvas.width = frame.displayWidth;
canvas.height = frame.displayHeight;
ctx.translate(
horizontal ? frame.displayWidth : 0,
vertical ? frame.displayHeight : 0,
);
ctx.scale(horizontal ? -1 : 1, vertical ? -1 : 1);
ctx.drawImage(frame, 0, 0);

return new VideoFrame(canvas, {
displayHeight: frame.displayHeight,
displayWidth: frame.displayWidth,
duration: frame.duration as number,
timestamp: frame.timestamp,
});
};
28 changes: 28 additions & 0 deletions packages/convert/app/components/ui/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "~/lib/utils"

const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
11 changes: 6 additions & 5 deletions packages/convert/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"lint": "tsc && eslint --cache --cache-location ./node_modules/.cache/eslint ."
},
"dependencies": {
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
Expand All @@ -25,23 +26,23 @@
"@vercel/remix": "^2.11.2",
"class-variance-authority": "^0.7.0",
"clsx": "2.1.1",
"fast-average-color": "9.4.0",
"isbot": "4.1.0",
"lucide-react": "^0.439.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"tailwind-merge": "2.5.2",
"tailwindcss-animate": "^1.0.7",
"fast-average-color": "9.4.0"
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@remix-run/dev": "^2.11.2",
"@remotion/eslint-config": "workspace:*",
"autoprefixer": "10.4.20",
"eslint": "8.56.0",
"postcss": "8.4.47",
"tailwindcss": "3.4.13",
"vite": "^5.4.6",
"vite-tsconfig-paths": "^4.2.1",
"@remotion/eslint-config": "workspace:*",
"eslint": "8.56.0"
"vite-tsconfig-paths": "^4.2.1"
},
"engines": {
"node": ">=20.0.0"
Expand Down
Loading
Loading