chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: output render support mp4 and webm

Browse Source
This commit is contained in:
bennykok 2024-01-31 21:23:00 +08:00
parent 5a3955dfcb
commit 50d4c399e9
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/OutputRender.tsx
View File

@ -5,6 +5,20 @@ export async function OutputRender(props: {
run_id: string; run_id: string;
filename: string; filename: string;
}) { }) {
if (props.filename.endsWith(".mp4") || props.filename.endsWith(".webm")) {
const url = await getFileDownloadUrl(
`outputs/runs/${props.run_id}/${props.filename}`,
);
return (
<video controls autoPlay className="w-[400px]">
<source src={url} type="video/mp4" />
<source src={url} type="video/webm" />
Your browser does not support the video tag.
</video>
);
}
if ( if (
props.filename.endsWith(".png") || props.filename.endsWith(".png") ||
props.filename.endsWith(".gif") || props.filename.endsWith(".gif") ||
@ -12,13 +26,13 @@ export async function OutputRender(props: {
props.filename.endsWith(".jpeg") props.filename.endsWith(".jpeg")
) { ) {
const url = await getFileDownloadUrl( const url = await getFileDownloadUrl(
`outputs/runs/${props.run_id}/${props.filename}` `outputs/runs/${props.run_id}/${props.filename}`,
); );
return <img className="max-w-[200px]" alt={props.filename} src={url} />; return <img className="max-w-[200px]" alt={props.filename} src={url} />;
} else { } else {
const url = await getFileDownloadUrl( const url = await getFileDownloadUrl(
`outputs/runs/${props.run_id}/${props.filename}` `outputs/runs/${props.run_id}/${props.filename}`,
); );
// console.log(url); // console.log(url);