Capture Photo From a Desktop Webcam and Upload in a Web Browser Nodejs

Taking still photos with WebRTC

This commodity shows how to use WebRTC to access the camera on a calculator or mobile phone with WebRTC support and take a photo with it.

WebRTC-based image capture app — on the left we have a video stream taken from a webcam and a take photo button, on the right we have the still image output from taking the photo

You can also jump straight to the Demo if you like.

The HTML markup

Our HTML interface has two main operational sections: the stream and capture console and the presentation panel. Each of these is presented side-by-side in its own <div> to facilitate styling and control.

The kickoff panel on the left contains two components: a <video> chemical element, which will receive the stream from WebRTC, and a <button> the user clicks to capture a video frame.

                                                                            <div                    class                                          =                      "camera"                                        >                                                                              <video                    id                                          =                      "video"                                        >                  Video stream not available.                                          </video                    >                                                                              <push button                    id                                          =                      "startbutton"                                        >                  Take photograph                                          </push                    >                                                                              </div                    >

This is straightforward, and we'll meet how information technology ties together when we get into the JavaScript code.

Next, we have a <sail> chemical element into which the captured frames are stored, potentially manipulated in some fashion, and so converted into an output prototype file. This canvass is kept hidden by styling the canvas with brandish :none, to avoid cluttering up the screen — the user does not need to see this intermediate stage.

We besides accept an <img> element into which we volition depict the epitome — this is the last display shown to the user.

                                                                            <sheet                    id                                          =                      "canvass"                                        >                                                                              <div                    class                                          =                      "output"                                        >                                                                              <img                    id                                          =                      "photo"                                        alt                                          =                      "The screen capture will announced in this box."                                        >                                                                              </div                    >                                                                              </canvas                    >

That's all of the relevant HTML. The balance is merely some folio layout fluff and a bit of text offering a link back to this folio.

The JavaScript code

Now let's have a look at the JavaScript code. We'll suspension it up into a few seize with teeth-sized pieces to brand information technology easier to explain.

Initialization

