├── CONTRIBUTING.md
├── .browserslistrc
├── src
    ├── index.ts
    ├── components
    │   ├── media-device-kind.ts
    │   ├── resolution.ts
    │   └── Camera.vue
    ├── main.ts
    ├── shims-vue.d.ts
    └── App.vue
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── .prettierrc
├── .gitignore
├── .github
    └── workflows
    │   ├── publish.yml
    │   ├── build.yml
    │   └── codeql-analysis.yml
├── .eslintrc.js
├── rollup.config.js
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | All contributions are welcome.
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Camera from "./components/Camera.vue";
2 | export default Camera;
3 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BastiaanJansen/simple-vue-camera/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/components/media-device-kind.ts:
--------------------------------------------------------------------------------
1 | export type MediaDeviceKind = "audioinput" | "audiooutput" | "videoinput";
2 | 


--------------------------------------------------------------------------------
/src/components/resolution.ts:
--------------------------------------------------------------------------------
1 | export interface Resolution {
2 |     width: number;
3 |     height: number;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | 
4 | createApp(App).mount("#app");
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "tabWidth": 4,
4 |   "semi": true,
5 |   "singleQuote": false,
6 |   "endOfLine": "auto"
7 | }
8 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish
 2 | 
 3 | on:
 4 |     push:
 5 |         tags:
 6 |             - "*"
 7 | 
 8 | jobs:
 9 |     publish:
10 |         runs-on: ubuntu-latest
11 |         steps:
12 |             - uses: actions/checkout@v1
13 |             - uses: actions/setup-node@v1
14 |               with:
15 |                   node-version: 10
16 |             - run: npm install
17 |             - run: npm run build-lib
18 |             - uses: JS-DevTools/npm-publish@v1
19 |               with:
20 |                   token: ${{ secrets.NPM_TOKEN }}
21 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     env: {
 4 |         node: true,
 5 |     },
 6 |     extends: [
 7 |         "plugin:vue/vue3-essential",
 8 |         "eslint:recommended",
 9 |         "@vue/typescript/recommended",
10 |         "@vue/prettier",
11 |         "@vue/prettier/@typescript-eslint",
12 |     ],
13 |     parserOptions: {
14 |         ecmaVersion: 2020,
15 |     },
16 |     ignorePatterns: ["dist"],
17 |     rules: {
18 |         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
19 |         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
20 |         "css.lint.unknownAtRules": 0,
21 |     },
22 | };
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from "rollup-plugin-vue";
 2 | import ts from "rollup-plugin-typescript2";
 3 | import postcss from "rollup-plugin-postcss";
 4 | import pkg from "./package.json";
 5 | 
 6 | function createEntry(options) {
 7 |     const config = {
 8 |         input: "./src/index.ts",
 9 |         external: ["vue"],
10 |         output: {
11 |             exports: "default",
12 |             file: options.file,
13 |             format: options.format,
14 |             name: "SimpleVueCamera",
15 |         },
16 |         plugins: [
17 |             vue({
18 |                 css: true,
19 |                 compileTemplate: true,
20 |             }),
21 |             ts(),
22 |             postcss(),
23 |         ],
24 |     };
25 | 
26 |     return config;
27 | }
28 | 
29 | export default [
30 |     createEntry({
31 |         file: pkg.main,
32 |         format: "umd",
33 |     }),
34 | ];
35 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | 
 3 | on:
 4 |     pull_request:
 5 |         branches: [main, dev]
 6 |     push:
 7 |         branches: [main, dev]
 8 | 
 9 | jobs:
10 |     run-build:
11 |         name: Build application
12 |         runs-on: ubuntu-latest
13 | 
14 |         steps:
15 |             - name: Check out Git repository
16 |               uses: actions/checkout@v2
17 | 
18 |             - name: Set up Node.js
19 |               uses: actions/setup-node@v1
20 |               with:
21 |                   node-version: 12
22 | 
23 |             - name: Cache node modules
24 |               uses: actions/cache@v2
25 |               with:
26 |                   path: node_modules
27 |                   key: node-modules-${{ hashFiles('package-lock.json') }}
28 | 
29 |             - name: Install Node.js dependencies
30 |               if: steps.node-cache.outputs.cache-hit != 'true'
31 |               run: npm install
32 | 
33 |             - name: Build app
34 |               run: npm run build
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es5",
 4 |         "module": "esnext",
 5 |         "strict": true,
 6 |         "jsx": "preserve",
 7 |         "importHelpers": true,
 8 |         "moduleResolution": "node",
 9 |         "skipLibCheck": true,
