npmpackage.info

Gathering detailed insights and metrics for simple-vue-camera

Other packages similar to simple-vue-camera

vue-camera-lib

1.0.8

Simple library for Vue.js 3. Display the camera's output or take a photo from the mobile camera/webcam.

vue-camera-lib-2

1.0.1

Simple library for Vue.js 3. Display the camera's output or take a photo from the mobile camera/webcam.

vue-cam

0.2.4

Intented to be a simple camera component for VueJS.

Gathering detailed insights and metrics for simple-vue-camera

simple-vue-camera - 1.1.3 | npmpackage.info

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

MIT

Vue

2.23 kB

260,317 3.1

Installations

npm install simple-vue-camera

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

10.24.1

NPM Version

6.14.12 Pull Requests

Open

0

Total

12

Closed

3

Merged

9

Issues

Open

11

Total

14

Closed

3

Releases

v1.1.3: change camera function now waits for camera to restart

1.1.3

Updated on Dec 08, 2022

v1.1.2: Inline video prop

1.1.2

Updated on Sep 07, 2022

v1.1.1: Error event

1.1.1

Updated on May 24, 2022

v1.1.0: Retrieve currently used device id

1.1.0

Updated on Apr 11, 2022

v1.0.2: Bugfixes and updated README

1.0.2

Updated on Aug 23, 2021

v1.0.1: Release

1.0.1

Updated on Aug 15, 2021

View All 6 releases

Languages

Vue

JavaScript

HTML

TypeScript

Vue (77.07%)

JavaScript (13.88%)

HTML (6.01%)

TypeScript (3.03%)

Developer

BastiaanJansen

Download Statistics

Total Downloads

260,317

Last Day

348

Last Week

2,018

Last Month

9,214

Last Year

112,415

GitHub Statistics

MIT License

76 Stars

71 Commits

18 Forks

2 Watchers

1 Branches

5 Contributors

Updated on Mar 27, 2025

Bundle Size

5.34 kB

Minified

2.23 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

1.1.3

Package Id

simple-vue-camera@1.1.3

Unpacked Size

28.03 kB

Size

7.91 kB

File Count

NPM Version

6.14.12

Node Version

10.24.1

Total Downloads

Cumulative downloads

Total Downloads

260,317

Last Day

21.3%

348

Compared to previous day

Last Week

-19%

2,018

Compared to previous week

Last Month

-20.4%

9,214

Compared to previous month

Last Year

-0.3%

112,415

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Simple Vue Camera

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

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.

Installation
Usage

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:

1import { createApp } from "vue";
2import App from "./App.vue";
3import Camera from "simple-vue-camera";
4
5createApp(App).component("camera", Camera).mount("#app");

or, register it to a specific component:

1<script lang="ts">
2import { defineComponent } from "vue";
3import Camera from "simple-vue-camera";
4
5export default defineComponent({
6    components: {
7        Camera,
8    },
9});

Usage

Basics

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

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

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

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

Snapshots

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

1<template>
2    <camera :resolution="{ width: 375, height: 812 }" ref="camera" autoplay></camera>
3    <button @click="snapshot">Create snapshot</button>
4</template>
5
6<script lang="ts">
7import Camera from "simple-vue-camera";
8
9export default defineComponent({
10    setup() {
11        // Get a reference of the component
12        const camera = ref<InstanceType<typeof Camera>>();
13
14        // Use camera reference to call functions
15        const snapshot = async () => {
16            const blob = await camera.value?.snapshot();
17
18            // To show the screenshot with an image tag, create a url
19            const url = URL.createObjectURL(blob);
20        }
21
22        return {
23            camera,
24            snapshot
25        }
26    }
27});

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:

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

Or change the image type and quality:

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

Camera

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

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

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

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

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

Component information

Properties

Name	Type	Default	Description
resolution	`Resolution`	1920 x 1080	The resolution of the camera view
facingMode	`string`	environment
autoplay	`boolean`	`true`	Determines if the camera is automatically started when mounted, when set to false, you must start the camera programmatically
playsinline	`boolean`	`true`	Determines if the camera plays inline instead of starting full screen, when set to false some browsers open a fullscreen video player
constraints	`MediaStreamConstraints`		Change the default constraints

Functions

Name	Parameters	Description
devices	`kinds: MediaDeviceKind[]`	Returns a list of compatible devices which matches the allowed kinds
start		Starts the camera
stop		Stops the camera
pause		Pauses the video stream
resume		Resumes the video stream
changeCamera	`deviceID: string`	Changes the selected camera
snapshot	`resolution: Resolution`, `type: string`, `quality: number`	Creates a snapshot of the current video image
currentDeviceID		Returns the currently used device id of the mediastream

Events

The Camera component emits 7 different events.

1<template>
2    <camera
3        @loading="loading"
4        @started="started"
5        @stopped="stopped"
6        @paused="paused"
7        @resumed="resumed"
8        @camera-change="cameraChange"
9        @snapshot="snapshot"
10        @error="error"
11    ></camera>
12</template>
13
14<script lang="ts">
15import Camera from "simple-vue-camera";
16
17export default defineComponent({
18    setup() {
19        const loading = () => console.log("Camera is loading and will start any second");
20        const started = () => console.log("Camera has started");
21        const stopped = () => console.log("Camera has stopped");
22        const paused = () => console.log("Video feed has paused");
23        const resumed = () => console.log("Video feed has resumed");
24        const cameraChange = (deviceID: string) => console.log(`Camera has been changed to ${deviceID}`);
25        const snapshot = (blob: Blob) => console.log("A snapshot has been taken");
26        const error = (error: Error) => console.log("error");
27
28        return {
29            loading,
30            started,
31            stopped,
32            paused,
33            resumed,
34            cameraChange,
35            snapshot,
36            error
37        }
38    }
39});

Name	Parameters	Description
loading		Emitted when the camera is loading
started		Emitted when the camera is loaded and is visible
stopped		Emitted when the camera has stopped
paused		Emitted when the video has paused
resumed		Emitted when the video has resumed
camera-change	`deviceID: string`	Emitted when a camera change occurs
snapshot	`blob: Blob`	Emitted when a snapshot is taken
error	`error: Error`	Emitted when an error occurs

Licence

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/publish.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/BastiaanJansen/simple-vue-camera/publish.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/build.yml:32
Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:17
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

54 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

3.1

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to simple-vue-camera

Other packages similar to simple-vue-camera

simple-vue-camera

Installations

Developer Guide

Yes

CommonJS

10.24.1

6.14.12

Pull Requests

0

12

3

9

Issues

11

14

3

Releases

Languages

Developer

BastiaanJansen

Download Statistics

GitHub Statistics

Bundle Size

5.34 kB

2.23 kB

Maintainers

Package Meta Information

Total Downloads

260,317

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

Simple Vue Camera

Table of Contents

Installation

Usage

Basics

Snapshots

Camera

Component information

Properties

Functions

Events

Licence

10

10

10

7

2

0

0

0

0

0

0

0

0

3.1

/10