Hello Andy and Aliaks! How are you? There was a 2-3 hour limit that I inadvertently surpassed, spending a lot of time simply reading about things like the Media Recorder/Stream API, learning about datatypes, and making decisions regarding persisting data (locally and hosted DB).
I've decided on Nextjs for frontend framework. The issue there was MediaRecorder required the "window" object, of the browser, in order to work. Taillwind for styling. After deliberation on persisting data, I would have implemented localstorage or IndexedDB. As for backend, I was planning to host video data on Supabase.
Thanks! Erik Kimsey
Tools used (or potentially used):
• Nextjs • Material UI (icons and components) • Tailwind CSS • Context API • MediaRecorder API
MediaRecorder API / MediaStream API, via "Webcam-React" npm package
MediaRecorder API / MediaStream API -vs- Nextjs:
- given that these APIs cannot function without first accessing the browser engine, consideration for SSR apps (e.g., Nextjs) is required.
- file-type download: mimetype (file-type and codec) options / limitations should be considered.
- [MDN API file format docs: ](https://developer.mozilla.org/en-US/docs/Web/Media/Formats)
- Localstorage or IndexedDB.
- Supabase (PostgreSQL, "firebase alternative")
- it came down to localstorage or SQLite. But, given I intended to solely persist a new performance recording, I opted for localstorage or IndexedDB.
- For a database, given the context of: a. the time-limit of this exercise and b. ease of implementation with Nextjs, I opted to use [Supabase ](https://supabase.com).
npm install
# then
npm run dev
Open http://localhost:3000 with your browser to see the result.