< Homepage

DM Puzzle - Capture your webcam stream with WebRTC and html5

Objective

We will learn how to capture a webcam stream in a <video> tag with WebRTC and, if you are still there, draw images from this stream with the <canvas> tag.

Catpure the webcam stream:

  1. create an html page that includes a js file and a <video> tag.
  2. set the <video> tag in autoplay.
  3. in the js file:
    • ask the user permission to access his/her webcam and if the user accepts, fill the <video> tag with the captured webcam stream.
    • set the <video> tag width and height to 320x240.

[OPTIONAL] Take screenshots from your webcam stream:

  1. add a button, a canvas element in your html file.
  2. set a listener on the <button>. When a user clicks on it, it should take a screenshot of the webcam stream:
    • add the listener
    • create the callback: use the <canvas> context to draw an image from the <video>.
    • Use the filter css property to add an effect on your video and canvas picture
Example:
On your html page:
  • a notice should prompt to ask you if you allow the webcam access
  • If you accept, the webcam should stream in the page
  • When you click on the 'take screenshot' button, you should have a screenshot nearby the video stream
A live example is accessible here: http://ynote.hk/experiments-webrtc/
login: dmuser
pwd: 3xperim3nts

Prerequisites

Instructions

  1. Keep it fun and simple!
  2. Do it quick and dirty! Do not reach for perfection (you know what I mean)!
  3. Do not spend more than the expected time. If you're having a hard time ask for help or have a look at the solution.
  4. Have fun and if you want to, read more about the puzzle subject once you're done.
    Curiosity is the path to knowledge.

To be resolved before

28, January 2015

Expected time to resolution

Less than 2 hour

Expected number of lines

Less than 100

How

Lost?

  • In the documentation, look for:

    • [webrtc] check the example to know how to recover a local video stream
    • [canvas]The image parameter value for the method drawImage() can be an HTMLVideoElement
  • You can also check this example

Definitely lost?

Show solution