How to Click Picture from Computer’s Webcam using Vue 3

Last Updated on March 4, 2024 by Digamber in Vue JS

In this post, you will learn how to capture image from webcam using Vue js 3 framework, and simple-vue-camera package.

The simple Vue camera is a simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences.

A webcam or web camera is a device that captures video and sometimes audio, granting individuals to communicate visually with the help of the internet.

Webcams are typically built into laptops, tablets, and some desktop monitors. Hence, with the help of this tutorial, we will find out how to access the laptop or system camera, and taking photos with computer’s camera or webcam.

Vue Js 3 Capture Image using System Webcam Example

• Step 1: Install Vue CLI
• Step 2: Create Vue Application
• Step 3: Set Up Bootstrap Library
• Step 4: Create New Templates
• Step 5: Take Picture from System’s Webcam
• Step 6: Update App File
• Step 7: Run Development Server

Install Vue CLI

Navigate to command-prompt, type the command and hit enter to install Vue CLI on your development system.

npm install -g @vue/cli

Create Vue Application

Vue CLI offer vue create command, you have to append your project name, execute the command to build the new project.

vue create vue-mevn-stack-app

Get inside the project folder:

cd vue-mevn-stack-app

Open the vue.config.js fil, insert the following code. It prevents Vue to get rid from the multi-word error warning, .

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

Update the given code under the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Set Up Bootstrap Library

Its an optional step, if you want to create UI components faster then install the bootstrap package using npm.

npm install bootstrap

Add the bootstrap URL inside the main.js file file:

import 'bootstrap/dist/css/bootstrap.min.css'

Install Simple Vue Camera

Navigate to console, type and execute the below command to install the camera pacakge.

npm install simple-vue-camera

Create New Templates

Further, to form a new reusable component. Add the given code in components/Profile.vue file:

<template>
    <div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Take Picture from System’s Webcam

The camera directive sets up the box on the screen, where camera preview appears. Import the ref, camera modules to activate the screen camera through the Vue component.

Add given code in components/UserProfile.vue file:

<template>
    <div class="col-12">
        <camera :resolution="{ width: 375, height: 212 }" ref="camera" autoplay></camera>
        <button class="btn btn-primary btn-sm" @click="snapshot">Create snapshot</button>
    </div>
</template>


<script>
import { ref } from 'vue'
import Camera from "simple-vue-camera";

export default ({

    setup() {
        // Get a reference of the component
        const camera = ref(Camera);

        // Use camera reference to call functions
        const snapshot = async () => {
            const blob = await camera.value?.snapshot();

            // To show the screenshot with an image tag, create a url
            const url = URL.createObjectURL(blob);

            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
                var base64data = reader.result;
                console.log(base64data);
            }

            console.log(url)
        }

        return {
            camera,
            snapshot
        }
    }
});
</script>

import { createApp } from "vue";
import App from "./App.vue";
import Camera from "simple-vue-camera";
import "bootstrap/dist/css/bootstrap.min.css";

createApp(App).component("camera", Camera).mount("#app");

Update App File

We have previously created a new component. We need to register it inside the Vue mechanism.

Hence, add the below code in App.vue file:

<template>
  <div class="container mt-5">
    <h2 class="mb-3">Vue Js 3 Capture Image and Video using Webcam Example</h2>
    <Profile></Profile>
  </div>
</template>

<script>
import Profile from './components/Profile.vue';

export default {
  components: {
    Profile
  }
}
</script>

Run Development Server

Ultimately, we will view the camera application. Make sure to run the development server using given command.

npm run serve

Test the new app using the given URL:

Conclusion

Webcam is a powerful and versatile tool that brings real-time video communication to web applications developed using the Vue.js framework.

Web camera seamlessly allow users to capture video and audio, conduct video conferences, and participate in live streaming sessions.

In this guide, we learned how to enable webcam and take picture using external vue camera package in Vue js application.

Reference: https://www.npmjs.com/package/simple-vue-camera