Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 getUserMedia record webcam, both audio and video

Is it possible to use Chrome to capture video (webcam) and audio (microphone) from the browser and then save the stream as video file?

I would like to use this to create a video/photobooth-like application that allows users to record a simple (30 second) message (both video and audio) to files that can later be watched.

I have read the documentation but I have not (yet) seen any examples on how to capture both audio & video, also I did not find a way yet to store the results in a video file.

Who can help?

like image 859
Harm Kabisa Avatar asked May 01 '13 13:05

Harm Kabisa


People also ask

What HTML5 tag is used to show the contents of a webcam?

To integrate webcam with webpage we will use HTML <video> tag.

What is navigator MediaDevices getUserMedia?

The MediaDevices . getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.


2 Answers

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams( still under implementation) . It allows web apps to create a file from a live audio/video session.

<script language="javascript" type="text/javascript"> function onVideoFail(e) {     console.log('webcam fail!', e);   };  function hasGetUserMedia() {   // Note: Opera is unprefixed.   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||             navigator.mozGetUserMedia || navigator.msGetUserMedia); }  if (hasGetUserMedia()) {   // Good to go! } else {   alert('getUserMedia() is not supported in your browser'); }  window.URL = window.URL || window.webkitURL; navigator.getUserMedia  = navigator.getUserMedia ||                           navigator.webkitGetUserMedia ||                           navigator.mozGetUserMedia ||                             navigator.msGetUserMedia;  var video = document.querySelector('video'); var streamRecorder; var webcamstream;  if (navigator.getUserMedia) {   navigator.getUserMedia({audio: true, video: true}, function(stream) {     video.src = window.URL.createObjectURL(stream);     webcamstream = stream; //  streamrecorder = webcamstream.record();   }, onVideoFail); } else {     alert ('failed'); }  function startRecording() {     streamRecorder = webcamstream.record();     setTimeout(stopRecording, 10000); } function stopRecording() {     streamRecorder.getRecordedData(postVideoToServer); } function postVideoToServer(videoblob) {      var data = {};     data.video = videoblob;     data.metadata = 'test metadata';     data.action = "upload_video";     jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess); } function onUploadSuccess() {     alert ('video uploaded'); }  </script>  <div id="webcamcontrols">     <button class="recordbutton" onclick="startRecording();">RECORD</button> </div> 

http://www.w3.org/TR/mediastream-recording/

like image 50
kongaraju Avatar answered Sep 21 '22 17:09

kongaraju


As far as i am aware there is no such way to record audio and video together and save them as one file. it is possible to capture and save the audio as a wav file and the video as a webm file.

here is a great post on how to save your video; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

and a usefully utillity to save your audio

https://github.com/mattdiamond/Recorderjs

like image 27
TarranJones Avatar answered Sep 24 '22 17:09

TarranJones