Minimal web camera demo The version also puts the video output to a html canvas so that text and graphics could be overlayed on top of the recorded image Useful for image processing recording machine learning and so on var video document createElement video document body appendChild video video width 200 video height 200 video autoplay true console log video video id video autoplay true width 200 height 200 video if navigator mediaDevices getUserMedia var successCallback function stream video srcObject stream var errorCallback function error console log error navigator mediaDevices getUserMedia audio false video facingMode ideal environment prefer rear facing camera then successCallback errorCallback var canvas document createElement canvas document body appendChild canvas canvas width 200 canvas height 200 var context canvas getContext 2d canvas id mycanvas width 225 height 225 style border 1px solid ff0000 canvas function renderFrame re register callback requestAnimationFrame renderFrame set internal canvas size to match HTML element size canvas width canvas scrollWidth canvas height canvas scrollHeight if video readyState video HAVE_ENOUGH_DATA return scale and horizontally center the camera image var videoSize width video videoWidth height video videoHeight var canvasSize width canvas width height canvas height var renderSize calculateSize videoSize canvasSize var renderSize 124 var xOffset 0 canvasSize width renderSize width 2 context drawImage video 0 0 225 225 context font 10px Arial context fillText From Camera 5 15 if you want to get the raw pixel data for analysis get array of the image data var imageData this context getImageData 0 0 renderSize width renderSize height var qrData jsQR decodeQRFromImage imageData data imageData width imageData height end renderFrame let button document createElement button button innerHTML Click to start the webcam capture video button onclick function requestAnimationFrame renderFrame document body appendChild button This version records the video directly from the video stream chunks are recorded as the video is collected On stop option to both view play the video and download it Uses the web MediaRecorder var video document createElement video video id video document body appendChild video video width 200 video height 200 video autoplay true if navigator mediaDevices getUserMedia var successCallback function stream video srcObject stream mediaRecorder new MediaRecorder stream var errorCallback function error console log error navigator mediaDevices getUserMedia audio false video facingMode ideal environment prefer rear facing camera then successCallback errorCallback recording video section of the code var mediaRecorder null var chunks let div document createElement button div innerHTML start video recording document body appendChild div div onclick function mediaRecorder onstop stop mediaRecorder ondataavailable e Push the recorded media data to the chunks array chunks push e data mediaRecorder start console log mediaRecorder state console log recorder started document body style background red document body style color black let div document createElement button div innerHTML stop video recording document body appendChild div div onclick function mediaRecorder stop console log mediaRecorder state console log recorder stopped document body style background document body style color document body style height 400pt var stop function e console log recorder stopped audio webm or video mp4 const blob new Blob chunks type audio ogg codecs opus const audioURL window URL createObjectURL blob audio src audioURL const blob new Blob chunks type video mp4 chunks const videoURL window URL createObjectURL blob const recordedMedia document createElement video recordedMedia width 200 recordedMedia height 200 document body appendChild recordedMedia recordedMedia controls true recordedMedia src videoURL const downloadButton document createElement a document body appendChild downloadButton downloadButton download Recorded Media downloadButton href videoURL downloadButton innerText Download it downloadButton onclick URL revokeObjectURL recordedMedia end stop This version extends the previous recording version however instead of recording directly from the video the canvas output is recorded i e video is put onto the canvas area which is then drawn on put text on it or any image manipulation This canvas area is the one that s recorded var video document createElement video video id video document body appendChild video video width 200 video height 200 video autoplay true if navigator mediaDevices getUserMedia var successCallback function stream video srcObject stream var errorCallback function error console log error navigator mediaDevices getUserMedia audio false video facingMode ideal environment prefer rear facing camera then successCallback errorCallback var canvas document createElement canvas canvas id canvas document body appendChild canvas canvas width 200 canvas height 200 var context canvas getContext 2d function renderFrame re register callback requestAnimationFrame renderFrame set internal canvas size to match HTML element size canvas width canvas scrollWidth canvas height canvas scrollHeight if video readyState video HAVE_ENOUGH_DATA return scale and horizontally center the camera image var videoSize width video videoWidth height video videoHeight var canvasSize width canvas width height canvas height var renderSize calculateSize videoSize canvasSize var renderSize 124 var xOffset 0 canvasSize width renderSize width 2 context drawImage video 0 0 225 225 context font 10px Arial context fillText Canvas Version 5 15 end renderFrame requestAnimationFrame renderFrame recording video var chunks var mediaRecorder new MediaRecorder canvas captureStream 30 mediaRecorder ondataavailable saveChunks function saveChunks e Push the recorded media data to the chunks array chunks push e data let div document createElement button div innerHTML start video recording document body appendChild div div onclick function mediaRecorder onstop stop mediaRecorder start console log mediaRecorder state console log recorder started document body style background red document body style color black let div document createElement button div innerHTML stop video recording document body appendChild div div onclick function mediaRecorder stop console log mediaRecorder state console log recorder stopped document body style background document body style color document body style height 400pt var stop function e console log recorder stopped audio webm or video mp4 const blob new Blob chunks type audio ogg codecs opus const audioURL window URL createObjectURL blob audio src audioURL const blob new Blob chunks type video mp4 chunks const videoURL window URL createObjectURL blob const recordedMedia document createElement video recordedMedia width 200 recordedMedia height 200 document body appendChild recordedMedia recordedMedia controls true recordedMedia src videoURL const downloadButton document createElement a document body appendChild downloadButton downloadButton download Recorded Media downloadButton href videoURL downloadButton innerText Download it downloadButton onclick URL revokeObjectURL recordedMedia end stop
type video mp4 chunks const videoURL window URL createObjectURL blob const recordedMedia document createElement video recordedMedia width 200 recordedMedia height 200 document body appendChild recordedMedia recordedMedia controls true recordedMedia src videoURL const downloadButton document createElement a document body appendChild downloadButton downloadButton download Recorded Media downloadButton href videoURL downloadButton innerText Download it downloadButton onclick URL revokeObjectURL recordedMedia end stop This version extends the previous recording version however instead of recording directly from the video the canvas output is recorded i e video is put onto the canvas area which is then drawn on put text on it or any image manipulation This canvas area is the one that s recorded var video document createElement video video id video document body appendChild video video width 200 video height 200 video autoplay true if navigator mediaDevices getUserMedia var successCallback function stream video srcObject stream var errorCallback function error console log error navigator mediaDevices getUserMedia audio false video facingMode ideal environment prefer rear facing camera then successCallback errorCallback var canvas document createElement canvas canvas id canvas document body appendChild canvas canvas width 200 canvas height 200 var context canvas getContext 2d function renderFrame re register callback requestAnimationFrame renderFrame set internal canvas size to match HTML element size canvas width canvas scrollWidth canvas height canvas scrollHeight if video readyState video HAVE_ENOUGH_DATA return scale and horizontally center the camera image var videoSize width video videoWidth height video videoHeight var canvasSize width canvas width height canvas height var renderSize calculateSize videoSize canvasSize var renderSize 124 var xOffset 0 canvasSize width renderSize width 2 context drawImage video 0 0 225 225 context font 10px Arial context fillText Canvas Version 5 15 end renderFrame requestAnimationFrame renderFrame recording video var chunks var mediaRecorder new MediaRecorder canvas captureStream 30 mediaRecorder ondataavailable saveChunks function saveChunks e Push the recorded media data to the chunks array chunks push e data let div document createElement button div innerHTML start video recording document body appendChild div div onclick function mediaRecorder onstop stop mediaRecorder start console log mediaRecorder state console log recorder started document body style background red document body style color black let div document createElement button div innerHTML stop video recording document body appendChild div div onclick function mediaRecorder stop console log mediaRecorder state console log recorder stopped document body style background document body style color document body style height 400pt var stop function e console log recorder stopped audio webm or video mp4 const blob new Blob chunks type audio ogg codecs opus const audioURL window URL createObjectURL blob audio src audioURL const blob new Blob chunks type video mp4 chunks const videoURL window URL createObjectURL blob const recordedMedia document createElement video recordedMedia width 200 recordedMedia height 200 document body appendChild recordedMedia recordedMedia controls true recordedMedia src videoURL const downloadButton document createElement a document body appendChild downloadButton downloadButton download Recorded Media downloadButton href videoURL downloadButton innerText Download it downloadButton onclick URL revokeObjectURL recordedMedia end stop