Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

simple-vue-camera

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-vue-camera

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

  • 1.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2K
decreased by-6.22%
Maintainers
1
Weekly downloads
 
Created
Source

Simple Vue Camera

Codacy Badge

A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences like this:

Phone camera

By default, this component does not render any UI elements on top of the video feed, so you can style it and make it your own.

Table of Contents

Installation

Install Simple Vue Camera with NPM:

npm install simple-vue-camera

or, with Yarn:

yarn install simple-vue-camera

After installation, you can register the Camera component globally in main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import Camera from "simple-vue-camera";

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

or, register it to a specific component:

<script lang="ts">
import { defineComponent } from "vue";
import Camera from "simple-vue-camera";

export default defineComponent({
    components: {
        Camera,
    },
});

Usage

Basics

After registering the Camera component, you can use it as follows:

<template>
    <camera :resolution="{ width: 375, height: 812 }" autoplay></camera>
</template>

Use the available slot to overlay UI on top of the video feed:

<template>
    <camera :resolution="{ width: 375, height: 812 }" autoplay>
        <button>I'm on top of the video</button>
    </camera>
</template>

Snapshots

To create screenshots of the video feed, use the snapshot function on the component reference:

<template>
    <camera :resolution="{ width: 375, height: 812 }" ref="camera" autoplay></camera>
    <button @click="snapshot">Create snapshot</button>
</template>

<script lang="ts">
import Camera from "simple-vue-camera";

export default defineComponent({
    setup() {
        // Get a reference of the component
        const camera = ref<InstanceType<typeof 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);
        }

        return {
            camera,
            snapshot
        }
    }
});

By default, when creating a snapshot, the resolution of the snapshot will be the same as the resolution of the camera feed. To change that, pass a Resolution with the function call:

const blob = await camera.value?.snapshot({ width: 1920, height: 1080 });

Or change the image type and quality:

const blob = await camera.value?.snapshot(
    { width: 1920, height: 1080 },
    "image/png",
    0.5
);

Camera

It is possible to change the camera. First request all videoinput devices:

const devices = camera.value?.devices(["videoinput"]);

Pick a device, e.g. with a dropdown, and pass the device ID to the changeCamera function:

const device = devices[0];
camera.value?.changeCamera(device.deviceId);

Note: When switching cameras, the camera component will restart and emit the loading and started events again.

Component information

Properties
NameTypeDefaultDescription
resolutionResolution1920 x 1080The resolution of the camera view
facingModestringenvironment
autoplaybooleantrueDetermines if the camera is automatically started when mounted, when set to false, you must start the camera programmatically
playsinlinebooleantrueDetermines if the camera plays inline instead of starting full screen, when set to false some browsers open a fullscreen video player
constraintsMediaStreamConstraintsChange the default constraints
Functions
NameParametersDescription
deviceskinds: MediaDeviceKind[]Returns a list of compatible devices which matches the allowed kinds
startStarts the camera
stopStops the camera
pausePauses the video stream
resumeResumes the video stream
changeCameradeviceID: stringChanges the selected camera
snapshotresolution: Resolution, type: string, quality: numberCreates a snapshot of the current video image
currentDeviceIDReturns the currently used device id of the mediastream
Events

The Camera component emits 7 different events.

<template>
    <camera
        @loading="loading"
        @started="started"
        @stopped="stopped"
        @paused="paused"
        @resumed="resumed"
        @camera-change="cameraChange"
        @snapshot="snapshot"
        @error="error"
    ></camera>
</template>

<script lang="ts">
import Camera from "simple-vue-camera";

export default defineComponent({
    setup() {
        const loading = () => console.log("Camera is loading and will start any second");
        const started = () => console.log("Camera has started");
        const stopped = () => console.log("Camera has stopped");
        const paused = () => console.log("Video feed has paused");
        const resumed = () => console.log("Video feed has resumed");
        const cameraChange = (deviceID: string) => console.log(`Camera has been changed to ${deviceID}`);
        const snapshot = (blob: Blob) => console.log("A snapshot has been taken");
        const error = (error: Error) => console.log("error");

        return {
            loading,
            started,
            stopped,
            paused,
            resumed,
            cameraChange,
            snapshot,
            error
        }
    }
});
NameParametersDescription
loadingEmitted when the camera is loading
startedEmitted when the camera is loaded and is visible
stoppedEmitted when the camera has stopped
pausedEmitted when the video has paused
resumedEmitted when the video has resumed
camera-changedeviceID: stringEmitted when a camera change occurs
snapshotblob: BlobEmitted when a snapshot is taken
errorerror: ErrorEmitted when an error occurs

Licence

simple-vue-camera is available under the MIT licence. See the LICENCE for more info.

Stargazers repo roster for @BastiaanJansen/simple-vue-camera

Keywords

FAQs

Package last updated on 08 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc