HTML5: Recording Audio,Video Streams

MediaStreamRecorder API is webRTC API that supports recording streams with getUserMedia or remote streams passed over peerconnection 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("uploadvideo.php", data, onUploadSuccess);
    }
    function onUploadSuccess() {
        alert ('video uploaded');
    }
 
    </script>
 



    <video autoplay></video>
    <div id="webcamcontrols">
        <button class="recordbutton" onclick="startRecording();">RECORD</button>
    </div>


"getRecorderdedData" return  blob that was recorded.


Share this

Related Posts

Previous
Next Post »

15 comments

comments
June 10, 2013 at 1:03 PM delete

Hello! What must be in uploadvideo.php? And why it is nothing happends when recordbutton is clicked?

Reply
avatar
June 10, 2013 at 3:52 PM delete

uploadvideo.php is to store recorded blob in file. MediaStreamRecorder API is still under implementation, use chrome canary, it helps you to build advanced apps.

Reply
avatar
June 22, 2013 at 4:22 PM delete

what code should contain uploadvideo.php, to save blub in a file? or it is not already running in normal chrome? because when i press the record button nothing happens. It is only for canary?

Reply
avatar
June 22, 2013 at 4:25 PM delete

I'm trying to make the video comments service. Аre there other ways of recording video with sound, without the use of flash (for cross platform)?
Thank you.

Reply
avatar
July 7, 2013 at 11:56 AM delete

can you please give me the uploadvideo.php code or uploadvideo.jsp code
please send it at gunturumanohar2@gmail.com

Reply
avatar
August 4, 2013 at 10:00 PM delete

What about encoding ? In your exemple, what is the default mediat format ? Raw ? How can you encode before uploading ?

Reply
avatar
August 18, 2013 at 8:39 PM delete

Hi,

This is ganesan,I am trying to capture Audio and video from webcam using HTML5, But I can see video, Audio is not coming, My aim is like live streaming with audio and video and save it to server, I am using following url for reference as http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html

Please Share your source, I am struck with implementation, Kindly share your Email Address

Reply
avatar
August 23, 2013 at 1:03 AM delete

as he/she would make to put a camera ip?

Reply
avatar
September 2, 2014 at 11:39 AM delete

Hi,
Please help me to download the recorded audio without using libraries in javascript

Reply
avatar
September 5, 2014 at 9:51 AM delete

Hi,
Please help me to download the recorded video without using libraries in javascript

Reply
avatar
September 5, 2014 at 3:27 PM delete

hi,
please help me to download the video and playback the video i.e.,convert the recorded audio from webcam to webm format using javascript or html5 that to without using any of the libraries.

Reply
avatar
June 2, 2015 at 7:15 PM delete

webcamstream.record is not a function on RECORD button click

Reply
avatar
August 9, 2015 at 3:57 PM delete

Hi,
Did you find a solution for this ?
I am also getting this error message.

Reply
avatar
Anonymous
November 27, 2015 at 12:41 PM delete This comment has been removed by the author.
avatar
Anonymous
November 27, 2015 at 12:42 PM delete

I am also getting the same error as "webcamstream.record is not a function", Please guide me to resolve this error or suggest me any other way to achieve this functionality.

Reply
avatar