We start by wrapping the whole script in an bearding function to avoid global variables, so setting upwardly diverse variables we'll exist using.

                                  (                  function                  (                  )                  {                  var                  width                  =                  320                  ;                  // We will calibration the photo width to this                  var                  summit                  =                  0                  ;                  // This will be computed based on the input stream                  var                  streaming                  =                  false                  ;                  var                  video                  =                  null                  ;                  var                  canvas                  =                  zip                  ;                  var                  photograph                  =                  null                  ;                  var                  startbutton                  =                  null                  ;

Those variables are:

width: Whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.
height: The output pinnacle of the prototype will be computed given the width and the attribute ratio of the stream.
streaming: Indicates whether or non in that location is currently an active stream of video running.
video: This will be a reference to the <video> element after the page is done loading.
canvass: This will exist a reference to the <canvass> chemical element after the page is done loading.
photo: This will be a reference to the <img> element after the folio is done loading.
startbutton: This will exist a reference to the <push> element that's used to trigger capture. We'll get that afterward the page is done loading.

The startup() function

The startup() function is run when the page has finished loading, courtesy of EventTarget.addEventListener. This function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to constitute the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an epitome.

Getting element references

Outset, nosotros grab references to the major elements we demand to be able to access.

                                  function                  startup                  (                  )                  {                  video                  =                  document.                  getElementById                  (                  'video'                  )                  ;                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  photo                  =                  document.                  getElementById                  (                  'photo'                  )                  ;                  startbutton                  =                  certificate.                  getElementById                  (                  'startbutton'                  )                  ;

Get the media stream

The adjacent task is to get the media stream:

                                  navigator.mediaDevices.                  getUserMedia                  (                  {                  video                  :                  truthful                  ,                  audio                  :                  faux                  }                  )                  .                  and so                  (                  part                  (                  stream                  )                  {                  video.srcObject                  =                  stream;                  video.                  play                  (                  )                  ;                  }                  )                  .                  catch                  (                  function                  (                  err                  )                  {                  console.                  log                  (                  "An error occurred: "                  +                  err)                  ;                  }                  )                  ;

Here, we're calling MediaDevices.getUserMedia() and requesting a video stream (without sound). It returns a promise which we attach success and failure callbacks to.

The success callback receives a stream object every bit input. It is the <video> chemical element's source to our new stream.

Once the stream is linked to the <video> chemical element, we start it playing by calling HTMLMediaElement.play().

The error callback is chosen if opening the stream doesn't piece of work. This will happen for case if there'due south no uniform camera continued, or the user denied access.

Heed for the video to first playing

Subsequently calling HTMLMediaElement.play() on the <video>, in that location'south a (hopefully brief) period of fourth dimension that elapses before the stream of video begins to flow. To avoid blocking until that happens, we add together an effect listener to video for the canplay result, which is delivered when the video playback really begins. At that point, all the properties in the video object accept been configured based on the stream's format.

                                  video.                  addEventListener                  (                  'canplay'                  ,                  role                  (                  ev                  )                  {                  if                  (                  !streaming)                  {                  height                  =                  video.videoHeight                  /                  (video.videoWidth/width)                  ;                  video.                  setAttribute                  (                  'width'                  ,                  width)                  ;                  video.                  setAttribute                  (                  'height'                  ,                  height)                  ;                  canvas.                  setAttribute                  (                  'width'                  ,                  width)                  ;                  canvas.                  setAttribute                  (                  'height'                  ,                  height)                  ;                  streaming                  =                  truthful                  ;                  }                  }                  ,                  false                  )                  ;

This callback does nothing unless it'due south the kickoff time it's been called; this is tested past looking at the value of our streaming variable, which is false the offset time this method is run.

If this is indeed the first run, we ready the video's height based on the size difference between the video's actual size, video.videoWidth, and the width at which we're going to return information technology, width.

Finally, the width and top of both the video and the canvas are fix to match each other past calling Chemical element.setAttribute() on each of the two properties on each element, and setting widths and heights every bit appropriate. Finally, we prepare the streaming variable to true to prevent the states from inadvertently running this setup lawmaking once again.

Handle clicks on the button

To capture a still photo each time the user clicks the startbutton, we need to add an event listener to the push, to be chosen when the click issue is issued:

                                  startbutton.                  addEventListener                  (                  'click'                  ,                  function                  (                  ev                  )                  {                  takepicture                  (                  )                  ;                  ev.                  preventDefault                  (                  )                  ;                  }                  ,                  faux                  )                  ;

This method is simple plenty: it just calls our takepicture() function, divers below in the section Capturing a frame from the stream, then calls Event.preventDefault() on the received event to forestall the click from being handled more than once.

Wrapping up the startup() method

There are only two more lines of lawmaking in the startup() method:

This is where nosotros phone call the clearphoto() method we'll depict below in the section Immigration the photo box.

Immigration the photograph box

Clearing the photo box involves creating an image, then converting it into a format usable by the <img> chemical element that displays the well-nigh recently captured frame. That code looks similar this:

                                  function                  clearphoto                  (                  )                  {                  var                  context                  =                  canvass.                  getContext                  (                  '2nd'                  )                  ;                  context.fillStyle                  =                  "#AAA"                  ;                  context.                  fillRect                  (                  0                  ,                  0                  ,                  canvas.width,                  canvas.height)                  ;                  var                  data                  =                  canvas.                  toDataURL                  (                  'image/png'                  )                  ;                  photo.                  setAttribute                  (                  'src'                  ,                  information)                  ;                  }

Nosotros starting time by getting a reference to the subconscious <canvass> element that we use for offscreen rendering. Next nosotros gear up the fillStyle to #AAA (a fairly light gray), and fill up the entire canvass with that color past calling fillRect().

Last in this role, nosotros convert the sail into a PNG image and call photo.setAttribute() to make our captured even so box display the image.

Capturing a frame from the stream

There's 1 last function to ascertain, and it's the bespeak to the entire exercise: the takepicture() function, whose chore information technology is to capture the currently displayed video frame, convert it into a PNG file, and display it in the captured frame box. The lawmaking looks like this:

                                  function                  takepicture                  (                  )                  {                  var                  context                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  if                  (width                  &&                  meridian)                  {                  sail.width                  =                  width;                  canvas.height                  =                  height;                  context.                  drawImage                  (video,                  0                  ,                  0                  ,                  width,                  meridian)                  ;                  var                  data                  =                  canvas.                  toDataURL                  (                  'image/png'                  )                  ;                  photograph.                  setAttribute                  (                  'src'                  ,                  data)                  ;                  }                  else                  {                  clearphoto                  (                  )                  ;                  }                  }

Every bit is the instance whatever time we need to piece of work with the contents of a sail, we first past getting the 2d drawing context for the hidden canvas.

And then, if the width and height are both non-goose egg (pregnant that there's at to the lowest degree potentially valid image data), we ready the width and height of the canvas to match that of the captured frame, so phone call drawImage() to draw the current frame of the video into the context, filling the entire canvas with the frame epitome.

Note: This takes advantage of the fact that the HTMLVideoElement interface looks similar an HTMLImageElement to whatever API that accepts an HTMLImageElement as a parameter, with the video's current frame presented as the paradigm'southward contents.

Once the canvas contains the captured image, we convert information technology to PNG format by calling HTMLCanvasElement.toDataURL() on it; finally, we call photo.setAttribute() to make our captured still box display the image.

If there isn't a valid epitome available (that is, the width and height are both 0), we clear the contents of the captured frame box by calling clearphoto().

Demo

HTML

                                                                    <div                  course                                      =                    "contentarea"                                    >                                                                      <h1                  >                                MDN - WebRTC: Still photo capture demo                                                      </h1                  >                                                                      <p                  >                                This instance demonstrates how to set a media stream using your built-in webcam, fetch an image from that stream, and create a PNG using that paradigm.                                                      </p                  >                                                                      <div                  course                                      =                    "photographic camera"                                    >                                                                      <video                  id                                      =                    "video"                                    >                Video stream not available.                                      </video                  >                                                                      <push                  id                                      =                    "startbutton"                                    >                Take photo                                      </push button                  >                                                                      </div                  >                                                                      <canvas                  id                                      =                    "sail"                                    >                                                                      </canvas                  >                                                                      <div                  grade                                      =                    "output"                                    >                                                                      <img                  id                                      =                    "photo"                                    alt                                      =                    "The screen capture volition appear in this box."                                    >                                                                      </div                  >                                                                      <p                  >                                Visit our article                                                      <a                  href                                      =                    "https://developer.mozilla.org/en-U.s.a./docs/Web/API/WebRTC_API/Taking_still_photos"                                    >                                Taking even so photos with WebRTC                                      </a                  >                                to learn more about the technologies used here.                                                      </p                  >                                                                      </div                  >

CSS

                              #video                {                edge                :                1px solid black;                box-shadow                :                2px 2px 3px black;                width                :320px;                summit                :240px;                }                #photograph                {                edge                :                1px solid blackness;                box-shadow                :                2px 2px 3px blackness;                width                :320px;                meridian                :240px;                }                #canvas                {                display                :none;                }                .photographic camera                {                width                :                340px;                display                :inline-block;                }                .output                {                width                :                340px;                display                :inline-cake;                vertical-align                :                top;                }                #startbutton                {                brandish                :cake;                position                :relative;                margin-left                :auto;                margin-right                :auto;                bottom                :32px;                background-color                :                rgba                (0,                150,                0,                0.5)                ;                edge                :                1px solid                rgba                (255,                255,                255,                0.vii)                ;                box-shadow                :                0px 0px 1px 2px                rgba                (0,                0,                0,                0.2)                ;                font-size                :                14px;                font-family                :                "Lucida Grande"                ,                "Arial"                ,                sans-serif;                color                :                rgba                (255,                255,                255,                ane.0)                ;                }                .contentarea                {                font-size                :                16px;                font-family                :                "Lucida Grande"                ,                "Arial"                ,                sans-serif;                width                :                760px;                }

JavaScript

                              (                function                (                )                {                // The width and superlative of the captured photograph. We will set the                // width to the value divers here, just the tiptop will be                // calculated based on the attribute ratio of the input stream.                var                width                =                320                ;                // We volition scale the photo width to this                var                height                =                0                ;                // This volition be computed based on the input stream                // |streaming| indicates whether or non we're currently streaming                // video from the photographic camera. Apparently, we starting time at false.                var                streaming                =                false                ;                // The various HTML elements nosotros need to configure or command. These                // will be set up by the startup() function.                var                video                =                cipher                ;                var                canvas                =                cipher                ;                var                photograph                =                null                ;                var                startbutton                =                naught                ;                office                showViewLiveResultButton                (                )                {                if                (window.self                !==                window.meridian)                {                // Ensure that if our document is in a frame, we get the user                // to start open it in its own tab or window. Otherwise, it                // won't be able to request permission for photographic camera admission.                document.                querySelector                (                ".contentarea"                )                .                remove                (                )                ;                const                push button                =                document.                createElement                (                "push"                )                ;                push.textContent                =                "View live result of the example code above"                ;                document.torso.                append                (button)                ;                button.                addEventListener                (                'click'                ,                (                )                =>                window.                open                (location.href)                )                ;                return                true                ;                }                return                false                ;                }                office                startup                (                )                {                if                (                showViewLiveResultButton                (                )                )                {                return                ;                }                video                =                document.                getElementById                (                'video'                )                ;                canvas                =                document.                getElementById                (                'canvas'                )                ;                photograph                =                certificate.                getElementById                (                'photograph'                )                ;                startbutton                =                certificate.                getElementById                (                'startbutton'                )                ;                navigator.mediaDevices.                getUserMedia                (                {                video                :                true                ,                audio                :                false                }                )                .                and so                (                function                (                stream                )                {                video.srcObject                =                stream;                video.                play                (                )                ;                }                )                .                grab                (                part                (                err                )                {                console.                log                (                "An error occurred: "                +                err)                ;                }                )                ;                video.                addEventListener                (                'canplay'                ,                office                (                ev                )                {                if                (                !streaming)                {                meridian                =                video.videoHeight                /                (video.videoWidth/width)                ;                // Firefox currently has a bug where the acme can't be read from                // the video, and so we will make assumptions if this happens.                if                (                isNaN                (elevation)                )                {                summit                =                width                /                (                4                /                3                )                ;                }                video.                setAttribute                (                'width'                ,                width)                ;                video.                setAttribute                (                'meridian'                ,                peak)                ;                sail.                setAttribute                (                'width'                ,                width)                ;                canvas.                setAttribute                (                'height'                ,                height)                ;                streaming                =                true                ;                }                }                ,                false                )                ;                startbutton.                addEventListener                (                'click'                ,                function                (                ev                )                {                takepicture                (                )                ;                ev.                preventDefault                (                )                ;                }                ,                false                )                ;                clearphoto                (                )                ;                }                // Fill the photo with an indication that none has been                // captured.                office                clearphoto                (                )                {                var                context                =                canvas.                getContext                (                '2d'                )                ;                context.fillStyle                =                "#AAA"                ;                context.                fillRect                (                0                ,                0                ,                sail.width,                canvas.height)                ;                var                data                =                canvas.                toDataURL                (                'paradigm/png'                )                ;                photo.                setAttribute                (                'src'                ,                data)                ;                }                // Capture a photograph by fetching the current contents of the video                // and cartoon information technology into a canvas, and so converting that to a PNG                // format data URL. By cartoon it on an offscreen canvas and and then                // cartoon that to the screen, we tin modify its size and/or apply                // other changes before cartoon it.                function                takepicture                (                )                {                var                context                =                sheet.                getContext                (                '2d'                )                ;                if                (width                &&                pinnacle)                {                canvas.width                =                width;                canvas.height                =                height;                context.                drawImage                (video,                0                ,                0                ,                width,                tiptop)                ;                var                data                =                sail.                toDataURL                (                'epitome/png'                )                ;                photograph.                setAttribute                (                'src'                ,                data)                ;                }                else                {                clearphoto                (                )                ;                }                }                // Ready our outcome listener to run the startup process                // once loading is complete.                window.                addEventListener                (                'load'                ,                startup,                false                )                ;                }                )                (                )                ;

Issue

Fun with filters

Since nosotros're capturing images from the user'due south webcam by grabbing frames from a <video> chemical element, we can very easily utilise filters and fun effects to the video. Every bit it turns out, any CSS filters yous apply to the element using the filter belongings affect the captured photo. These filters tin range from the simple (making the image black and white) to the extreme (gaussian blurs and hue rotation).

You can play with this outcome using, for example, the Firefox programmer tools' style editor; see Edit CSS filters for details on how to exercise and then.

Using specific devices

Y'all tin, if needed, restrict the ready of permitted video sources to a specific device or prepare of devices. To do so, call MediaDevices.enumerateDevices. When the promise is fulfilled with an array of MediaDeviceInfo objects describing the bachelor devices, find the ones that you lot want to allow and specify the corresponding deviceId or deviceIdsouth in the MediaTrackConstraints object passed into getUserMedia().