HTML 5 video recording and storing a stream

Question

Using Html 5 I want to record video and save the stream into a local file. Given below is the code. In a button click it already invokes the camera and captures the video in the 'VIDEO' tag of HTML. Can I store the stream into a local file? Or can I store it as MP4 file?

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

function enter() {

    if (navigator.mozGetUserMedia) { 
       navigator.myGetMedia=navigator.mozGetUserMedia;
       navigator.myGetMedia({video: true}, connect, error); 
    } 
    else {
       alert("NO");
    }

    function connect(stream) {

        var video = document.getElementById("my_video");
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();

        var canvas = document.getElementById("c"); 
    }

    function error(e) { console.log(e); }

}

</script>

</head>    
<body>
    <canvas width="640" height="480" id="c"></canvas>
    <input type="button" value="RECORD" onClick="enter()"/>
    <input type="button" value="SAVE" />
    <video id="my_video" width="640" height="480"/>
</body>
</html>

I want to save the stream upon a save button click.

User · Answer

The followin example shows how to capture and process video frames in HTML5:

_x000D_

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Capturing & Processing Video in HTML5</title>
</head>
<body>
    <div>
        <h2>Camera Preview</h2>
        <video id="cameraPreview" width="240" height="180" autoplay></video>
        <p>
            <button id="startButton" onclick="startCapture();">Start Capture</button>
            <button id="stopButton" onclick="stopCapture();">Stop Capture</button>
        </p>
    </div>

    <div>
        <h2>Processing Preview</h2>
        <canvas id="processingPreview" width="240" height="180"></canvas>
    </div>

    <div>
        <h2>Recording Preview</h2>
        <video id="recordingPreview" width="240" height="180" autoplay controls></video>
        <p>
            <a id="downloadButton">Download</a>
        </p>
    </div>

    <script>

    const ROI_X = 250;
    const ROI_Y = 150;
    const ROI_WIDTH = 240;
    const ROI_HEIGHT = 180;
    
    const FPS = 25;
    
    let cameraStream = null;
    let processingStream = null;
    let mediaRecorder = null;
    let mediaChunks = null;
    let processingPreviewIntervalId = null;

    function processFrame() {
        let cameraPreview = document.getElementById("cameraPreview");
        
        processingPreview
            .getContext('2d')
            .drawImage(cameraPreview, ROI_X, ROI_Y, ROI_WIDTH, ROI_HEIGHT, 0, 0, ROI_WIDTH, ROI_HEIGHT);
    }
    
    function generateRecordingPreview() {
        let mediaBlob = new Blob(mediaChunks, { type: "video/webm" });
        let mediaBlobUrl = URL.createObjectURL(mediaBlob);
        
        let recordingPreview = document.getElementById("recordingPreview");
        recordingPreview.src = mediaBlobUrl;

        let downloadButton = document.getElementById("downloadButton");
        downloadButton.href = mediaBlobUrl;
        downloadButton.download = "RecordedVideo.webm";
    }
        
    function startCapture() {
        const constraints = { video: true, audio: false };
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
            cameraStream = stream;
            
            let processingPreview = document.getElementById("processingPreview");
            processingStream = processingPreview.captureStream(FPS);
            
            mediaRecorder = new MediaRecorder(processingStream);
            mediaChunks = []
            
            mediaRecorder.ondataavailable = function(event) {
                mediaChunks.push(event.data);
                if(mediaRecorder.state == "inactive") {
                    generateRecordingPreview();
                }
            };
            
            mediaRecorder.start();
            
            let cameraPreview = document.getElementById("cameraPreview");
            cameraPreview.srcObject = stream;
        
            processingPreviewIntervalId = setInterval(processFrame, 1000 / FPS);
        })
        .catch((err) => {
            alert("No media device found!");
        });
    };
    
    function stopCapture() {
        if(cameraStream != null) {
            cameraStream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        
        if(processingStream != null) {
            processingStream.getTracks().forEach(function(track) {
                track.stop();
            });
        }
        
        if(mediaRecorder != null) {
            if(mediaRecorder.state == "recording") {
                mediaRecorder.stop();
            }
        }
        
        if(processingPreviewIntervalId != null) {
            clearInterval(processingPreviewIntervalId);
            processingPreviewIntervalId = null;
        }
    };
    </script>
</body>
</html>

_x000D_

User · Answer

MediaRecorder API is the solution you are looking for,

Firefox has been supporting it for some time now, and the buzz is is Chrome is gonna implement it in its next release (Chrome 48), but guess you still might need to enable the experimental flag, apparently the flag won't be need from Chrome version 49, for more info check out this Chrome issue.

Meanwhile, a sample of how to do it in Firefox:

_x000D_

var video, reqBtn, startBtn, stopBtn, ul, stream, recorder;
video = document.getElementById('video');
reqBtn = document.getElementById('request');
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
ul = document.getElementById('ul');
reqBtn.onclick = requestVideo;
startBtn.onclick = startRecording;
stopBtn.onclick = stopRecording;
startBtn.disabled = true;
ul.style.display = 'none';
stopBtn.disabled = true;

function requestVideo() {
  navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    .then(stm => {
      stream = stm;
      reqBtn.style.display = 'none';
      startBtn.removeAttribute('disabled');
      video.src = URL.createObjectURL(stream);
    }).catch(e => console.error(e));
}

function startRecording() {
  recorder = new MediaRecorder(stream, {
    mimeType: 'video/mp4'
  });
  recorder.start();
  stopBtn.removeAttribute('disabled');
  startBtn.disabled = true;
}


function stopRecording() {
  recorder.ondataavailable = e => {
    ul.style.display = 'block';
    var a = document.createElement('a'),
      li = document.createElement('li');
    a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join('');
    a.href = URL.createObjectURL(e.data);
    a.textContent = a.download;
    li.appendChild(a);
    ul.appendChild(li);
  };
  recorder.stop();
  startBtn.removeAttribute('disabled');
  stopBtn.disabled = true;
}

_x000D_

<div>

  <button id='request'>
    Request Camera
  </button>
  <button id='start'>
    Start Recording
  </button>
  <button id='stop'>
    Stop Recording
  </button>
  <ul id='ul'>
    Downloads List:
  </ul>

</div>
<video id='video' autoplay></video>

_x000D_

User · Answer

Currently there is no production ready HTML5 only solution for recording video over the web  The current available solutions are as follows   HTML Media Capture   Works on mobile devices and uses the OS  video capture app to capture video and upload POST it to a web server  You will get  mov files on iOS  these are unplayable on Android I ve tried  and  mp4 and  3gp on Android  At least the codecs will be the same  H 264 for video and AAC for audio in 99  of the devices     Image courtesy of https   addpipe com blog the-new-video-recording-prompt-for-media-capture-in-ios9   Flash and a media server on desktop    Video recording in Flash works like this  audio and video data is captured from the webcam and microphone  it s encoded using Sorenson Spark or H 264  video  and Nellymoser Asao or Speex  audio  then it s streamed  rtmp  to a media server  Red5  AMS  Wowza  where it is saved in  flv or  f4v files   The MediaStream Recording proposal     The MediaStream Recording is a proposal by the the Media Capture Task Force  a joint task force between the WebRTC and Device APIs working groups  for a JS API who s purpose is to make basic video recording in the browser very simple    Not supported by major browsers  When it ll get implemented  if it will  you will most probably end up with different filetypes  at least  ogg and  webm  and audio video codecs depending on the browser   Commercial solutions   There are a few saas and software  solutions out there that will handle some or all of the above including addpipe com  HDFVR  Nimbb and Cameratag   Further reading    HTML Media Capture video recording prompts in iOS9 HTML5 Video Recording covers both  HTML Media Capture and MediaStream Recording  Pipe is a saas for video recording that also handles the final conversion to  mp4

User · Answer

Here is an elegant library that records video in all supported browsers and supports uploading   https   www npmjs com package videojs-record

User · Answer

RecordRTC  WebRTC audio video recording  https   github com muaz-khan WebRTC-Experiment tree master RecordRTC   Audio recording both for Chrome and Firefox Video Gif recording for Chrome   Firefox has a little bit issues  will be recovered soon    Demo   https   www webrtc-experiment com RecordRTC     Creating  webm video from getUserMedia    http   ericbidelman tumblr com post 31486670538 creating-webm-video-from-getusermedia  Demo   http   html5-demos appspot com static getusermedia record-user-webm html    Capturing Audio  amp  Video in HTML5  http   www html5rocks com en tutorials getusermedia intro

[javascript] HTML 5 video recording and storing a stream

The answer is

Examples related to javascript

Examples related to html

Tags