10 |         "esModuleInterop": true,
11 |         "allowSyntheticDefaultImports": true,
12 |         "sourceMap": true,
13 |         "baseUrl": ".",
14 |         "types": ["webpack-env"],
15 |         "paths": {
16 |             "@/*": ["src/*"]
17 |         },
18 |         "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
19 |         "declaration": true,
20 |         "declarationDir": "dist"
21 |     },
22 |     "include": [
23 |         "src/**/*.ts",
24 |         "src/**/*.tsx",
25 |         "src/**/*.vue",
26 |         "tests/**/*.ts",
27 |         "tests/**/*.tsx",
28 |         "src/components/index.js",
29 |         "index.ts",
30 |         "types/types.d.ts",
31 |         "src/index.ts"
32 |     ],
33 |     "exclude": ["node_modules"]
34 | }
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Bastiaan Jansen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "simple-vue-camera",
 3 |     "version": "1.1.3",
 4 |     "private": false,
 5 |     "main": "./dist/simple-vue-camera.umd.js",
 6 |     "types": "dist",
 7 |     "author": {
 8 |         "name": "Bastiaan Jansen",
 9 |         "email": "Bastiaanj7@outlook.com"
10 |     },
11 |     "files": [
12 |         "dist",
13 |         "README.md"
14 |     ],
15 |     "keywords": [
16 |         "vue",
17 |         "vuejs",
18 |         "vue-camera",
19 |         "camera-component",
20 |         "camera",
21 |         "webcam"
22 |     ],
23 |     "license": "MIT",
24 |     "scripts": {
25 |         "serve": "vue-cli-service serve",
26 |         "build": "vue-cli-service build",
27 |         "lint": "vue-cli-service lint",
28 |         "build-lib": "rollup -c rollup.config.js"
29 |     },
30 |     "repository": {
31 |         "type": "git",
32 |         "url": "https://github.com/BastiaanJansen/simple-vue-camera"
33 |     },
34 |     "description": "A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences.",
35 |     "dependencies": {},
36 |     "devDependencies": {
37 |         "@typescript-eslint/eslint-plugin": "^4.18.0",
38 |         "@typescript-eslint/parser": "^4.18.0",
39 |         "@vue/cli-plugin-babel": "~4.5.0",
40 |         "@vue/cli-plugin-eslint": "~4.5.0",
41 |         "@vue/cli-plugin-typescript": "~4.5.0",
42 |         "@vue/cli-service": "~4.5.0",
43 |         "@vue/compiler-sfc": "^3.0.0",
44 |         "@vue/eslint-config-prettier": "^6.0.0",
45 |         "@vue/eslint-config-typescript": "^7.0.0",
46 |         "autoprefixer": "^9.8.6",
47 |         "core-js": "^3.6.5",
48 |         "css-loader": "^6.2.0",
49 |         "eslint": "^6.7.2",
50 |         "eslint-plugin-prettier": "^3.3.1",
51 |         "eslint-plugin-vue": "^7.0.0",
52 |         "postcss": "^8.3.6",
53 |         "prettier": "^2.2.1",
54 |         "rollup": "^2.56.2",
55 |         "rollup-plugin-ignore-import": "^1.3.2",
56 |         "rollup-plugin-import-css": "^3.0.0",
57 |         "rollup-plugin-node-resolve": "^5.2.0",
58 |         "rollup-plugin-postcss": "^4.0.1",
59 |         "rollup-plugin-typescript2": "^0.30.0",
60 |         "rollup-plugin-vue": "^6.0.0",
61 |         "style-loader": "^3.2.1",
62 |         "typescript": "~4.1.5",
63 |         "webpack": "^4.39.3",
64 |         "vue": "^3"
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | # For most projects, this workflow file will not need changing; you simply need
 2 | # to commit it to your repository.
 3 | #
 4 | # You may wish to alter this file to override the set of languages analyzed,
 5 | # or to provide custom queries or build logic.
 6 | #
 7 | # ******** NOTE ********
 8 | # We have attempted to detect the languages in your repository. Please check
 9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 | 
14 | on:
15 |   push:
16 |     branches: [ main ]
17 |   pull_request:
18 |     # The branches below must be a subset of the branches above
19 |     branches: [ main ]
20 |   schedule:
21 |     - cron: '36 22 * * 0'
22 | 
23 | jobs:
24 |   analyze:
25 |     name: Analyze
26 |     runs-on: ubuntu-latest
27 |     permissions:
28 |       actions: read
29 |       contents: read
30 |       security-events: write
31 | 
32 |     strategy:
33 |       fail-fast: false
34 |       matrix:
35 |         language: [ 'javascript' ]
36 |         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
37 |         # Learn more:
38 |         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
39 | 
40 |     steps:
41 |     - name: Checkout repository
42 |       uses: actions/checkout@v2
43 | 
44 |     # Initializes the CodeQL tools for scanning.
45 |     - name: Initialize CodeQL
46 |       uses: github/codeql-action/init@v1
47 |       with:
48 |         languages: ${{ matrix.language }}
49 |         # If you wish to specify custom queries, you can do so here or in a config file.
50 |         # By default, queries listed here will override any specified in a config file.
51 |         # Prefix the list here with "+" to use these queries and those in the config file.
52 |         # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 | 
54 |     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
55 |     # If this step fails, then you should remove it and run the build manually (see below)
56 |     - name: Autobuild
57 |       uses: github/codeql-action/autobuild@v1
58 | 
59 |     # ℹ️ Command-line programs to run using the OS shell.
60 |     # 📚 https://git.io/JvXDl
61 | 
62 |     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
63 |     #    and modify them (or add more) to build your code if your project
64 |     #    uses a compiled language
65 | 
66 |     #- run: |
67 |     #   make bootstrap
68 |     #   make release
69 | 
70 |     - name: Perform CodeQL Analysis
71 |       uses: github/codeql-action/analyze@v1
72 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="camera-container">
  3 |         <camera
  4 |             ref="camera"
  5 |             @loading="logEvent('loading')"
  6 |             @started="logEvent('started')"
  7 |             @error="(error) => logEvent('error: ' + error)"
  8 |         >
  9 |         </camera>
 10 |     </div>
 11 | 
 12 |     <img :src="currentSnapshot" />
 13 | 
 14 |     <div>
 15 |         <button @click="start">Start</button>
 16 |         <button @click="stop">Stop</button>
 17 |         <button @click="pause">Pause</button>
 18 |         <button @click="resume">Resume</button>
 19 |         <button @click="snapshot">Snapshot</button>
 20 |     </div>
 21 | 
 22 |     <select @change="changeCamera">
 23 |         <option
 24 |             v-for="camera in cameras"
 25 |             :key="camera"
 26 |             :value="camera.deviceId"
 27 |         >
 28 |             {{ camera.deviceId }}
 29 |         </option>
 30 |     </select>
 31 | </template>
 32 | 
 33 | <script lang="ts">
 34 | import { defineComponent, onMounted, Ref, ref } from "vue";
 35 | 
 36 | import Camera from "@/components/Camera.vue";
 37 | 
 38 | export default defineComponent({
 39 |     name: "App",
 40 |     components: {
 41 |         Camera,
 42 |     },
 43 |     setup() {
 44 |         const camera = ref<InstanceType<typeof Camera>>();
 45 | 
 46 |         const cameras: Ref<MediaDeviceInfo[]> = ref([]);
 47 | 
 48 |         onMounted(async () => {
 49 |             if (!camera.value) return;
 50 |             try {
 51 |                 cameras.value = await camera.value.devices(["videoinput"]);
 52 |             } catch (e) {
 53 |                 console.error(e);
 54 |             }
 55 |         });
 56 | 
 57 |         const start = () => camera.value?.start();
 58 |         const stop = () => camera.value?.stop();
 59 |         const pause = () => camera.value?.pause();
 60 |         const resume = () => camera.value?.resume();
 61 |         const snapshot = async () => {
 62 |             const blob = await camera.value?.snapshot({
 63 |                 width: 1280,
 64 |                 height: 720,
 65 |             });
 66 |             currentSnapshot.value = URL.createObjectURL(blob!);
 67 |         };
 68 | 
 69 |         const logEvent = (name: string) => console.log(name);
 70 | 
 71 |         const currentSnapshot = ref();
 72 | 
 73 |         const changeCamera = (event: Event) => {
 74 |             const target = event.target as HTMLSelectElement;
 75 |             camera.value?.changeCamera(target.value);
 76 |         };
 77 | 
 78 |         return {
 79 |             camera,
 80 |             start,
 81 |             stop,
 82 |             pause,
 83 |             resume,
 84 |             logEvent,
 85 |             snapshot,
 86 |             currentSnapshot,
 87 |             cameras,
 88 |             changeCamera,
 89 |         };
 90 |     },
 91 | });
 92 | </script>
 93 | 
 94 | <style scoped>
 95 | #camera-container {
 96 |     width: 300px;
 97 |     height: 300px;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/Camera.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="camera-container">
  3 |         <video autoplay ref="video" id="video"></video>
  4 | 
  5 |         <div id="slot-container">
  6 |             <slot></slot>
  7 |         </div>
  8 |     </div>
  9 |     <canvas ref="canvas" id="canvas"></canvas>
 10 | </template>
 11 | 
 12 | <script lang="ts">
 13 | import { defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
 14 | import { MediaDeviceKind } from "./media-device-kind";
 15 | import { Resolution } from "./resolution";
 16 | 
 17 | export default defineComponent({
 18 |     name: "Camera",
 19 |     components: {},
 20 |     emits: [
 21 |         "loading",
 22 |         "started",
 23 |         "stopped",
 24 |         "paused",
 25 |         "resumed",
 26 |         "camera-change",
 27 |         "snapshot",
 28 |         "error",
 29 |     ],
 30 |     props: {
 31 |         resolution: {
 32 |             type: Object as PropType<Resolution>,
 33 |             default: () => {
 34 |                 return { width: 1920, height: 1080 };
 35 |             },
 36 |         },
 37 |         facingMode: {
 38 |             type: String,
 39 |             default: "environment",
 40 |         },
 41 |         autoplay: {
 42 |             type: Boolean,
 43 |             default: true,
 44 |         },
 45 |         playsinline: {
 46 |             type: Boolean,
 47 |             default: true,
 48 |         },
 49 |         constraints: {
 50 |             type: Object,
 51 |             required: false,
 52 |         },
 53 |     },
 54 |     setup(props, { emit }) {
 55 |         onMounted(() => {
 56 |             if (!navigator.mediaDevices)
 57 |                 throw new Error("Media devices not available");
 58 | 
 59 |             const videoElement = document.getElementById("video");
 60 | 
 61 |             if (props.playsinline && videoElement) {
 62 |                 videoElement.setAttribute("playsinline", "");
 63 |             }
 64 | 
 65 |             if (props.autoplay) start();
 66 |         });
 67 | 
 68 |         onUnmounted(() => stop());
 69 | 
 70 |         const video = ref<HTMLVideoElement>();
 71 |         const canvas = ref<HTMLCanvasElement>();
 72 |         const stream = ref<MediaStream>();
 73 | 
 74 |         const constraints = props.constraints || {
 75 |             video: {
 76 |                 width: props.resolution.width,
 77 |                 height: props.resolution.height,
 78 |                 facingMode: props.facingMode,
 79 |                 deviceId: {},
 80 |             },
 81 |             audio: false,
 82 |         };
 83 | 
 84 |         const devices = async (
 85 |             kinds: MediaDeviceKind[] = ["audioinput", "videoinput"]
 86 |         ): Promise<MediaDeviceInfo[]> => {
 87 |             const devices = await navigator.mediaDevices.enumerateDevices();
 88 |             return devices.filter((device) => kinds.includes(device.kind));
 89 |         };
 90 | 
 91 |         const currentDeviceID = (): string | undefined => {
 92 |             if (!stream.value) return;
 93 | 
 94 |             const tracks = stream.value
 95 |                 .getVideoTracks()
 96 |                 .map((track: MediaStreamTrack) => track.getSettings().deviceId);
 97 | 
 98 |             if (tracks.length > 0) return tracks[0];
 99 |         };
100 | 
101 |         const start = async (): Promise<void> => {
102 |             emit("loading");
103 | 
104 |             try {
105 |                 stream.value = await navigator.mediaDevices.getUserMedia(
106 |                     constraints
107 |                 );
108 | 
109 |                 if (!video.value) throw new Error("Video ref is null");
110 | 
111 |                 video.value.srcObject = stream.value;
112 | 
113 |                 emit("started");
114 |             } catch (err) {
115 |                 emit("error", err);
116 |             }
117 |         };
118 | 
119 |         const snapshot = (
120 |             resolution: Resolution = props.resolution,
121 |             type = "image/png",
122 |             quality?: number
123 |         ): Promise<Blob | null> => {
124 |             if (!video.value) throw new Error("Video ref is null");
125 |             if (!canvas.value) throw new Error("Canvas ref is null");
126 | 
127 |             const { width, height } = resolution;
128 | 
129 |             canvas.value.width = width;
130 |             canvas.value.height = height;
131 | 
132 |             canvas.value
133 |                 .getContext("2d")
134 |                 ?.drawImage(video.value, 0, 0, width, height);
135 | 
136 |             return new Promise((resolve) => {
137 |                 canvas.value?.toBlob(
138 |                     (blob: Blob | null) => {
139 |                         emit("snapshot", blob);
140 |                         resolve(blob);
141 |                     },
142 |                     type,
143 |                     quality
144 |                 );
145 |             });
146 |         };
147 | 
148 |         const changeCamera = async (deviceID: string): Promise<void> => {
149 |             stop();
150 |             constraints.video.deviceId.exact = deviceID;
151 |             await start();
152 |             emit("camera-change", deviceID);
153 |         };
154 | 
155 |         const resume = (): void => {
156 |             video.value?.play();
157 |             emit("resumed");
158 |         };
159 | 
160 |         const pause = (): void => {
161 |             video.value?.pause();
162 |             emit("paused");
163 |         };
164 | 
165 |         const stop = (): void => {
166 |             stream.value?.getTracks().forEach((track) => track.stop());
167 |             emit("stopped");
168 |         };
169 | 
170 |         return {
171 |             start,
172 |             stop,
173 |             video,
174 |             snapshot,
175 |             canvas,
176 |             devices,
177 |             currentDeviceID,
178 |             pause,
179 |             resume,
180 |             changeCamera,
181 |             stream,
182 |         };
183 |     },
184 | });
185 | </script>
186 | 
187 | <style lang="css" scoped>
188 | #camera-container {
189 |     position: relative;
190 |     width: 100%;
191 |     height: 100%;
192 | }
193 | 
194 | #slot-container {
195 |     position: absolute;
196 |     height: 100%;
197 |     width: 100%;
198 |     left: 0;
199 |     top: 0;
200 | }
201 | 
202 | #video {
203 |     width: 100%;
204 |     height: 100%;
205 | }
206 | 
207 | #canvas {
208 |     display: none;
209 | }
210 | </style>
211 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Simple Vue Camera
  2 | 
  3 | [![Codacy Badge](https://app.codacy.com/project/badge/Grade/7d9578d39b5e4736be10095914541a07)](https://www.codacy.com/gh/BastiaanJansen/simple-vue-camera/dashboard?utm_source=github.com&utm_medium=referral&utm_content=BastiaanJansen/simple-vue-camera&utm_campaign=Badge_Grade)
  4 | ![](https://img.shields.io/github/license/BastiaanJansen/simple-vue-camera)
  5 | ![](https://img.shields.io/github/issues/BastiaanJansen/simple-vue-camera)
  6 | 
  7 | A simple to use, but extensive, camera component for Vue 3 with Typescript support to create great camera experiences like this:
  8 | 
  9 | [![Phone camera](https://media.giphy.com/media/UuAkrsLaxI5AXDwJuQ/giphy.gif)](https://media.giphy.com/media/UuAkrsLaxI5AXDwJuQ/giphy.gif)
 10 | 
 11 | 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.
 12 | 
 13 | ## Table of Contents
 14 | 
 15 | -   [Installation](#installation)
 16 | -   [Usage](#usage)
 17 |     -   [Basics](#basics)
 18 |     -   [Snapshots](#snapshots)
 19 |     -   [Camera](#camera)
 20 |     -   [Component information](#component-information)
 21 | 
 22 | ## Installation
 23 | 
 24 | Install Simple Vue Camera with NPM:
 25 | 
 26 | ```
 27 | npm install simple-vue-camera
 28 | ```
 29 | 
 30 | or, with Yarn:
 31 | 
 32 | ```
 33 | yarn add simple-vue-camera
 34 | ```
 35 | 
 36 | After installation, you can register the `Camera` component globally in `main.ts`:
 37 | 
 38 | ```ts
 39 | import { createApp } from "vue";
 40 | import App from "./App.vue";
 41 | import Camera from "simple-vue-camera";
 42 | 
 43 | createApp(App).component("camera", Camera).mount("#app");
 44 | ```
 45 | 
 46 | or, register it to a specific component:
 47 | 
 48 | ```vue
 49 | <script lang="ts">
 50 | import { defineComponent } from "vue";
 51 | import Camera from "simple-vue-camera";
 52 | 
 53 | export default defineComponent({
 54 |     components: {
 55 |         Camera,
 56 |     },
 57 | });
 58 | ```
 59 | 
 60 | ## Usage
 61 | 
 62 | ### Basics
 63 | 
 64 | After registering the `Camera` component, you can use it as follows:
 65 | 
 66 | ```vue
 67 | <template>
 68 |     <camera :resolution="{ width: 375, height: 812 }" autoplay></camera>
 69 | </template>
 70 | ```
 71 | 
 72 | Use the available slot to overlay UI on top of the video feed:
 73 | 
 74 | ```vue
 75 | <template>
 76 |     <camera :resolution="{ width: 375, height: 812 }" autoplay>
 77 |         <button>I'm on top of the video</button>
 78 |     </camera>
 79 | </template>
 80 | ```
 81 | 
 82 | ### Snapshots
 83 | 
 84 | To create screenshots of the video feed, use the `snapshot` function on the component reference:
 85 | 
 86 | ```vue
 87 | <template>
 88 |     <camera :resolution="{ width: 375, height: 812 }" ref="camera" autoplay></camera>
 89 |     <button @click="snapshot">Create snapshot</button>
 90 | </template>
 91 | 
 92 | <script lang="ts">
 93 | import Camera from "simple-vue-camera";
 94 | 
 95 | export default defineComponent({
 96 |     setup() {
 97 |         // Get a reference of the component
 98 |         const camera = ref<InstanceType<typeof Camera>>();
 99 | 
100 |         // Use camera reference to call functions
101 |         const snapshot = async () => {
102 |             const blob = await camera.value?.snapshot();
103 | 
104 |             // To show the screenshot with an image tag, create a url
105 |             const url = URL.createObjectURL(blob);
106 |         }
107 | 
108 |         return {
109 |             camera,
110 |             snapshot
111 |         }
112 |     }
113 | });
114 | ```
115 | 
116 | 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:
117 | 
118 | ```ts
119 | const blob = await camera.value?.snapshot({ width: 1920, height: 1080 });
120 | ```
121 | 
122 | Or change the image type and quality:
123 | 
124 | ```ts
125 | const blob = await camera.value?.snapshot(
126 |     { width: 1920, height: 1080 },
127 |     "image/png",
128 |     0.5
129 | );
130 | ```
131 | 
132 | ### Camera
133 | 
134 | It is possible to change the camera. First request all `videoinput` devices:
135 | 
136 | ```ts
137 | const devices = camera.value?.devices(["videoinput"]);
138 | ```
139 | 
140 | Pick a device, e.g. with a dropdown, and pass the device ID to the `changeCamera` function:
141 | 
142 | ```ts
143 | const device = devices[0];
144 | camera.value?.changeCamera(device.deviceId);
145 | ```
146 | 
147 | **Note:** When switching cameras, the camera component will restart and emit the `loading` and `started` events again.
148 | 
149 | ### Component information
150 | 
151 | #### Properties
152 | 
153 | |    Name     |           Type           | Default     | Description                                                                                                                           |
154 | | :---------: | :----------------------: | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
155 | | resolution  |       `Resolution`       | 1920 x 1080 | The resolution of the camera view                                                                                                     |
156 | | facingMode  |         `string`         | environment |                                                                                                                                       |
157 | |  autoplay   |        `boolean`         | `true`      | Determines if the camera is automatically started when mounted, when set to false, you must start the camera programmatically         |
158 | | 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 |
159 | | constraints | `MediaStreamConstraints` |             | Change the default constraints                                                                                                        |
160 | 
161 | #### Functions
162 | 
163 | | Name            | Parameters                                                  | Description                                                          |
164 | | :-------------- | :---------------------------------------------------------- | -------------------------------------------------------------------- |
165 | | devices         | `kinds: MediaDeviceKind[]`                                  | Returns a list of compatible devices which matches the allowed kinds |
166 | | start           |                                                             | Starts the camera                                                    |
167 | | stop            |                                                             | Stops the camera                                                     |
168 | | pause           |                                                             | Pauses the video stream                                              |
169 | | resume          |                                                             | Resumes the video stream                                             |
170 | | changeCamera    | `deviceID: string`                                          | Changes the selected camera                                          |
171 | | snapshot        | `resolution: Resolution`, `type: string`, `quality: number` | Creates a snapshot of the current video image                        |
172 | | currentDeviceID |                                                             | Returns the currently used device id of the mediastream              |
173 | 
174 | #### Events
175 | 
176 | The `Camera` component emits 7 different events.
177 | 
178 | ```vue
179 | <template>
180 |     <camera
181 |         @loading="loading"
182 |         @started="started"
183 |         @stopped="stopped"
184 |         @paused="paused"
185 |         @resumed="resumed"
186 |         @camera-change="cameraChange"
187 |         @snapshot="snapshot"
188 |         @error="error"
189 |     ></camera>
190 | </template>
191 | 
192 | <script lang="ts">
193 | import Camera from "simple-vue-camera";
194 | 
195 | export default defineComponent({
196 |     setup() {
197 |         const loading = () => console.log("Camera is loading and will start any second");
198 |         const started = () => console.log("Camera has started");
199 |         const stopped = () => console.log("Camera has stopped");
200 |         const paused = () => console.log("Video feed has paused");
201 |         const resumed = () => console.log("Video feed has resumed");
202 |         const cameraChange = (deviceID: string) => console.log(`Camera has been changed to ${deviceID}`);
203 |         const snapshot = (blob: Blob) => console.log("A snapshot has been taken");
204 |         const error = (error: Error) => console.log("error");
205 | 
206 |         return {
207 |             loading,
208 |             started,
209 |             stopped,
210 |             paused,
211 |             resumed,
212 |             cameraChange,
213 |             snapshot,
214 |             error
215 |         }
216 |     }
217 | });
218 | ```
219 | 
220 | |     Name      |     Parameters     | Description                                      |
221 | | :-----------: | :----------------: | ------------------------------------------------ |
222 | |    loading    |                    | Emitted when the camera is loading               |
223 | |    started    |                    | Emitted when the camera is loaded and is visible |
224 | |    stopped    |                    | Emitted when the camera has stopped              |
225 | |    paused     |                    | Emitted when the video has paused                |
226 | |    resumed    |                    | Emitted when the video has resumed               |
227 | | camera-change | `deviceID: string` | Emitted when a camera change occurs              |
228 | |   snapshot    |    `blob: Blob`    | Emitted when a snapshot is taken                 |
229 | |     error     |   `error: Error`   | Emitted when an error occurs                     |
230 | 
231 | ## Licence
232 | 
233 | simple-vue-camera is available under the MIT licence. See the LICENCE for more info.
234 | 
235 | [![Stargazers repo roster for @BastiaanJansen/simple-vue-camera](https://reporoster.com/stars/BastiaanJansen/simple-vue-camera)](https://github.com/BastiaanJansen/simple-vue-camera/stargazers)
236 | 


--------------------------------------------------------------------------------