├── .editorconfig
├── .gitattributes
├── .github
    ├── CODE_OF_CONDUCT.md
    ├── CONTRIBUTING.md
    └── FUNDING.yml
├── .gitignore
├── .npmignore
├── DOCUMENTATION.md
├── LICENSE.md
├── README.md
├── eslint.config.js
├── logo.png
├── package-lock.json
├── package.json
├── src
    ├── defaults.js
    ├── instacam.js
    └── support.js
└── webpack.config.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # top-most editorconfig file
 2 | root = true
 3 | 
 4 | # editor configuration
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_style = space
 9 | indent_size = 2
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | 
13 | # preserve markdown line break
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files by default
2 | * text=auto
3 | 
4 | # End of line as the UNIX convention (LF: Line Feed)
5 | * eol=lf
6 | 


--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at hello@studiomotio.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | First of all, thank for taking time to contribute!
 4 | 
 5 | The following is a set of guidelines for contributing to the project. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
 6 | 
 7 | 
 8 | #### Table Of Contents
 9 | 
10 | 1. [Code of conduct](#code-of-conduct)
11 | 2. [Reporting bugs](#reporting-bugs)
12 | 3. [Suggesting enhancements](#suggesting-enhancements)
13 | 
14 | 
15 | ## Code of conduct
16 | 
17 | This project and everyone participating in it is governed by the [package code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [xavier.foucrier@gmail.com](mailto:xavier.foucrier@gmail.com).
18 | 
19 | 
20 | ## Reporting bugs
21 | 
22 | This section guides you through submitting a bug report for the package. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports.
23 | 
24 | Before creating bug reports, please **check the issues list** as you might find out that you don't need to create one. When you are creating a bug report, please include as many details as possible.
25 | 
26 | ### Before submitting a bug report
27 | 
28 | * **Perform a cursory search** to see if the problem has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one.
29 | 
30 | ### How do I submit a (good) bug report?
31 | 
32 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues). After you've determined which repository your bug is related to, create an issue on that repository and provide the following information by filling in the template.
33 | 
34 | * Use a **clear and descriptive title** for the issue to identify the problem
35 | * Describe the **exact steps** which reproduce the problem in as many details as possible
36 | * Explain which behavior **you expected to see** instead and why
37 | * Explain the problem and **include additional details** to help maintainers reproduce the problem
38 | * Include details about your **configuration and environment**
39 | * Include screenshots and animated GIFs if needed
40 | * Specify which version of the package you're using
41 | 
42 | 
43 | ## Suggesting enhancements
44 | 
45 | This section guides you through submitting an enhancement suggestion for the package, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions.
46 | 
47 | * Use a **clear and descriptive title** for the issue to identify the suggestion
48 | * Provide a **step-by-step description of the suggested enhancement** in as many details as possible
49 | * Describe the current behavior and explain **which behavior you expected to see** instead and why
50 | * Explain **why this enhancement would be useful** to most users
51 | * List some other applications **where this enhancement exists**
52 | 
53 | Don't hesitate to use pull requests to propose code changes.
54 | 
55 | Thanks for reading and happy contributing! :tada: :+1:
56 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: xavierfoucrier
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .dev
3 | /node_modules
4 | /dist
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .dev
3 | .editorconfig
4 | .eslintrc
5 | .gitattributes
6 | .gitignore
7 | CODE_OF_CONDUCT.md
8 | CONTRIBUTING.md
9 | 


--------------------------------------------------------------------------------
/DOCUMENTATION.md:
--------------------------------------------------------------------------------
  1 | # Instacam documentation
  2 | Here you will find the documentation describing how to use the module.
  3 | 
  4 | ## Summary
  5 | 1. [How it works](#how-it-works)
  6 | 2. [Markup](#markup)
  7 | 3. [Usage](#usage)
  8 | 4. [Data attributes](#data-attributes)
  9 | 5. [Properties](#properties)
 10 | 6. [Methods](#methods)
 11 | 7. [Callbacks](#callbacks)
 12 | 8. [Demo](#demo)
 13 | 
 14 | ## How it works
 15 | Instacam allows you to perform **instant canvas video** through the WebRTC API with a fresh touch of CSS filters: this means you can capture the webcam video stream *(media stream)* and broadcast it on an HTML5 `canvas` tag. Unlike the conventional HTML5 `video` tag, Instacam offers you the opportunity to **interact with the broadcasted media stream** by having the possibility to edit each pixels before they are drawn to the canvas. Moreover, Instacam can beautify the media stream by adding a fresh touch of CSS. Don't forget that Instacam only works on browsers that natively support the HTML5 `canvas` tag, `requestAnimationFrame` API, `HTMLMediaElement` API, `navigator.mediaDevices` and `Promises` API.
 16 | 
 17 | ## Markup
 18 | ### Viewport
 19 | The viewport is a canvas representation of the media stream. Instacam captures the webcam media stream and replicates it on a canvas element, the viewport defined in the query selector must matched **a valid canvas element** to properly replicate the stream. An exception will be thrown on invalid viewport.
 20 | 
 21 | ```html
 22 | <canvas id="canvas1"></canvas>
 23 | ```
 24 | 
 25 | ## Usage
 26 | ### Use with Webpack
 27 | Instacam is using the **UMD** *(Unified Module Definition)* pattern, making it capable of working everywhere and compatible with webpack. The module is published on the **NPM** *(Node Package Manager)* registry, so you can install it through the command line interpreter using your favorite package manager:
 28 | 
 29 | ```console
 30 | # npm
 31 | npm install instacam
 32 | 
 33 | # yarn
 34 | yarn add instacam
 35 | ```
 36 | 
 37 | This will **download and install** Instacam into the `node_modules` folder under your project directory. When it's done, you can start to use the module in one of your javascript file like this:
 38 | 
 39 | ```js
 40 | import Instacam from 'instacam';
 41 | 
 42 | let camera = new Instacam(
 43 |   document.querySelector('#canvas1')
 44 | );
 45 | ```
 46 | 
 47 | Using webpack has **many advantages** like output compression, code splitting, tree shaking, etc., so I encourage you to use this great tool with Instacam.
 48 | 
 49 | ### Use with ESM
 50 | As of May 2017, all major browsers have shipped a working implementation of **ESM** *(ECMAScript modules)*: this is another way of using Instacam directly in your browser:
 51 | 
 52 | ```html
 53 | <script type="module">
 54 |   import Instacam from 'src/instacam.js';
 55 | 
 56 |   let camera = new Instacam(
 57 |     document.querySelector('#canvas1')
 58 |   );
 59 | </script>
 60 | ```
 61 | 
 62 | > Note that you will need to **use the Instacam source files** as there is no ESM build today for this package
 63 | 
 64 | ### Use with a CDN
 65 | To rapidly **include the minified production** file in your webpage, load the latest build from a  **CDN** *(Content Delivery Network)* using a generic script markup:
 66 | 
 67 | ```html
 68 | <!-- unpkg -->
 69 | <script src="https://unpkg.com/instacam"></script>
 70 | 
 71 | <!-- jsdelivr -->
 72 | <script src="https://cdn.jsdelivr.net/npm/instacam@latest/dist/instacam.umd.js"></script>
 73 | ```
 74 | 
 75 | Then **instanciate the class** by using this javascript syntax:
 76 | 
 77 | ```js
 78 | let camera = new Instacam(
 79 |   document.querySelector('#canvas1')
 80 | );
 81 | ```
 82 | 
 83 | You can also **pass a selector** to the constructor, and Instacam will get the DOM element for you:
 84 | 
 85 | ```js
 86 | let camera = new Instacam('#canvas1');
 87 | ```
 88 | 
 89 | **Custom defined properties** are passed through the second parameter:
 90 | 
 91 | ```js
 92 | let camera = new Instacam(
 93 |   document.querySelector('#canvas1'), {
 94 |     width: 800,
 95 |     height: 600
 96 |   }
 97 | );
 98 | ```
 99 | 
100 | ## Data attributes
101 | Instacam add a set of `data-instacam-*` attributes in the DOM to easily add custom styles/scripts in your application.
102 | 
103 | - `data-instacam`
104 | - `data-instacam-viewport`
105 | - `data-instacam-stream`
106 | - `data-instacam-buffer`
107 | - `data-instacam-blend`
108 | 
109 | 
110 | ## Properties
111 | ### Getting property
112 | The class properties are stored in the private `_props` attribute but can be **retrieved easily**. If you want to get the current level of the saturation CSS filter, you can do the following:
113 | 
114 | ```js
115 | // get the saturation (pretend that `camera` is the instance of the Instacam class)
116 | let saturation = camera.saturation;
117 | ```
118 | 
119 | ### Setting property
120 | The class properties can be **setted easily**. If you want to set the current level of the brightness CSS filter, you can do the following:
121 | 
122 | ```js
123 | // set the brightness (pretend that `camera` is the instance of the Instacam class)
124 | camera.brightness = 5;
125 | ```
126 | 
127 | ### API
128 | Instacam reference that details all properties of the class.
129 | 
130 | #### width
131 | Type: `Length`
132 | Default: `400`
133 | 
134 | This represents **the ideal requested width** for the viewport. Depending on hardware capabilities, the device will try to be as close as possible to this value. If the requested width is not supported, it will fall back to the closest available width.
135 | 
136 | #### height
137 | Type: `Length`
138 | Default: `300`
139 | 
140 | This represents **the ideal requested height** for the viewport. Depending on hardware capabilities, the device will try to be as close as possible to this value. If the requested height is not supported, it will fall back to the closest available height.
141 | 
142 | #### autostart
143 | Type: `Boolean`
144 | Default: `true`
145 | 
146 | The autostart property allows you to **change the start behavior**. By default, Instacam capture the webcam stream when the class is instanciated. If you set this property to `false`, you will need to call the `start()` method to run the capture.
147 | 
148 | #### camera
149 | Type: `Boolean`
150 | Default: `true`
151 | 
152 | The camera property allows you to **capture the media stream of the camera**. By default, Instacam only captures media stream from the webcam. If you want to only capture the microphone, you need to set this property to `false` and set the sound property to `true`.
153 | 
154 | #### mode
155 | Type: `String`
156 | Default: `front`
157 | 
158 | The mode property allows you to **select the camera used to capture the media stream**. By default, Instacam uses the front camera. If you set the mode to `back` and no camera is found, Instacam will automatically switch to the default one.
159 | 
160 | #### framerate
161 | Type: `Number`
162 | Default: `30`
163 | Minimum: `1`
164 | Maximum: `None`
165 | 
166 | The framerate property allows you to **change the refresh rate of the camera**. By default, Instacam will capture the media stream at **30 frames per second**. The maximum framerate depends on the camera capabilities.
167 | 
168 | #### ratio
169 | Type: `Number`
170 | Default: `4/3`
171 | 
172 | The ratio property allows you yo **change the aspect ratio of the camera**. It must fit to the width/height ratio to render a proper image of the media stream. You can use float numbers (like 1.1, 1.7) or fractions (like 4/3, 16/9) for better syntax reading.
173 | 
174 | #### sound
175 | Type: `Boolean`
176 | Default: `false`
177 | 
178 | The sound property allows you to **capture the audio stream from the microphone**. By default, Instacam only captures media stream from the webcam. If you want to capture both the microphone and the camera, you need to set this property to `true`.
179 | 
180 | #### paused
181 | Type: `Boolean`
182 | Default: `false`
183 | 
184 | The paused property **indicate if the camera audio/video are currently paused**.
185 | 
186 | #### muted
187 | Type: `Boolean`
188 | Default: `false`
189 | 
190 | The muted property **indicate if the microphone is currently muted**.
191 | 
192 | #### volume
193 | Type: `Number`
194 | Default: `100`
195 | Minimum: `0`
196 | Maximum: `100`
197 | 
198 | The volume property allows you to **adapt the volume of the microphone**. By default, Instacam sets the volume to 100. Note that you can set the volume at **any time** as soon as the camera is ready.
199 | 
200 | #### mirror
201 | Type: `Boolean`
202 | Default: `false`
203 | The mirror mode allows you to **flip the viewport horizontally**. This mode uses CSS transform property.
204 | 
205 | #### opacity
206 | Type: `Number`
207 | Default: `1`
208 | Minimum: `0`
209 | Maximum: `1`
210 | 
211 | The opacity property applies transparency to the viewport, making it **appear more or less transparent**. A value of 0 is completely transparent. A value of 1 leaves the viewport unchanged. Values between 0 and 1 are linear multipliers on the effect. Some browsers may provide **hardware acceleration** to render the opacity filter for better performance. If omitted, the CSS filter won't be applied.
212 | 
213 | #### brightness
214 | Type: `Number`
215 | Default: `1`
216 | Minimum: `0`
217 | Maximum: `None`
218 | 
219 | The brightness property applies a linear multiplier to the viewport, making it **appear more or less bright**. A value of 0 will create an image that is completely black. A value of 1 leaves the viewport unchanged. Other values are linear multipliers on the effect. Values of an amount over 1 are allowed, providing **brighter results**. If omitted, the CSS filter won't be applied.
220 | 
221 | #### contrast
222 | Type: `Number`
223 | Default: `1`
224 | Minimum: `0`
225 | Maximum: `None`
226 | 
227 | The contrast property **adjusts the contrast** of the viewport. A value of 0 will create an image that is completely black. A value of 1 leaves the viewport unchanged. Values of amount over 1 are allowed, providing **results with less contrast**. If omitted, the CSS filter won't be applied.
228 | 
229 | #### saturation
230 | Type: `Number`
231 | Default: `1`
232 | Minimum: `0`
233 | Maximum: `None`
234 | 
235 | The saturation property **saturates** the viewport. A value of 0 is completely un-saturated. A value of 1 leaves the viewport unchanged. Other values are linear multipliers on the effect. Values of amount over 1 are allowed, providing **super-saturated results**. If omitted, the CSS filter won't be applied.
236 | 
237 | #### hue
238 | Type: `Number`
239 | Unit: `Degree`
240 | Default: `0`
241 | Minimum: `0`
242 | Maximum: `360`
243 | 
244 | The hue property **applies a hue rotation** on the viewport. The value of angle defines the number of degrees around the color circle the viewport samples will be adjusted. A value of 0 degree leaves the viewport unchanged. The maximum value is 360 degree. If omitted, the CSS filter won't be applied.
245 | 
246 | #### invert
247 | Type: `Number`
248 | Default: `0`
249 | Minimum: `0`
250 | Maximum: `1`
251 | 
252 | The invert property **inverts the samples** in the viewport. A value of 1 is completely inverted. A value of 0 leaves the viewport unchanged. Values between 0 and 1 are linear multipliers on the effect. If omitted, the CSS filter won't be applied.
253 | 
254 | #### grayscale
255 | Type: `Number`
256 | Default: `0`
257 | Minimum: `0`
258 | Maximum: `1`
259 | 
260 | The grayscale property **converts the viewport to grayscale**. A value of 1 is completely grayscale. A value of 0 leaves the viewport unchanged. Values between 0 and 1 are linear multipliers on the effect. If omitted, the CSS filter won't be applied.
261 | 
262 | #### sepia
263 | Type: `Number`
264 | Default: `0`
265 | Minimum: `0`
266 | Maximum: `1`
267 | 
268 | The sepia property **converts the viewport to sepia**. A value of 1 is completely sepia. A value of 0 leaves the viewport unchanged. Values between 0 and 1 are linear multipliers on the effect. If omitted, the CSS filter won't be applied.
269 | 
270 | #### blur
271 | Type: `Number`
272 | Unit: `Pixel`
273 | Default: `0`
274 | Minimum: `0`
275 | Maximum: `None`
276 | 
277 | The blur property **applies a Gaussian blur** to the viewport. The value of radius defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so **a larger value will create more blur**. The property is specified as a CSS length, but does not accept percentage values. If omitted, the CSS filter won't be applied.
278 | 
279 | #### url
280 | Type: `String`
281 | Default: `Empty`
282 | 
283 | The url property takes the **location of an XML file** that specifies an **SVG filter**, and may include an anchor to a specific filter element. If omitted, the CSS filter won't be applied.
284 | 
285 | #### blend
286 | Type: `Object`
287 | Default: `Empty`
288 | 
289 | The blend property **applies a CSS mix blend mode filter** to the viewport. You need to define the blend mode and color to enable blending:
290 | 
291 | ```js
292 | blend: {
293 |   mode: 'lighten',
294 |   color: 'darkslateblue'
295 | }
296 | ```
297 | 
298 | To properly blend the viewport, Instacam need to create **a layout above the canvas**. Blending can be disable at any time by simply set the blend property to an empty object `{}`.
299 | 
300 | #### filter
301 | Type: `Function`
302 | Return: `Array`
303 | Default: `null`
304 | 
305 | The filter property allows you to applies a **custom filter** to the viewport, that is different than applying a CSS filter. The custom filter brings you the ability to edit each pixels of the media stream before they are drawn to the canvas. This property takes a `Function` with one parameter called `pixel` that corresponds to the current pixel parsed by the **class filtering loop**. On that pixel, you can get some informations like the `offset` *(index of the pixel)*, the `x` and `y` positions, the `red`, `green` and `blue` color components and finally the `alpha` layer. With this informations, you can **edit the pixel properties** and then return the edited informations. The return type of the function must be a pixel, represented by an `Array` with the red, green, blue components and the alpha layer: these new values will erase the previous informations of the pixel and will be drawn to the canvas. You can also **combine several CSS filters with a custom filter** to obtain pretty effects. If omitted, the custom filter won't be applied.
306 | 
307 | Build a custom filter is very easy, because you can code **your own logic** inside the function, for example:
308 | ```js
309 | // grayscale
310 | filter: (pixel) => {
311 |   let g = 0.2126 * pixel.red + 0.7152 * pixel.green + 0.0722 * pixel.blue;
312 |   return [g, g, g, pixel.alpha];
313 | }
314 | 
315 | // invert
316 | filter: (pixel) => {
317 |   return [255 - pixel.red, 255 - pixel.green, 255 - pixel.blue, pixel.alpha];
318 | }
319 | 
320 | // threshold
321 | filter: (pixel) => {
322 |   let threshold = 0.2126 * pixel.red
323 |                 + 0.7152 * pixel.green
324 |                 + 0.0722 * pixel.blue;
325 | 
326 |   return (threshold >= 100) ? [255, 255, 255, 255] : [0, 0, 0, 255];
327 | }
328 | ```
329 | 
330 | > If you want to contribute and share cool filters, you can send me your code or create a **pull request** on the `gh-pages` branch, and it will be added to the **[Instacam demo site](#demo)**. Thanks for contributing! :tada: :+1:
331 | 
332 | #### style
333 | Type: `Array`
334 | Return: `Array`
335 | Default: `[]`
336 | 
337 | The style property returns **styles that are applied to the viewport**.
338 | 
339 | #### hardware
340 | Type: `Object`
341 | Return: `Object`
342 | Default: `null`
343 | 
344 | The hardware property returns **a set of hardware informations** from the current audio/video tracks. Note that this property will only be available after camera initialization: if the capture fails, hardware informations won't be accessible.
345 | 
346 | ## Methods
347 | ### API
348 | Instacam reference that details all methods of the class.
349 | 
350 | #### start ( )
351 | Type: `Function`
352 | 
353 | The start method allows you to **start the capture of the webcam stream**. If the `autostart` parameter is set to `true`, you don't need to call this method, Instacam will do it for you. Both camera and sound will be started, depending on the properties you have defined.
354 | 
355 | ```js
356 | camera.start();
357 | ```
358 | 
359 | #### stop ( )
360 | Type: `Function`
361 | 
362 | The stop method allows you to **stop the capture of the webcam stream**. Both camera and sound will be stopped.
363 | 
364 | ```js
365 | camera.stop();
366 | ```
367 | 
368 | #### pause ( )
369 | Type: `Function`
370 | 
371 | The pause method allows you to **pause the capture of the webcam stream**. Both camera and sound will be paused. Note that this method will only pause the `<video>` media element rather than physically disabling the camera and microphone.
372 | 
373 | ```js
374 | camera.pause();
375 | ```
376 | 
377 | #### resume ( )
378 | Type: `Function`
379 | 
380 | The resume method allows you to **resume the capture of the webcam stream**. Both camera and sound will be resumed.
381 | 
382 | ```js
383 | camera.resume();
384 | ```
385 | 
386 | #### mute ( )
387 | Type: `Function`
388 | 
389 |  The mute method allows you to **mute the microphone** of the camera. Note that this method will only mute the `<video>` media element rather than physically disabling the microphone.
390 | 
391 | ```js
392 | camera.mute();
393 | ```
394 | 
395 | #### unmute ( )
396 | Type: `Function`
397 | 
398 | The unmute method allows your to **unmute the microphone** of the camera. Note that this method will only unmute the `<video>` media element rather than physically enabling the microphone.
399 | 
400 | ```js
401 | camera.unmute();
402 | ```
403 | 
404 | #### snap ([ *left, top, width, height* ])
405 | Type: `Function`
406 | Return: `ImageData`
407 | 
408 | The snap method allows you to **capture image data from a portion of the viewport**. All the parameters are of type `Number`. By default, `left` and `top` are equals to 0, and `width` and `height` are equals to the width and height of the viewport defined in the class properties. If you call this function without parameters, you will get the image data of the entire viewport. **[Take a look at the demo](#demo)** to see how it works.
409 | 
410 | ```js
411 | // capture the entire viewport
412 | let snapshot = camera.snap();
413 | 
414 | // capture an area of 100x200 from the top left side of the viewport
415 | let snapshot = camera.snap(0, 0, 100, 200);
416 | ```
417 | 
418 | #### save ([ *format, quality* ])
419 | Type: `Function`
420 | Return: `UTF-16 String`
421 | 
422 | The save method allows you to **save the viewport in a specific image format**. This method returns a `data:` URI, also called `DOMString`, containing a representation of the image in the specified `format`, default is set to `png`. The returned image is at **96dpi**. If the height or width of the viewport is 0, an empty string `data:,` is returned. If the format requested is not `image/png`, and the returned value starts with `data:image/png`, then the requested format is not supported. Chrome supports the `image/webp` format. If the requested format is `image/jpeg` or `image/webp`, then the second argument `quality`, if defined between 0 and 1, is treated as indicating **image quality**. By default, the image quality is set to 1. If you call this function without parameters, you will get a png file of good quality. **[Take a look at the demo](#demo)** to see how it works.
423 | 
424 | ```js
425 | // convert the viewport and returns a DOMString
426 | let data = camera.save('png', 0.75);
427 | ```
428 | 
429 | ## Callbacks
430 | ### API
431 | Instacam reference that details all callbacks of the class.
432 | 
433 | #### done ( )
434 | Type: `Function`
435 | Return: `Nothing`
436 | Default: `null`
437 | 
438 | A callback method **called when the stream is fully captured**. You can override the default method of Instacam by adding your own logic here.
439 | 
440 | ```js
441 | let camera = new Instacam(
442 |   done: () => {
443 |     console.log(`Camera ${camera.hardware.video.name} is ready.`);
444 |   }
445 | );
446 | ```
447 | 
448 | #### fail ( *NavigatorUserMediaError* )
449 | Type: `Function`
450 | Return: `Nothing`
451 | Default: `null`
452 | 
453 | A callback method **called when the stream capture failed**. You can override the default method of Instacam by adding your own logic here. Note that this function pass an `exception` argument that represent the NavigatorUserMediaError object, allowing you to detect the source of the problem.
454 | 
455 | ```js
456 | let camera = new Instacam(
457 |   failure: (exception) => {
458 |     if (exception.name === 'NotAllowedError') {
459 |       // the user has restricted access to the camera
460 |     }
461 |   }
462 | );
463 | ```
464 | 
465 | > For a full list of exceptions, see the **Mozilla MediaDevices.getUserMedia** reference
466 | > https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions
467 | 
468 | #### unsupported ( )
469 | Type: `Function`
470 | Return: `Nothing`
471 | Default: `null`
472 | 
473 | A callback method **called when a browser doesn't support a required API** to properly work. You can override the default method of Instacam by adding your own logic here.
474 | 
475 | ```js
476 | let camera = new Instacam(
477 |   unsupported: () => {
478 |     // the browser does not match the requirements
479 |   }
480 | );
481 | ```
482 | 
483 | ## Demo
484 | This site is hosted on Github pages and allow you to play with **most Instacam properties**: display the camera, add pretty CSS and custom filters simultaneously, capture and export the image in different formats. You will need to **allow the site to access your camera** in order to use the library.
485 | 
486 | 📷 [Play with Instacam](https://instacam.js.org)
487 | 
488 | > Note that this demo is using **vanilla javascript** and the latest version of Instacam from the **NPM registry**. Don't forget to read the **[compatibility section](README.md#compatibility)** before diving into the library.
489 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Xavier Foucrier
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Instacam – [![npm](https://img.shields.io/npm/v/instacam)](https://www.npmjs.com/package/instacam) [![npm](https://img.shields.io/bundlephobia/min/instacam?label=size)](https://bundlephobia.com/result?p=instacam)
 2 | 
 3 | Instacam is a library to perform **instant canvas video** through the WebRTC API with a fresh touch of CSS filters.
 4 | 
 5 | [![Instacam](logo.png "Instacam")](https://instacam.js.org)
 6 | 
 7 | ## Compatibility
 8 | Instacam is fully tested on **Google Chrome** for desktop *(latest public released version)*. The plugin is compatible with browsers that natively support the HTML5 `canvas` tag, `requestAnimationFrame` API, `HTMLMediaElement` API, `navigator.mediaDevices` and `Promises` API. The CSS filtering requires the `CSS filter` features to properly work.
 9 | 
10 | Official support on **Chrome 52+, Firefox 52+, Edge 15+ and Opera 52+**. Many other browsers may work, but are not extensively tested. You can check at any time the [support table](https://caniuse.com) about the partial or full support of these features.
11 | 
12 | ## Install
13 | Instacam is published on the **NPM** *(Node Package Manager)* registry, so you can install it through the command line interpreter using your favorite package manager:
14 | 
15 | ```console
16 | # npm
17 | npm install instacam
18 | 
19 | # yarn
20 | yarn add instacam
21 | ```
22 | 
23 | > For other implementation of Instacam in your project, see the [usage documentation](DOCUMENTATION.md#usage)
24 | 
25 | ## Documentation
26 | Here you will find the documentation describing **how to use** the library.
27 | 
28 | 1. [How it works](DOCUMENTATION.md#how-it-works) - how the library do the stuff
29 | 2. [Markup](DOCUMENTATION.md#markup) - how should the HTML and CSS look like
30 | 3. [Usage](DOCUMENTATION.md#usage) - how to use Instacam
31 | 4. [Data attributes](DOCUMENTATION.md#data-attributes) - set of data attributes
32 | 5. [Properties](DOCUMENTATION.md#properties) - all available properties
33 | 6. [Methods](DOCUMENTATION.md#methods) - all available methods
34 | 7. [Callbacks](DOCUMENTATION.md#callbacks) - all available callbacks
35 | 8. [Demo](DOCUMENTATION.md#demo) - Instacam in action
36 | 
37 | ## Contribute
38 | If you want to report a bug or request a new feature/improvement, please **read the project [contributors guidelines](.github/CONTRIBUTING.md) before**. Thanks for taking time to contribute.
39 | 
40 | ## License
41 | The project is developed under the **MIT** license:
42 | 
43 | - **Permissions**: This software and derivatives may be used for commercial purposes, you may distribute this software, this software may be modified and you may use and modify the software without distributing it.
44 | - **Conditions**: Include a copy of the license and copyright notice with the code.
45 | - **Limitations**: Software is provided without warranty and the software author/license owner cannot be held liable for damages.
46 | 
47 | Read the [full license](LICENSE.md) for more information about your rights.
48 | 
49 | ## Questions?
50 | If you have any questions, please **feel free to contact me!**  
51 | [xavier.foucrier [at] gmail.com](mailto:xavier.foucrier@gmail.com)
52 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
  1 | import globals from 'globals';
  2 | import js from '@eslint/js';
  3 | import stylistic from '@stylistic/eslint-plugin';
  4 | 
  5 | export default [
  6 |   js.configs.recommended, {
  7 |     plugins: {
  8 |       '@stylistic': stylistic,
  9 |     },
 10 |     ignores: [
 11 |       '/dist',
 12 |     ],
 13 |     languageOptions: {
 14 |       ecmaVersion: 2025,
 15 |       sourceType: 'module',
 16 |       globals: {
 17 |         ...globals.node,
 18 |         ...globals.browser,
 19 |       },
 20 |     },
 21 |     rules: {
 22 |       'eqeqeq': [
 23 |         'error',
 24 |         'always',
 25 |       ],
 26 |       'no-console': [
 27 |         'off',
 28 |       ],
 29 |       'no-inner-declarations': [
 30 |         'error',
 31 |         'functions', {
 32 |           blockScopedFunctions: 'disallow',
 33 |         },
 34 |       ],
 35 |       'no-invalid-this': [
 36 |         'error',
 37 |       ],
 38 |       'strict': [
 39 |         'error',
 40 |       ],
 41 |       '@stylistic/array-bracket-spacing': [
 42 |         'error',
 43 |       ],
 44 |       '@stylistic/arrow-spacing': [
 45 |         'error',
 46 |       ],
 47 |       '@stylistic/brace-style': [
 48 |         'error',
 49 |       ],
 50 |       '@stylistic/comma-dangle': [
 51 |         'error',
 52 |         'always-multiline',
 53 |       ],
 54 |       '@stylistic/comma-spacing': [
 55 |         'error', {
 56 |           'before': false,
 57 |           'after': true,
 58 |         },
 59 |       ],
 60 |       '@stylistic/computed-property-spacing': [
 61 |         'error',
 62 |       ],
 63 |       '@stylistic/dot-location': [
 64 |         'error',
 65 |         'property',
 66 |       ],
 67 |       '@stylistic/function-call-argument-newline': [
 68 |         'error',
 69 |         'never',
 70 |       ],
 71 |       '@stylistic/function-call-spacing': [
 72 |         'error',
 73 |         'never',
 74 |       ],
 75 |       '@stylistic/function-paren-newline': [
 76 |         'error',
 77 |       ],
 78 |       '@stylistic/indent': [
 79 |         'error',
 80 |         2, {
 81 |           'SwitchCase': 1,
 82 |         },
 83 |       ],
 84 |       '@stylistic/key-spacing': [
 85 |         'error',
 86 |       ],
 87 |       '@stylistic/keyword-spacing': [
 88 |         'error',
 89 |       ],
 90 |       '@stylistic/line-comment-position': [
 91 |         'error', {
 92 |           'position': 'above',
 93 |         },
 94 |       ],
 95 |       '@stylistic/lines-around-comment': [
 96 |         'error', {
 97 |           'beforeBlockComment': true,
 98 |         },
 99 |       ],
100 |       '@stylistic/linebreak-style': [
101 |         'error',
102 |         'unix',
103 |       ],
104 |       '@stylistic/no-extra-parens': [
105 |         'error',
106 |       ],
107 |       '@stylistic/no-floating-decimal': [
108 |         'error',
109 |       ],
110 |       '@stylistic/no-mixed-operators': [
111 |         'error',
112 |       ],
113 |       '@stylistic/no-multi-spaces': [
114 |         'error',
115 |       ],
116 |       '@stylistic/no-multiple-empty-lines': [
117 |         'error', {
118 |           'max': 1,
119 |         },
120 |       ],
121 |       '@stylistic/no-trailing-spaces': [
122 |         'error',
123 |       ],
124 |       '@stylistic/no-whitespace-before-property': [
125 |         'error',
126 |       ],
127 |       '@stylistic/object-curly-newline': [
128 |         'error', {
129 |           'ObjectExpression': {
130 |             'multiline': true,
131 |             'minProperties': 1,
132 |           },
133 |         },
134 |       ],
135 |       '@stylistic/object-curly-spacing': [
136 |         'error',
137 |         'always',
138 |       ],
139 |       '@stylistic/object-property-newline': [
140 |         'error',
141 |       ],
142 |       '@stylistic/operator-linebreak': [
143 |         'error',
144 |         'none',
145 |       ],
146 |       '@stylistic/quotes': [
147 |         'error',
148 |         'single',
149 |       ],
150 |       '@stylistic/rest-spread-spacing': [
151 |         'error',
152 |       ],
153 |       '@stylistic/semi': [
154 |         'error',
155 |         'always',
156 |       ],
157 |       '@stylistic/semi-spacing': [
158 |         'error',
159 |       ],
160 |       '@stylistic/space-before-blocks': [
161 |         'error',
162 |       ],
163 |       '@stylistic/space-before-function-paren': [
164 |         'error', {
165 |           'anonymous': 'always',
166 |           'asyncArrow': 'always',
167 |           'named': 'never',
168 |         },
169 |       ],
170 |       '@stylistic/space-in-parens': [
171 |         'error',
172 |       ],
173 |       '@stylistic/space-infix-ops': [
174 |         'error',
175 |       ],
176 |       '@stylistic/space-unary-ops': [
177 |         'error',
178 |       ],
179 |       '@stylistic/spaced-comment': [
180 |         'error',
181 |         'always', {
182 |           'block': {
183 |             'balanced': true,
184 |           },
185 |         },
186 |       ],
187 |       '@stylistic/switch-colon-spacing': [
188 |         'error',
189 |       ],
190 |       '@stylistic/template-curly-spacing': [
191 |         'error',
192 |       ],
193 |     },
194 |   },
195 | ];
196 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xavierfoucrier/instacam/97c81cbe63272f4b019c9ddcdbffa19797c9d452/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "instacam",
 3 |   "version": "1.21.0",
 4 |   "description": "Instant canvas video",
 5 |   "type": "module",
 6 |   "source": "src/instacam.js",
 7 |   "main": "dist/instacam.umd.js",
 8 |   "browser": "dist/instacam.umd.js",
 9 |   "unpkg": "dist/instacam.umd.js",
10 |   "scripts": {
11 |     "lint": "eslint src/**/*.js",
12 |     "build": "webpack --config webpack.config.js --progress"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/xavierfoucrier/instacam.git"
17 |   },
18 |   "files": [
19 |     "dist"
20 |   ],
21 |   "keywords": [
22 |     "webrtc",
23 |     "camera",
24 |     "microphone",
25 |     "webcam",
26 |     "canvas",
27 |     "video",
28 |     "filters"
29 |   ],
30 |   "author": {
31 |     "name": "Xavier Foucrier",
32 |     "email": "xavier.foucrier@gmail.com",
33 |     "url": "https://xavierfoucrier.dev",
34 |     "github": "@xavierfoucrier"
35 |   },
36 |   "license": "MIT",
37 |   "bugs": {
38 |     "url": "https://github.com/xavierfoucrier/instacam/issues"
39 |   },
40 |   "homepage": "https://instacam.js.org",
41 |   "engines": {
42 |     "node": "^22",
43 |     "npm": "^10"
44 |   },
45 |   "devDependencies": {
46 |     "@eslint/js": "^9.18.0",
47 |     "@stylistic/eslint-plugin": "^2.13.0",
48 |     "eslint": "^9.18.0",
49 |     "globals": "^15.14.0",
50 |     "terser-webpack-plugin": "^5.3.11",
51 |     "webpack": "^5.97.1",
52 |     "webpack-cli": "^6.0.1"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/defaults.js:
--------------------------------------------------------------------------------
 1 | // default properties
 2 | export default {
 3 | 
 4 |   // {Number} width of the viewport element
 5 |   width: 400,
 6 | 
 7 |   // {Number} height of the viewport element
 8 |   height: 300,
 9 | 
10 |   // {Boolean} true|false, defines if the capture start automatically
11 |   autostart: true,
12 | 
13 |   // {Boolean} true|false, defines if the camera video stream is enabled
14 |   camera: true,
15 | 
16 |   // {String} front|back, defines which camera use to capture the video stream
17 |   mode: 'front',
18 | 
19 |   // {Number} refresh rate in frames per second of the camera video stream
20 |   framerate: 30,
21 | 
22 |   // {Number} ratio of the camera video stream
23 |   ratio: 4 / 3,
24 | 
25 |   // {Boolean} true|false, defines if the camera audio stream is enabled
26 |   sound: false,
27 | 
28 |   // {Number} [0..100] volume of the camera audio stream
29 |   volume: 100,
30 | 
31 |   // {Boolean} true|false, mirror mode of the viewport (css transform)
32 |   mirror: false,
33 | 
34 |   // {Number} [0..1] opacity of the viewport (css)
35 |   opacity: 1,
36 | 
37 |   // {Number} [0..*] brightness of the viewport (css filter)
38 |   brightness: 1,
39 | 
40 |   // {Number} [0..*] contrast of the viewport (css filter)
41 |   contrast: 1,
42 | 
43 |   // {Number} [0..*] saturation of the viewport (css filter)
44 |   saturation: 1,
45 | 
46 |   // {Number} [0..360] hue of the viewport (css filter)
47 |   hue: 0,
48 | 
49 |   // {Number} [0..1] invert the color of the viewport (css filter)
50 |   invert: 0,
51 | 
52 |   // {Number} [0..1] grayscale of the viewport (css filter)
53 |   grayscale: 0,
54 | 
55 |   // {Number} [0..1] sepia of the viewport (css filter)
56 |   sepia: 0,
57 | 
58 |   // {Number} [0..*] blur of the viewport (css filter)
59 |   blur: 0,
60 | 
61 |   // {String} svg filtering of the viewport (css filter)
62 |   url: '',
63 | 
64 |   // {Object} blend layer of the viewport (css mix blend mode)
65 |   blend: {},
66 | 
67 |   // {Function} custom filter applied to the viewport
68 |   filter: null,
69 | 
70 |   // {Function} callback used when the stream is fully captured
71 |   done: null,
72 | 
73 |   // {Function} callback used when the stream capture fails
74 |   fail: null,
75 | 
76 |   // {Function} callback used when a browser doesn't support the requirements
77 |   unsupported: null,
78 | };
79 | 


--------------------------------------------------------------------------------
/src/instacam.js:
--------------------------------------------------------------------------------
  1 | import defaults from './defaults.js';
  2 | import requirement from './support.js';
  3 | 
  4 | export default class Instacam {
  5 | 
  6 |   /**
  7 |     Class constructor
  8 |     @param {Object} viewport - selector or canvas element from the DOM
  9 |     @param {Object} properties - custom properties of the class
 10 |   */
 11 |   constructor(viewport, properties) {
 12 | 
 13 |     // assign custom user properties to defaults
 14 |     this._props = Object.assign({}, defaults, properties);
 15 | 
 16 |     // check for browser support
 17 |     if (!requirement) {
 18 |       if (typeof this._props.unsupported === 'function') {
 19 |         this._props.unsupported();
 20 |       }
 21 | 
 22 |       return;
 23 |     }
 24 | 
 25 |     // rewrite the viewport element if the user passed a selector to the constructor
 26 |     if (typeof viewport === 'string') {
 27 |       viewport = document.querySelector(viewport);
 28 |     }
 29 | 
 30 |     // check the viewport element
 31 |     if (typeof viewport === 'undefined' || viewport === null || viewport.nodeName.toLowerCase() !== 'canvas') {
 32 |       throw new Error('Invalid viewport, you need to pass a valid selector or HTML5 canvas element');
 33 |     }
 34 | 
 35 |     // initialize the viewport
 36 |     this.viewport = viewport;
 37 |     this.viewport.setAttribute('data-instacam-viewport', '');
 38 |     this.viewport.width = this._props.width;
 39 |     this.viewport.height = this._props.height;
 40 | 
 41 |     // create the media element
 42 |     this._media = document.createElement('video');
 43 |     this._media.setAttribute('data-instacam-stream', '');
 44 |     this._media.style.display = 'none';
 45 | 
 46 |     // attach the media element to the DOM
 47 |     this.viewport.parentNode.insertBefore(this._media, this.viewport.nextSibling);
 48 | 
 49 |     // create the container
 50 |     this._container = document.createElement('div');
 51 |     this._container.setAttribute('data-instacam', '');
 52 |     this._container.style = 'position:relative;overflow:hidden;vertical-align:bottom;';
 53 | 
 54 |     // attach the container element to the DOM
 55 |     this.viewport.parentNode.insertBefore(this._container, this.viewport);
 56 | 
 57 |     // attach the viewport and media elements to the container
 58 |     this._container.appendChild(this.viewport);
 59 |     this._container.appendChild(this._media);
 60 | 
 61 |     // apply the css mirror mode on the viewport
 62 |     this.mirror = this._props.mirror;
 63 | 
 64 |     // autostart the stream capture depending on the properties
 65 |     if (this._props.autostart === true) {
 66 | 
 67 |       // compute the css filter properties
 68 |       this._compute();
 69 | 
 70 |       // capture the device stream
 71 |       this._capture();
 72 |     }
 73 |   }
 74 | 
 75 |   /**
 76 |     Capture the media stream to the viewport through getUserMedia API
 77 |   */
 78 |   _capture() {
 79 | 
 80 |     // prevent from streaming errors
 81 |     try {
 82 | 
 83 |       // capture the media stream
 84 |       navigator.mediaDevices.getUserMedia({
 85 |         audio: this._props.sound,
 86 |         video: (() => {
 87 |           if (this._props.camera === false) {
 88 |             return false;
 89 |           }
 90 | 
 91 |           return {
 92 |             width: this._props.width,
 93 |             height: this._props.height,
 94 |             frameRate: this._props.framerate,
 95 |             aspectRatio: this._props.ratio,
 96 |             facingMode: this._props.mode === 'front' ? 'user' : 'environment',
 97 |           };
 98 |         })(),
 99 |       }).then((stream) => {
100 | 
101 |         // store the blob stream
102 |         this._stream = stream;
103 | 
104 |         // capture the blob stream
105 |         this._media.srcObject = stream;
106 |         this._state = this._media.play();
107 | 
108 |         // get the current audio and video tracks
109 |         let audio = this._stream.getAudioTracks().filter(track => track.readyState === 'live')[0];
110 |         let video = this._stream.getVideoTracks().filter(track => track.readyState === 'live')[0];
111 | 
112 |         // save current track into the hardware property
113 |         this._hardware = {
114 |           audio: typeof audio === 'undefined' ? null : {
115 |             id: audio.id,
116 |             name: audio.label,
117 |             track: audio,
118 |           },
119 |           video: typeof video === 'undefined' ? null : {
120 |             id: video.id,
121 |             name: video.label,
122 |             track: video,
123 |             width: video.getSettings().width,
124 |             height: video.getSettings().height,
125 |           },
126 |         };
127 | 
128 |         // set the viewport size when the stream is ready
129 |         this.viewport.width = this._hardware.video !== null ? this._hardware.video.width : 0;
130 |         this.viewport.height = this._hardware.video !== null ? this._hardware.video.height : 0;
131 | 
132 |         // set the volume at start
133 |         this.volume = this._props.volume;
134 | 
135 |         // start the main requestAnimationFrame if the camera is enable
136 |         if (this._props.camera) {
137 | 
138 |           // animation loop used to properly render the viewport
139 |           const loop = () => {
140 | 
141 |             // render the viewport with or without custom filter
142 |             if (typeof this._props.filter !== 'function') {
143 |               this.viewport.getContext('2d').drawImage(this._media, 0, 0, this.viewport.width, this.viewport.height);
144 |             } else {
145 | 
146 |               // use a buffer when applying a custom filter to prevent the viewport from blinking or flashing
147 |               if (typeof this._buffer === 'undefined') {
148 |                 this._buffer = document.createElement('canvas');
149 |                 this._buffer.setAttribute('data-instacam-buffer', '');
150 |                 this._buffer.style.display = 'none';
151 |                 this._buffer.width = this.viewport.width;
152 |                 this._buffer.height = this.viewport.height;
153 |                 this.viewport.parentNode.insertBefore(this._buffer, this.viewport.nextSibling);
154 |               }
155 | 
156 |               this._buffer.getContext('2d').drawImage(this._media, 0, 0, this.viewport.width, this.viewport.height);
157 |               this.viewport.getContext('2d').putImageData(this._filter(this._buffer.getContext('2d').getImageData(0, 0, this.viewport.width, this.viewport.height)), 0, 0);
158 |             }
159 | 
160 |             // make this function run at 60fps
161 |             requestAnimationFrame(loop);
162 |           };
163 | 
164 |           // render the first frame
165 |           requestAnimationFrame(loop);
166 |         }
167 | 
168 |         if (typeof this._props.done === 'function') {
169 |           this._props.done();
170 |         }
171 |       }).catch((exception) => {
172 |         if (typeof this._props.fail === 'function') {
173 |           this._props.fail(exception);
174 |         }
175 |       });
176 |     } catch (exception) {
177 |       if (typeof this._props.fail === 'function') {
178 |         this._props.fail(exception);
179 |       }
180 |     }
181 |   }
182 | 
183 |   /**
184 |     Compute and apply the css filter effects to the viewport
185 |   */
186 |   _compute() {
187 | 
188 |     // build the css layer depending on the properties
189 |     this._style = this._props.opacity !== defaults.opacity ? `opacity(${this._props.opacity}) ` : '';
190 |     this._style += this._props.brightness !== defaults.brightness ? `brightness(${this._props.brightness}) ` : '';
191 |     this._style += this._props.contrast !== defaults.contrast ? `contrast(${this._props.contrast}) ` : '';
192 |     this._style += this._props.saturation !== defaults.saturation ? `saturate(${this._props.saturation}) ` : '';
193 |     this._style += this._props.hue !== defaults.hue ? `hue-rotate(${this._props.hue}deg) ` : '';
194 |     this._style += this._props.invert !== defaults.invert ? `invert(${this._props.invert}) ` : '';
195 |     this._style += this._props.grayscale !== defaults.grayscale ? `grayscale(${this._props.grayscale}) ` : '';
196 |     this._style += this._props.sepia !== defaults.sepia ? `sepia(${this._props.sepia}) ` : '';
197 |     this._style += this._props.blur !== defaults.blur ? `blur(${this._props.blur}px) ` : '';
198 |     this._style += this._props.url !== defaults.url ? `url(${this._props.url}) ` : '';
199 | 
200 |     // apply the css filter effects to the viewport
201 |     this.viewport.style.filter = this._style;
202 | 
203 |     // build the blend layer depending on the properties
204 |     if (Object.keys(this._props.blend).length !== 0) {
205 | 
206 |       // create the blending element
207 |       if (typeof this._blend === 'undefined') {
208 |         this._blend = document.createElement('div');
209 |         this._blend.setAttribute('data-instacam-blend', '');
210 | 
211 |         // prepend the blending element to the viewport
212 |         this.viewport.parentNode.insertBefore(this._blend, this.viewport);
213 |       }
214 | 
215 |       // set the blending styles
216 |       this._blend.style = `position:absolute;z-index:1;width:100%;height:100%;mix-blend-mode:${this._props.blend.mode};background:${this._props.blend.color};pointer-events:none;`;
217 |     } else if (typeof this._blend !== 'undefined') {
218 | 
219 |       // remove the blend layer from the DOM if there is no blending applied
220 |       this._blend.parentNode.removeChild(this._blend);
221 |       delete this._blend;
222 |     }
223 |   }
224 | 
225 |   /**
226 |     Apply a custom filter to the viewport
227 |     @param {Object} image - image object from the canvas element
228 |     @return {Object} image data object containing pixels informations
229 |   */
230 |   _filter(image) {
231 | 
232 |     // get the image data
233 |     let data = image.data;
234 | 
235 |     // prevent from filtering errors
236 |     try {
237 | 
238 |       // loop through all pixels and apply the filter
239 |       for (let y = 0; y < this._props.height; y++) {
240 |         for (let x = 0; x < this._props.width; x++) {
241 | 
242 |           // detect the pixel offset
243 |           // eslint-disable-next-line
244 |           const offset = ((this._props.width * y) + x) * 4;
245 | 
246 |           // call the filter
247 |           const filter = this._props.filter({
248 |             'offset': offset,
249 |             'x': x,
250 |             'y': y,
251 |             'red': data[offset],
252 |             'green': data[offset + 1],
253 |             'blue': data[offset + 2],
254 |             'alpha': data[offset + 3],
255 |           });
256 | 
257 |           // apply the filter
258 |           data[offset] = filter[0];
259 |           data[offset + 1] = filter[1];
260 |           data[offset + 2] = filter[2];
261 |           data[offset + 3] = filter[3];
262 |         }
263 |       }
264 | 
265 |       return image;
266 |     } catch {
267 |       throw new Error('Invalid filter, you need to return a valid [red, green, blue, alpha] pixel array');
268 |     }
269 |   }
270 | 
271 |   /**
272 |     Start the stream capture
273 |   */
274 |   start() {
275 | 
276 |     // compute the css filter properties
277 |     this._compute();
278 | 
279 |     // capture the device stream
280 |     this._capture();
281 |   }
282 | 
283 |   /**
284 |     Stop the stream capture
285 |   */
286 |   stop() {
287 | 
288 |     // exit if no stream is active
289 |     if (typeof this._stream === 'undefined') {
290 |       return;
291 |     }
292 | 
293 |     // loop through all stream tracks (audio + video) and stop them
294 |     this._stream.getTracks().forEach(function (track) {
295 |       track.stop();
296 |     });
297 | 
298 |     // reset the media element
299 |     this._media.srcObject = null;
300 |   }
301 | 
302 |   /**
303 |     Pause the camera audio/video streams
304 |   */
305 |   pause() {
306 | 
307 |     // exit if no stream is active
308 |     if (typeof this._stream === 'undefined') {
309 |       return;
310 |     }
311 | 
312 |     this._state.then(() => {
313 |       this._media.pause();
314 |       this._props.paused = true;
315 |     });
316 |   }
317 | 
318 |   /**
319 |     Resume the camera audio/video streams
320 |   */
321 |   resume() {
322 |     this._media.play();
323 |     this._props.paused = false;
324 |   }
325 | 
326 |   /**
327 |     Mute the microphone
328 |   */
329 |   mute() {
330 |     this._props.muted = this._media.muted = true;
331 |   }
332 | 
333 |   /**
334 |     Unmute the microphone
335 |   */
336 |   unmute() {
337 |     this._props.muted = this._media.muted = false;
338 |   }
339 | 
340 |   /**
341 |     Snap and crop the viewport to return image data
342 |     @param {Number} left - left position of the snapping area
343 |     @param {Number} top - top position of the snapping area
344 |     @param {Number} width - width of the snapping area
345 |     @param {Number} height - height of the snapping area
346 |     @return {Object} image data object containing pixels informations
347 |   */
348 |   snap(left = 0, top = 0, width = this._props.width, height = this._props.height) {
349 | 
350 |     // check the snap size area
351 |     if (width <= 0 || height <= 0) {
352 |       throw new Error('Invalid snap area, you need to specify a positive width and height for your image capture');
353 |     }
354 | 
355 |     return this.viewport.getContext('2d').getImageData(left, top, width, height);
356 |   }
357 | 
358 |   /**
359 |     Save the viewport to a specific image file format
360 |     @param {String} format - png|jpeg|webp image file format
361 |     @param {Number} quality - [0..1] image quality
362 |     @return {String} UTF-16 data image URI (DOMString)
363 |   */
364 |   save(format = 'png', quality = 1) {
365 |     return this.viewport.toDataURL('image/' + format, quality);
366 |   }
367 | 
368 |   /**
369 |     Get the camera facing mode
370 |     @return {String} front|back facing mode of the camera
371 |   */
372 |   get mode() {
373 |     return this._props.mode;
374 |   }
375 | 
376 |   /**
377 |     Set the camera facing mode
378 |     @param {String} mode - front|back facing mode of the camera
379 |   */
380 |   set mode(mode) {
381 | 
382 |     // eslint-disable-next-line
383 |     if (typeof mode !== 'string' || (mode !== 'front' && mode !== 'back')) {
384 |       throw new Error('Invalid facing mode, you need to give a valid string front|back');
385 |     }
386 | 
387 |     this._props.mode = mode;
388 | 
389 |     // stop all video tracks
390 |     this._stream.getVideoTracks().forEach(function (track) {
391 |       track.stop();
392 |     });
393 | 
394 |     // restart the capture
395 |     this._capture();
396 |   }
397 | 
398 |   /**
399 |     Get the camera audio/video pause state
400 |     @return {Boolean} true|false camera audio/video pause state
401 |   */
402 |   get paused() {
403 |     return this._media.paused;
404 |   }
405 | 
406 |   /**
407 |     Get the microphone mute state
408 |     @return {Boolean} true|false microphone mute state
409 |   */
410 |   get muted() {
411 |     return this._media.muted;
412 |   }
413 | 
414 |   /**
415 |     Get the camera volume
416 |     @return {Number} [0..100] volume of the camera audio stream
417 |   */
418 |   get volume() {
419 |     return this._props.volume;
420 |   }
421 | 
422 |   /**
423 |     Set the camera volume
424 |     @param {Number} volume - [0..100] volume of the camera audio stream
425 |   */
426 |   set volume(volume) {
427 |     if (typeof volume !== 'number' || volume < 0 || volume > 100) {
428 |       throw new Error('Invalid volume, you need to give a number between 0 and 100');
429 |     }
430 | 
431 |     this._media.volume = this._props.volume = volume / 100;
432 |   }
433 | 
434 |   /**
435 |     Get the camera mirror mode
436 |     @return {Boolean} true|false, mirror mode of the viewport (css transform)
437 |   */
438 |   get mirror() {
439 |     return this._props.mirror;
440 |   }
441 | 
442 |   /**
443 |     Set the camera mirror mode
444 |     @param {Boolean} mirror - true|false, mirror mode of the viewport (css transform)
445 |   */
446 |   set mirror(mirror) {
447 |     if (typeof mirror !== 'boolean') {
448 |       throw new Error('Invalid mirror mode, you need to give a boolean to enable or disable the mirror mode');
449 |     }
450 | 
451 |     let transform = getComputedStyle(this.viewport).getPropertyValue('transform');
452 |     transform = transform !== 'none' ? transform : '';
453 | 
454 |     this.viewport.style.transform = mirror === true ? `${transform} scale(-1, 1)` : '';
455 |     this._props.mirror = mirror;
456 |   }
457 | 
458 |   /**
459 |     Get the viewport opacity
460 |     @return {Number} [0..1] opacity of the viewport (css)
461 |   */
462 |   get opacity() {
463 |     return this._props.opacity;
464 |   }
465 | 
466 |   /**
467 |     Set the viewport opacity
468 |     @param {Number} opacity - [0..1] opacity of the viewport (css)
469 |   */
470 |   set opacity(opacity) {
471 |     if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {
472 |       throw new Error('Invalid opacity, you need to give a number between 0 and 1');
473 |     }
474 | 
475 |     this._props.opacity = opacity;
476 |     this._compute();
477 |   }
478 | 
479 |   /**
480 |     Get the viewport brightness
481 |     @return {Number} [0..*] brightness of the viewport (css filter)
482 |   */
483 |   get brightness() {
484 |     return this._props.brightness;
485 |   }
486 | 
487 |   /**
488 |     Set the viewport brightness
489 |     @param {Number} brightness - [0..*] brightness of the viewport (css filter)
490 |   */
491 |   set brightness(brightness) {
492 |     if (typeof brightness !== 'number' || brightness < 0) {
493 |       throw new Error('Invalid brightness, you need to give a number above 0');
494 |     }
495 | 
496 |     this._props.brightness = brightness;
497 |     this._compute();
498 |   }
499 | 
500 |   /**
501 |     Get the viewport contrast
502 |     @return {Number} [0..*] contrast of the viewport (css filter)
503 |   */
504 |   get contrast() {
505 |     return this._props.contrast;
506 |   }
507 | 
508 |   /**
509 |     Set the viewport contrast
510 |     @param {Number} contrast - [0..*] contrast of the viewport (css filter)
511 |   */
512 |   set contrast(contrast) {
513 |     if (typeof contrast !== 'number' || contrast < 0) {
514 |       throw new Error('Invalid contrast, you need to give a number above 0');
515 |     }
516 | 
517 |     this._props.contrast = contrast;
518 |     this._compute();
519 |   }
520 | 
521 |   /**
522 |     Get the viewport saturation
523 |     @return {Number} [0..*] saturation of the viewport (css filter)
524 |   */
525 |   get saturation() {
526 |     return this._props.saturation;
527 |   }
528 | 
529 |   /**
530 |     Set the viewport saturation
531 |     @param {Number} saturation - [0..*] saturation of the viewport (css filter)
532 |   */
533 |   set saturation(saturation) {
534 |     if (typeof saturation !== 'number' || saturation < 0) {
535 |       throw new Error('Invalid saturation, you need to give a number above 0');
536 |     }
537 | 
538 |     this._props.saturation = saturation;
539 |     this._compute();
540 |   }
541 | 
542 |   /**
543 |     Get the viewport hue
544 |     @return {Number} [0..360] hue of the viewport (css filter)
545 |   */
546 |   get hue() {
547 |     return this._props.hue;
548 |   }
549 | 
550 |   /**
551 |     Set the viewport hue
552 |     @param {Number} hue - [0..360] hue of the viewport (css filter)
553 |   */
554 |   set hue(hue) {
555 |     if (typeof hue !== 'number' || hue < 0 || hue > 360) {
556 |       throw new Error('Invalid hue, you need to give a number between 0 and 360');
557 |     }
558 | 
559 |     this._props.hue = hue;
560 |     this._compute();
561 |   }
562 | 
563 |   /**
564 |     Get the viewport color inversion
565 |     @return {Number} [0..1] invert the color of the viewport (css filter)
566 |   */
567 |   get invert() {
568 |     return this._props.invert;
569 |   }
570 | 
571 |   /**
572 |     Set the viewport color inversion
573 |     @param {Number} invert - [0..1] invert the color of the viewport (css filter)
574 |   */
575 |   set invert(invert) {
576 |     if (typeof invert !== 'number' || invert < 0 || invert > 1) {
577 |       throw new Error('Invalid invert, you need to give a number between 0 and 1');
578 |     }
579 | 
580 |     this._props.invert = invert;
581 |     this._compute();
582 |   }
583 | 
584 |   /**
585 |     Get the viewport grayscale
586 |     @return {Number} [0..1] grayscale of the viewport (css filter)
587 |   */
588 |   get grayscale() {
589 |     return this._props.grayscale;
590 |   }
591 | 
592 |   /**
593 |     Set the viewport grayscale
594 |     @param {Number} grayscale - [0..1] grayscale of the viewport (css filter)
595 |   */
596 |   set grayscale(grayscale) {
597 |     if (typeof grayscale !== 'number' || grayscale < 0 || grayscale > 1) {
598 |       throw new Error('Invalid grayscale, you need to give a number between 0 and 1');
599 |     }
600 | 
601 |     this._props.grayscale = grayscale;
602 |     this._compute();
603 |   }
604 | 
605 |   /**
606 |     Get the viewport sepia
607 |     @return {Number} [0..1] sepia of the viewport (css filter)
608 |   */
609 |   get sepia() {
610 |     return this._props.sepia;
611 |   }
612 | 
613 |   /**
614 |     Set the viewport sepia
615 |     @param {Number} sepia - [0..1] sepia of the viewport (css filter)
616 |   */
617 |   set sepia(sepia) {
618 |     if (typeof sepia !== 'number' || sepia < 0 || sepia > 1) {
619 |       throw new Error('Invalid sepia, you need to give a number between 0 and 1');
620 |     }
621 | 
622 |     this._props.sepia = sepia;
623 |     this._compute();
624 |   }
625 | 
626 |   /**
627 |     Get the viewport blur
628 |     @return {Number} [0..*] blur of the viewport (css filter)
629 |   */
630 |   get blur() {
631 |     return this._props.blur;
632 |   }
633 | 
634 |   /**
635 |     Set the viewport blur
636 |     @param {Number} blur - [0..*] blur of the viewport (css filter)
637 |   */
638 |   set blur(blur) {
639 |     if (typeof blur !== 'number' || blur < 0) {
640 |       throw new Error('Invalid blur, you need to give a number above 0');
641 |     }
642 | 
643 |     this._props.blur = blur;
644 |     this._compute();
645 |   }
646 | 
647 |   /**
648 |     Get the viewport svg filtering
649 |     @return {String} svg filtering of the viewport (css filter)
650 |   */
651 |   get url() {
652 |     return this._props.url;
653 |   }
654 | 
655 |   /**
656 |     Set the viewport svg filtering
657 |     @param {String} url - svg filtering of the viewport (css filter)
658 |   */
659 |   set url(url) {
660 |     if (typeof url !== 'string') {
661 |       throw new Error('Invalid url, you need to give a string');
662 |     }
663 | 
664 |     this._props.url = url;
665 |     this._compute();
666 |   }
667 | 
668 |   /**
669 |     Get the viewport blend layer
670 |     @return {Object} blend layer of the viewport (css mix blend mode)
671 |   */
672 |   get blend() {
673 |     return this._props.blend;
674 |   }
675 | 
676 |   /**
677 |     Set the viewport blend layer
678 |     @param {Object} blend - blend layer of the viewport (css mix blend mode)
679 |   */
680 |   set blend(blend) {
681 |     if (typeof blend !== 'object') {
682 |       throw new Error('Invalid blend, you need to give a valid object with {mode|color} or an empty object to disable blending');
683 |     }
684 | 
685 |     this._props.blend = blend;
686 |     this._compute();
687 |   }
688 | 
689 |   /**
690 |     Get the custom filter
691 |     @return {Function} custom filter of the viewport
692 |   */
693 |   get filter() {
694 |     return this._props.filter;
695 |   }
696 | 
697 |   /**
698 |     Set the custom filter
699 |     @param {Function} filter - custom filter applied to the viewport
700 |   */
701 |   set filter(filter) {
702 |     if (filter !== null && typeof filter !== 'function') {
703 |       throw new Error('Invalid filter, you need to give a function or null to disable the custom filtering');
704 |     }
705 | 
706 |     this._props.filter = filter;
707 |   }
708 | 
709 |   /**
710 |     Get style applied to the viewport
711 |     @return {Array} style applied to the viewport (css)
712 |   */
713 |   get style() {
714 |     return this._style.length !== 0 ? this._style.trim().split(' ') : [];
715 |   }
716 | 
717 |   /**
718 |     Get the current camera audio/video hardware data
719 |     @return {Object} hardware informations from the current audio/video tracks
720 |   */
721 |   get hardware() {
722 |     return typeof this._stream === 'undefined' ? null : this._hardware;
723 |   }
724 | }
725 | 


--------------------------------------------------------------------------------
/src/support.js:
--------------------------------------------------------------------------------
1 | // browser requirement needed for Instacam to properly work
2 | export default 'requestAnimationFrame' in window && 'mediaDevices' in navigator && 'Promise' in window;
3 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'node:path';
 2 | import TerserPlugin from 'terser-webpack-plugin';
 3 | 
 4 | export default () => ({
 5 |   mode: 'production',
 6 |   entry: './src/instacam.js',
 7 |   output: {
 8 |     filename: 'instacam.umd.js',
 9 |     path: path.resolve(import.meta.dirname, 'dist'),
10 |     library: 'Instacam',
11 |     libraryExport: 'default',
12 |     libraryTarget: 'umd',
13 |     umdNamedDefine: true,
14 |   },
15 |   optimization: {
16 |     minimizer: [
17 |       new TerserPlugin({
18 |         extractComments: false,
19 |         terserOptions: {
20 |           format: {
21 |             comments: false,
22 |           },
23 |           mangle: {
24 |             properties: {
25 |               regex: /^_/,
26 |             },
27 |           },
28 |         },
29 |       }),
30 |     ],
31 |   },
32 | });
33 | 


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