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     lt  DOCTYPE html gt   lt html gt   lt head gt    lt script type  text javascript  gt   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          lt  script gt    lt  head gt       lt body gt       lt canvas width  640  height  480  id  c  gt  lt  canvas gt       lt input type  button  value  RECORD  onClick  enter     gt       lt input type  button  value  SAVE    gt       lt video id  my video  width  640  height  480   gt   lt  body gt   lt  html gt    I want to save the stream upon a save button click

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

The followin example shows how to capture and process video frames in HTML5   x000D   x000D   lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Capturing  amp  Processing Video in HTML5 lt  title gt   lt  head gt   lt body gt       lt div gt           lt h2 gt Camera Preview lt  h2 gt           lt video id  cameraPreview  width  240  height  180  autoplay gt  lt  video gt           lt p gt               lt button id  startButton  onclick  startCapture     gt Start Capture lt  button gt               lt button id  stopButton  onclick  stopCapture     gt Stop Capture lt  button gt           lt  p gt       lt  div gt        lt div gt           lt h2 gt Processing Preview lt  h2 gt           lt canvas id  processingPreview  width  240  height  180  gt  lt  canvas gt       lt  div gt        lt div gt           lt h2 gt Recording Preview lt  h2 gt           lt video id  recordingPreview  width  240  height  180  autoplay controls gt  lt  video gt           lt p gt               lt a id  downloadButton  gt Download lt  a gt           lt  p gt       lt  div gt        lt script gt       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    gt                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    gt                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                        lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D

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

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   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   gt          stream   stm        reqBtn style display    none         startBtn removeAttribute  disabled          video src   URL createObjectURL stream          catch e   gt  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   gt        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   lt div gt      lt button id  request  gt      Request Camera    lt  button gt     lt button id  start  gt      Start Recording    lt  button gt     lt button id  stop  gt      Stop Recording    lt  button gt     lt ul id  ul  gt      Downloads List     lt  ul gt    lt  div gt   lt video id  video  autoplay gt  lt  video gt  x000D   x000D   x000D

User · Answer

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

[javascript] HTML 5 video recording and storing a stream

Examples related to javascript

Examples related to html