Live streaming from a user’s camera to a web application can create immersive experiences, such as video conferencing or live broadcasting. With the WebRTC API and MediaDevices interface, you can easily achieve this in modern web browsers. In this blog post, we’ll explore how to set up a live camera stream using JavaScript.

What You’ll Need

Before we get started, make sure you have the following:

Basic knowledge of JavaScript and HTML
A modern web browser that supports the MediaDevices API (most recent versions of Chrome, Firefox, and Safari do)
A text editor (like VSCode, Sublime Text, or Atom)

Step 1: Setting Up Your HTML

First, create a simple HTML file. This will include a video element to display the live camera feed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Camera Stream</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        video { width: 100%; height: auto; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>Live Camera Stream</h1>
    <video id="video" autoplay playsinline></video>

    <script src="app.js"></script>
</body>
</html>

Step 2: Accessing the Camera Stream

Next, let’s create the JavaScript file (app.js) to handle camera access and display the video feed.

const video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {

        video.srcObject = stream;
    })
    .catch(err => {
        console.error('Error accessing camera: ', err);
    });

Step 3: Testing Your Application

Save your HTML and JavaScript files in the same directory.
Open your HTML file in a supported web browser.
When prompted, allow the browser to access your camera.
You should see your live camera feed displayed in the video element.

Conclusion

You’ve successfully set up a live camera stream using JavaScript! This feature can be utilized in various applications, such as video calls, security monitoring, or interactive experiences.

If you found this guide helpful, feel free to share it or leave your comments below. Happy coding!