Record Audio/Video in Browser using JavaScript

I want to prototype the audio/video recording capability in browsers using HTML5. Something similar to [login to view URL] but simpler, on desktop browsers only, mobile not required at this time. Or like [login to view URL] but with the requirements shown below. Here are the specs:

1. HTML5 based audio & video capture. Available recording devices must be detected by browser. Need two buttons to select the recording mode, camera button for video and mic button for audio. If camera & mic are found on the computer, both buttons are available. If only mic is present, then audio mode only, video is disabled. If none, then no recording available, both buttons are disabled.

2. Cross browser compatible. Should work on FF, Chrome, Edge, Safari & Opera on PC & Mac

3. Clicking either button will bring up a popup for audio or video recordings made in the current session.

4. Audio can be wav or mp3. Stereo preferred, mono is ok. Video can be webm or mp4. Video options: 320x240,640x480,720p,1080p & 15/24/30 frames per second. If selected resolution is not supported by camera, then fallback to highest supported resolution. All recordings must play on all browsers. Options to be set using config variables.

5. Would prefer a standard file format generated across all browsers e.g. File generated must use the same encoder, format & container on all browsers.

6. Can use any open source third-party API or library if free for commercial use e.g. MIT license.

7. When recording audio/video, should show preview & time elapsed in the popup. Must have ability to Pause, Resume & Stop the recording.

8. Must be able to minimize the popup but continue the recording in the background. Will have to re-open the popup to stop recording. Alternately, something similar to [login to view URL] would be acceptable, which keeps the video frame active but small and visible. It could also be a draggable element like [login to view URL]

9. Must have a timeout set to 5 minutes to auto stop any active recording, in case someone forgets it is running.

10. Each recording must get a unique filename – current date (YYYYMMDD) + time (HHMMSS) + new uuidv4()

11. Each recording gets added to a dropdown list on the corresponding audio or video popup. Should be able to select any single recording from current browser session for playback in the popup. Must be able to delete any recording and remove it from the browser completely.

12. Must be able to Download each recording with Save As dialog, and Upload each recording using XMLHTTPRequest or ajax. Should use default filename generated above.

13. Clear or Reset button to delete all recordings and reload the page.

14. When the browser is closed, all recordings that were not uploaded or downloaded will be lost.

15. 100% HTML5/JavaScript based solution. No FLASH

16. Please reply with "I have read and understood the complete Browser AV Capture Requirements" as the first line of your proposal so I know you read the whole thing. Any replies without this first line will be ignored.

If this prototype is done well, there will be more work to follow.

Skills: HTML5, JavaScript

See more: delete record using javascript php, flash record audio video upload server, audio video streaming using java, html5 video recording and upload, mediarecorder example, html5 audio recording example, html5 record audio to server, html5 audio recording browser support, javascript record audio, electron record audio, webrtc record video and audio, javascript, audio video streaming using java free, minimize browser using javascript, javascript record audio browser, record audio video, record audio video file asp net, java screen record audio video, record webcam video browser, record audio video webcam

About the Employer:
( 363 reviews ) Faridabad, India

Project ID: #16704228