Videorecording (with RecordRTC?)

Job ID: 34641140

Budget: €30 – €250 EUR

A web-app shall record user's video and upload that video at the end.

For a little demonstrator we have been using RecordRTC.
That worked quite well.
Now the code shall be professionally made.

The freelancer's work is:

Build a solution (only rudimentary html-design necessary) whereas click to a button reveal a question (i.e. fill a innerHTML of div) to the user and starts recording from user's camera (usually mobile phone). In case of a countdown (e.g. 30 seconds) is reached or the user was silent for 5 seconds (see hint/link below), next question (of 4) will be shown (i.e. fill a innerHTML of div). If timer to zero or silent for 3 seconds within the last question, then recording stops and video is uploaded (we recommend using AJAX).

On progress-bar (only rudimentary html-design necessary, i.e. css/width of div changing) will be shown for the countdown (e.g. 30 seconds) per question. A second progress-bar will be shown of silence and then countdown the silence (5 seconds) and disappear if user is talking again (which resets the 5 second silence timer again).

UI is needed for the user to accept camera-input.

Code shall be using jQuery (3.6.1) where possible.
Server running on PHP 8.

For testing we used RecordRTC, but feel free to use some other api.


RecordRTC at github:
https://github.com/muaz-khan/RecordRTC

There's some neat demos for RecordRTC:
https://www.webrtc-experiment.com/RecordRTC/simple-demos/

For our solution the following demos could be merged:
- Auto-stop recording after specific interval using setRecordingDuration
- Auto Stop RecordRTC on Silence i.e. if someone stops speaking
- Include Your Logo in the recorded video
- Upload to server using jQuery over PHP
Related categories: JavaScript HTML5 jQuery WebRTC