Skip to content

Instantly share code, notes, and snippets.

@mchelen mchelen/

Last active Apr 9, 2020
What would you like to do?
html5 webcam demo
<meta charset="UTF-8">
<title>HTML5 Webcam Demo</title>
<script src="script.js"></script>
<body style="font-family: monospace;">
<div style="margin: 10px;"><strong>-= HTML5 Webcam Demo =-</strong></div>
<video id="video" autoplay="true" style="display:none;"></video>
<canvas id="canvas" style="width:640px; height:480px;"></canvas>
<div style="margin: 15px;"><strong>Adapted from <a href="">js-aruco</a></strong></div>
var video, canvas, context, imageData;
function onLoad(){
video = document.getElementById("video");
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = parseInt(;
canvas.height = parseInt(;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (navigator.getUserMedia){
function successCallback(stream){
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = stream;
function errorCallback(error){
navigator.getUserMedia({video: true}, successCallback, errorCallback);
function tick(){
if (video.readyState === video.HAVE_ENOUGH_DATA){
function snapshot(){
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
window.onload = onLoad;

This comment has been minimized.

Copy link

YEEETT commented Apr 9, 2020

 script.js:16 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
     at successCallback (script.js:16)

this is the error that I get when I try to run this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.