Skip to content

Commit d5604d4

Browse files
valcosmosvalcosmos
authored
docs: add nextjs example (#544)
1 parent 7515486 commit d5604d4

15 files changed

+3657
-0
lines changed

‎apps/nextjs-app/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎apps/nextjs-app/.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎apps/nextjs-app/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
```
14+
15+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16+
17+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18+
19+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎apps/nextjs-app/app/favicon.ico

25.3 KB
Binary file not shown.

‎apps/nextjs-app/app/globals.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+

‎apps/nextjs-app/app/layout.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import './globals.css'
2+
import type { Metadata } from 'next'
3+
import { Inter } from 'next/font/google'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export const metadata: Metadata = {
8+
title: 'Create Next App',
9+
description: 'Generated by create next app',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
)
22+
}

‎apps/nextjs-app/app/page.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
'use client'
2+
3+
import { FFmpeg } from '@ffmpeg/ffmpeg'
4+
import { fetchFile, toBlobURL } from '@ffmpeg/util'
5+
import { useRef, useState } from 'react'
6+
7+
export default function Home() {
8+
const [loaded, setLoaded] = useState(false)
9+
const [isLoading, setIsLoading] = useState(false)
10+
const ffmpegRef = useRef(new FFmpeg())
11+
const videoRef = useRef<HTMLVideoElement | null>(null)
12+
const messageRef = useRef<HTMLParagraphElement | null>(null)
13+
14+
const load = async () => {
15+
setIsLoading(true)
16+
const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd'
17+
const ffmpeg = ffmpegRef.current
18+
ffmpeg.on('log', ({ message }) => {
19+
if (messageRef.current) messageRef.current.innerHTML = message
20+
})
21+
// toBlobURL is used to bypass CORS issue, urls with the same
22+
// domain can be used directly.
23+
await ffmpeg.load({
24+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
25+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
26+
})
27+
setLoaded(true)
28+
setIsLoading(false)
29+
}
30+
31+
const transcode = async () => {
32+
const ffmpeg = ffmpegRef.current
33+
// u can use 'https://ffmpegwasm.netlify.app/video/video-15s.avi' to download the video to public folder for testing
34+
await ffmpeg.writeFile('input.avi', await fetchFile('video-15s.avi'))
35+
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4'])
36+
const data = (await ffmpeg.readFile('output.mp4')) as any
37+
if (videoRef.current)
38+
videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
39+
}
40+
41+
return loaded ? (
42+
<div className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
43+
<video ref={videoRef} controls></video>
44+
<br />
45+
<button
46+
onClick={transcode}
47+
className="bg-green-500 hover:bg-green-700 text-white py-3 px-6 rounded"
48+
>
49+
Transcode avi to mp4
50+
</button>
51+
<p ref={messageRef}></p>
52+
</div>
53+
) : (
54+
<button
55+
className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex items-center bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
56+
onClick={load}
57+
>
58+
Load ffmpeg-core
59+
{isLoading && (
60+
<span className="animate-spin ml-3">
61+
<svg
62+
viewBox="0 0 1024 1024"
63+
focusable="false"
64+
data-icon="loading"
65+
width="1em"
66+
height="1em"
67+
fill="currentColor"
68+
aria-hidden="true"
69+
>
70+
<path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
71+
</svg>
72+
</span>
73+
)}
74+
</button>
75+
)
76+
}

‎apps/nextjs-app/next.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

0 commit comments

Comments
 (0)