21 thoughts on “Streaming Your Cam To An HTML5 Canvas Element”

  1. A word of caution, the MediaStream object shown in the video is ear-marked to be deprecated. You guys can refer to the srcObject property of the HTML5 video element instead. A more up-to-date code snippet using promises looks something like this:

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

    <script>

    var video = document.getElementById('target');

    navigator.mediaDevices.getUserMedia({
    video: true,
    audio:false
    }).then( stream => {
    video.srcObject = stream;
    video.play();
    }).catch( error => console.log(error) );

    </script>

  2. Hi,
    Thanks for this beautiful and simple tutorial.
    Can you give a two way window on this tutorial?
    Like
    In first page I am the admin can see this video, using my webcam.
    but on the other hand other user's come and see my streaming , instead of there webcam video.
    thanks in Advance.

  3. Hey ALEX, the code is not working!!!!
    here are the 2 errors which are shown in the console:
    1. Not allowed to load local resource: blob:null/1bdf0fb4-76e3-43dd-b919-ff09ad918f79

    2. Uncaught (in promise) DOMException: Failed to load because no supported source was found.

    please help!!!!!!!!
    Also what should I do so that when people open my site from their pc they will be able to see my video????????

  4. Hey I am creating a website for a chat and I want to get a live session with a few webcams and be able to text to the video broadcaster. I am trying to figure out what kind of code should I use to make this happen?

  5. Is there already a tutorial if you want to stream to another user's browser? (you said 1 year ago:"This has been requested quite a bit. We'll get something sorted 🙂 "

  6. Hi Alex, I have learn this for a long time and I am doing a research on the streaming system security researching. My professor wants me to build a webcam-server based streaming system, so I install the apache on my ubuntu and do all the exactly same with you, the only thing makes me confused is where u put all this files? in ubuntu, I put them in var/www/html, these three files, but when I type in localhost, is shows nothing, but before that I try the part that "a" between those function, it actually work. And I also try this on my windows desktop, put them in the htdocs folder under the apache24, it still shows nothing. I was wondering if I miss something? or the browers is not supported? or some environment is not installed ? Please help me plz ! Thanks inadvance. Work for a long time on this.

Leave a Reply

Your email address will not be published. Required fields are marked *