Record Video with Audio using Webcam in HTML Webpage

3
votes

I wish to know how to record a video from webcam which also records audio, currently the solutions out there like getUserMedia only records Video or Audio, one at a time, it does not record video that has audio in it.

I need to create a website that allows users to RECORD LIVE VIDEO and save it in the website. I tried using some of the existing plugins like navigator.getUserMedia to record the video but that video get's recorded without any audio.

So I just wish to know what changes do I need to do to getUserMedia so that it records audio as well while recording video.

I have never done this before so for some this may sound like a silly question but I really need to understand how to record LIVE VIDEO using webcam.

For now I am using navigator.getUserMedia

I read somewhere that you cannot record VIDEO & AUDIO simultaneously using getUserMedia, is this true?

I don't know if there is any other plugin that is free and will help me record proper LIVE VIDEO. I am open to using any other plugin may that be jQuery or Flash, I just need to know how to record a proper VIDEO.

When I say proper video I mean that that video should have audio as well.

Thank you in advance.

PS:- I am using PHP, Apache Webserver for back-end processing.

2
jqueryhtmlflashvideo-capturegetusermedia
Try ScriptCam, it's a jQuery plugin i think - melvindidit
ScriptCam has now reached end of life. - Octavian Naicu

2 Answers

4
votes

MediaDevices.getUserMedia() is now the preferred way to access the webcam and microphone. Navigator.getUserMedia() is now considered deprecated.

But regardless of how you access the webcam there are 2 (HTML) solutions for recording the audio/video data from the webcam:

1) Media Recorder API

It's been supported for sometime now by both Chrome (49+) and Firefox (30+). The audio/video data is recorded and stored in a Blob JS object. You can download it as .webm to your hard disk or POST it to a web server for storage.

The Media Recorder API is simple to implement but depending on the browser you will end up with different audio and video codecs in the .webm container. Chrome supports VP8,VP9, H.264 + Opus for audio while Firefox supports VP8 and Vorbis.

You might have to convert the video to the more widely supported .mp4 with AAC audio and H.264 video if you're planning on cross browser/device support.

Spec: https://w3c.github.io/mediacapture-record/MediaRecorder.html

Demo + codecs: https://addpipe.com/media-recorder-api-demo/

2) Recording a WebRTC stream

This involves opening a WebRTC connection to a media server like Kurento or Janus and recording the stream server side.

Despite being a more difficult implementation (you have to host, configure and maintain the media server) and having the same codecs/container issues it has a few advantages over Media Recorder API:

  • WebRTC support will come to Edge and even Safari
  • you can record long videos without worrying about RAM usage
  • streaming the data means in case of crash the data is not lost
2
votes

Take a look at the MediaRecorder API. It allows you to record video and audio pretty easy. Be aware, that this is very experimental.

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder