The sample code to show how to stream MJPEG image & record it on a frontend.
Component | Summary | Dev environment |
---|---|---|
HTTP server | The sample code to show how to stream MJPEG image | Golang (included in Dockerfile) |
Web client | The sample code to show how to record MJPEG image from a streming | npm+Next.js (included in Dockerfile) |
- Docker
- Docker Compose
- Visual Studio Code
- "Docker" extension
- "Dev Containers" extension
cd .devcontainer
docker compose up -d
After that, attach to the Docker container using Visual Studio Code and "Dev Containers" extension (not shell), and open /home/mochi/
directory.
Run the following commands using Visual Studio Code that is attaching to the Docker container.
cd /home/mochi
go mod tidy
cd cmd/server
go run main.go
Run the following commands using Visual Studio Code that is attaching to the Docker container.
cd /home/mochi/cmd/client
npm ci
npm run dev
Then open http://localhost:4000 using web browser (ex. Chrome) on the Docker host.
The streaming image with random dot pattern appear in the browser.
To record the image, follow these steps:
- Push "Record" button, then the recording is started. The canvas element in HTML shows a recording frame.
- Push "Stop" button, then the recording is stopped.
- Click/Tap "Download" link, then you can get a recorded image to a local file.