Skip to content

Commit fba14db

Browse files
michael-mirmichael-mir
authored
Merge pull request #1 from michael-mir/prototype
prototype into master 🌶️ major refactoring
2 parents 5865fac + a22928f commit fba14db

40 files changed

+774
-424
lines changed

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
coverage
22
dist
3+
*.md

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 siberiacancode
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.

‎README.md

+76-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,76 @@
1-
# Webcam-canvas
1+
# 📸 React Webcam Ultimate
2+
3+
Ultimate tool for working with media stream and displaying it in your React application
4+
5+
## Installation
6+
7+
Install with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
8+
9+
```shell
10+
npm i react-webcam-ultimate
11+
# or
12+
yarn add react-webcam-ultimate
13+
```
14+
15+
## Usage
16+
17+
```jsx
18+
import React from 'react';
19+
import ReactDOM from 'react-dom';
20+
import { Webcam } from 'react-webcam-ultimate';
21+
22+
const App = () => (
23+
<Webcam />
24+
);
25+
26+
const root = ReactDOM.createRoot(document.getElementById('root'));
27+
root.render(<App/>);
28+
```
29+
30+
### Get webcam snapshot
31+
32+
```jsx
33+
import { Webcam } from 'react-webcam-ultimate';
34+
35+
const YourComponent = () => (
36+
<Webcam mirrored>
37+
{({ getSnapshot }) => (
38+
<button onClick={() => getSnapshot({ quality: 0.8 })}>
39+
Make photo
40+
</button>
41+
)}
42+
</Webcam>
43+
);
44+
```
45+
46+
## API
47+
48+
You can pass any supported [properties](https://developer.mozilla.org/ru/docs/Web/HTML/Element/video) to the underlying video tag (eg `autoplay`, `className`, etc). However, for convenience, the component uses its own values for these properties, but you can reassign them without any problems:
49+
| **Prop** | **Type** | **Default** |
50+
| ------------------------- | -------- | ------------ |
51+
| muted | boolean | true |
52+
| autoPlay | boolean | true |
53+
| playsInline | boolean | true |
54+
| controls | boolean | false |
55+
56+
The component also supports many properties for more specific work:
57+
| **Prop** | **Type** | **Default** | **Note** |
58+
| ------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
59+
| stream | boolean | | external media stream (turns off internal media stream handling logic) |
60+
| mirrored | boolean | false | show camera preview and get the screenshot mirrored |
61+
| mainCamera | boolean | false | should use a main camera (requires Navigator.mediaDevices.enumerateDevices) |
62+
| frontCamera | boolean | false | should use a front camera (MediaTrackConstraints['facingFront'] === 'user') |
63+
| applyConstraints | boolean | false | should new constraints be applied to the media stream |
64+
| cameraResolutionType | string | | video track resolution size - 'UHD' | 'QHD' | 'FHD' | 'HD' |
65+
| cameraResolutionMode | string | 'ideal' | video track resolution mode - 'min' | 'max' | 'ideal' | 'exact' |
66+
| audioConstraints | object | | audio track constraints - MediaStreamConstraints['audio'] |
67+
| videoConstraints | object | | video track constraints - MediaStreamConstraints['video'] |
68+
| requestTimeLimit | number | | limiting the media stream request by time |
69+
| onStreamRequest | function | | callback for when component requests a media stream |
70+
| onStreamStart | function | | callback for when component starts a media stream |
71+
| onStreamStop | function | | callback for when component stops a media stream |
72+
| onStreamError | function | | callback for when component can't receive a media stream |
73+
74+
75+
76+

‎SECURITY.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Security Policy
2+
3+
## Reporting a Vulnerability
4+
5+
If you believe you have found a security vulnerability in our library, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
6+
7+
Please let us know by creating an issue in this repository

‎declarations.d.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ interface Navigator {
99
msGetUserMedia?: Navigator['getUserMedia'];
1010
}
1111

12+
interface MediaTrackSource {
13+
readonly id: string;
14+
readonly kind: string;
15+
readonly label: string;
16+
}
17+
1218
interface Window {
1319
msRequestAnimationFrame?: Window['requestAnimationFrame'];
1420
mozRequestAnimationFrame?: Window['requestAnimationFrame'];
@@ -17,5 +23,3 @@ interface Window {
1723
mozCancelAnimationFrame?: Window['cancelAnimationFrame'];
1824
webkitCancelAnimationFrame?: Window['cancelAnimationFrame'];
1925
}
20-
21-
type ImageFormat = 'image/webp' | 'image/png' | 'image/jpeg';

‎package.json

+20-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
{
2-
"name": "react-webcam-canvas",
3-
"description": "React/Webcam/Canvas package",
2+
"name": "react-webcam-ultimate",
3+
"description": "Ultimate tool for working with media stream and displaying it in your React application",
44
"version": "1.0.0",
55
"license": "MIT",
66
"author": {
7-
"name": "Mironychev Michael",
8-
"url": "https://github.com/michael-mir"
7+
"name": "SIBERIA CAN CODE 🧊",
8+
"url": "https://github.com/siberiacancode"
99
},
1010
"contributors": [
1111
{
1212
"name": "Mironychev Michael",
1313
"url": "https://github.com/michael-mir"
14+
},
15+
{
16+
"name": "Dmitry Babin",
17+
"url": "https://github.com/debabin"
18+
},
19+
{
20+
"name": "Sergey Kryavkin",
21+
"url": "https://github.com/RiceWithMeat"
1422
}
1523
],
1624
"publishConfig": {
1725
"access": "public"
1826
},
27+
"homepage": "https://github.com/siberiacancode/react-webcam-ultimate",
1928
"repository": {
2029
"type": "git",
21-
"url": "https://github.com/michael-mir/webcam-canvas.git"
30+
"url": "https://github.com/siberiacancode/react-webcam-ultimate.git"
2231
},
2332
"bugs": {
24-
"url": "https://github.com/michael-mir/webcam-canvas/issues"
33+
"url": "https://github.com/siberiacancode/react-webcam-ultimate/issues"
34+
},
35+
"engines": {
36+
"node": ">=14"
2537
},
26-
"homepage": "https://github.com/michael-mir/webcam-canvas",
2738
"sideEffects": false,
2839
"main": "dist/cjs/index.js",
2940
"module": "dist/esm/index.js",
@@ -32,11 +43,8 @@
3243
"dist/**/*"
3344
],
3445
"scripts": {
35-
"build": "shx rm -rf dist && rollup -c --bundleConfigAsCjs",
36-
"preversion": "npm run lint",
37-
"version": "npm run format && git add -A src",
3846
"prepare": "husky install && npm run build",
39-
"postversion": "git push && git push --tags",
47+
"build": "shx rm -rf dist && rollup -c --bundleConfigAsCjs",
4048
"lint": "eslint . --ext ts --ext tsx --no-error-on-unmatched-pattern --fix",
4149
"format": "prettier --write \"**/*.{js,ts,tsx}\"",
4250
"type": "tsc --noEmit",
@@ -87,6 +95,7 @@
8795
"video",
8896
"react",
8997
"canvas",
98+
"camera",
9099
"webcam",
91100
"stream",
92101
"userMedia",

0 commit comments

Comments
 (0)