Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to open a webcam using JavaScript?
In this tutorial, we will learn how to open a webcam using JavaScript. This can be accomplished using WebRTC (Web Real-Time Communication), which allows us to access and capture webcam and microphone devices on the user's system.
Understanding getUserMedia()
We can access the user's webcam and microphone using the navigator.mediaDevices.getUserMedia() method. This function requires user permission and returns a Promise that resolves when access is granted.
Basic Implementation Steps
Follow these steps to implement webcam access:
STEP 1 ? Create HTML elements including a video element for the webcam stream and a button to trigger access.
STEP 2 ? Check if getUserMedia() is supported and handle the Promise response.
STEP 3 ? Configure constraints for audio and video access.
STEP 4 ? For mobile devices, specify
facingModeto choose between front and rear cameras.
Basic Example
Here's a simple implementation to open a webcam:
<html>
<head>
<title>Open webcam using JavaScript</title>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<button id="startBtn" onclick="openCam()">Open Webcam</button>
<br/><br/>
<video id="videoCam" autoplay></video>
<script>
function openCam(){
let All_mediaDevices = navigator.mediaDevices;
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Enhanced Example with CSS Styling
Below is an improved version with better styling and user interface:
<html>
<head>
<title>Open webcam using JavaScript</title>
<style>
* {
background-color: #658EA9;
}
#videoCam {
width: 630px;
height: 300px;
margin-left: 0px;
border: 3px solid #ccc;
background: black;
}
#startBtn {
margin-left: 280px;
width: 120px;
height: 45px;
cursor: pointer;
font-weight: bold;
}
#startBtn:hover {
background-color: #647C90;
color: red;
}
</style>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<video id="videoCam" autoplay></video>
<br/><br/>
<button id="startBtn" onclick="openCam()">Open Camera</button>
<script>
function openCam(){
let All_mediaDevices = navigator.mediaDevices;
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Key Features
Permission Request: The browser automatically prompts for camera access
Error Handling: Catches and logs any errors during webcam access
Cross-browser Compatibility: Uses both srcObject and createObjectURL methods
Auto-play: Automatically starts video playback once the stream is ready
Browser Security
Modern browsers require HTTPS for webcam access in production environments. The getUserMedia() API will only work on localhost or secure HTTPS connections for security reasons.
Conclusion
Opening a webcam in JavaScript is straightforward using the getUserMedia() API. The key is handling user permissions properly and providing fallback methods for different browser implementations.
20K+ Views
