EN
JavaScript - play web camera on video element (webcam usage example)
8 points
In this short article, you can see how to stream video from web camera to video element using JavaScript.
Hint: used solutions were introduced in the major web browsers around 2016.
Quick solution:
xxxxxxxxxx1
// JavaScript:2
3
var video = document.querySelector('#my-video');4
5
var configuration = {6
video: true7
// you can use microphone adding `audio: true` property here8
};9
10
navigator.mediaDevices.getUserMedia(configuration) // Warning: check if getUserMedia() function is avaialble in desired web borwsers11
.then(function (stream) {12
video.srcObject = stream; // autoplay="true" video attribute starts stream automatically13
})14
.catch(function (error) {15
console.error(error.name + ': ' + error.message);16
});17
18
19
20
// HTML:21
22
// <video id="my-video" autoplay="true"></video>
Note: it is important to be sure the web camera is connected properly, permissions for camera are granted and it is not used by any other application.
Example preview:
In this example, we present how to create reusable logic which can be used to play camera on video HTML element.
Web camera can be run using playCamera() function that accepts the following agruments:
preferedwidth- web camera video stream width inpx(it is just suggestion),preferedheight- web camera video stream height inpx(it is just suggestion).
Warning: the logic doesn't provide API to destroy video stream - check next one example.
xxxxxxxxxx1
2
<html>3
<body>4
<video id="my-video"></video>5
<script>6
7
function playStream(element, stream) {8
var handleLoaded = function() {9
element.removeEventListener('loadedmetadata', handleLoaded);10
element.play();11
};12
element.addEventListener('loadedmetadata', handleLoaded);13
element.srcObject = stream;14
}15
16
function playCamera(element, preferedWidth, preferedHeight) {17
var devices = navigator.mediaDevices;18
if (devices && 'getUserMedia' in devices) {19
var constraints = {20
video: {21
width: preferedWidth,22
height: preferedHeight23
}24
// you can use microphone adding `audio: true` property here25
};26
var promise = devices.getUserMedia(constraints);27
promise28
.then(function(stream) {29
playStream(element, stream)30
})31
.catch(function(error) {32
console.error(error.name + ': ' + error.message);33
});34
} else {35
console.error('Camera API is not supported.');36
}37
}38
39
40
// Usage example:41
42
var element = document.querySelector('#my-video');43
44
playCamera(element, 640, 480);45
46
</script>47
</body>48
</html>
In this example, we present how to create reusable logic which can be used to play web camera on video HTML element.
In the below example, web camera can be:
- run using
playCamera()function that accepts the following agruments:preferedwidth- web camera video stream width inpx(it is just suggestion),preferedheight- web camera video stream height inpx(it is just suggestion),onReady- function to be executed once the web camera is ready,onError- function to be executed when some error occurs.
- stopped and destroyed using
stopCamera()function, e.g.:xxxxxxxxxx1// ...23var stopCamera = playCamera(element, 640, 480, handleReady, handleError);45// to stop web camera call: stopCamera();
Source code:
xxxxxxxxxx1
2
<html>3
<body>4
<video id="my-video"></video>5
<script>6
7
function playStream(element, stream, callback) {8
var handleLoaded = function() {9
element.removeEventListener('loadedmetadata', handleLoaded);10
element.play();11
if (callback) {12
callback(stream);13
}14
};15
element.addEventListener('loadedmetadata', handleLoaded);16
element.srcObject = stream;17
}18
19
function stopStream(stream) {20
var tracks = stream.getTracks();21
for (var i = 0; i < tracks.length; ++i) {22
tracks[i].stop();23
}24
}25
26
// Plays web camera in indicated video HTML element.27
//28
function playCamera(element, preferedWidth, preferedHeight, onReady, onError) {29
var devices = navigator.mediaDevices;30
if (devices && 'getUserMedia' in devices) {31
var promise = devices.getUserMedia({32
video: {33
width: preferedWidth,34
height: preferedHeight,35
}36
// you can use microphone adding `audio: true` property here37
});38
var _stream = null;39
var _destroyed = false;40
promise41
.then(function(stream) {42
if (_destroyed) {43
stopStream(stream);44
} else {45
_stream = stream;46
playStream(element, stream, onReady);47
}48
})49
.catch(function(error) {50
if (onError) {51
onError(error.name + ': ' + error.message);52
}53
});54
// Stops and destroys camera stream.55
//56
return function() {57
if (_destroyed) {58
return;59
}60
if (_stream) {61
stopStream(_stream);62
_stream = null;63
}64
_destroyed = true;65
};66
} else {67
if (onError) {68
onError('Camera API is not supported.');69
}70
return function() {71
// Nothing here ...72
};73
}74
};75
76
77
// Usage example:78
79
var element = document.querySelector('#my-video');80
81
var handleReady = function(stream) {82
console.log('Web camera is ready and working');83
};84
var handleError = function(error) {85
console.error(error);86
};87
88
playCamera(element, 640, 480, handleReady, handleError); // stream [width]x[height] px = 640x480 px89
90
</script>91
</body>92
</html>
When a web camera is accessed from JavaScript you should see notification to permit using it. Just let use it by desired website and remove permissions when it is not needed.
