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

instacam

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

instacam - npm Package Compare versions

Comparing version 1.11.7 to 1.15.0

8

dist/instacam.umd.js
/*!
instacam – Instant canvas video
Xavier Foucrier @xavierfoucrier 2020 MIT
1.11.7
instacam - Instant canvas video
Xavier Foucrier @xavierfoucrier 2021 MIT
1.15.0
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Instacam",[],e):"object"==typeof exports?exports.Instacam=e():t.Instacam=e()}(window,(function(){return function(t){var e={};function i(s){if(e[s])return e[s].exports;var r=e[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"h",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.h)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(s,r,function(e){return t[e]}.bind(null,r));return s},i.n=function(t){var e=t&&t.h?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e),i.d(e,"default",(function(){return n}));var s={width:400,height:300,autostart:!0,camera:!0,mode:"front",framerate:30,ratio:4/3,sound:!1,volume:100,mirror:!1,opacity:1,brightness:1,contrast:1,saturation:1,hue:0,invert:0,grayscale:0,sepia:0,blur:0,url:"",blend:{},filter:null,done:null,fail:null,unsupported:null},r="requestAnimationFrame"in window&&"mediaDevices"in navigator&&"Promise"in window;class n{constructor(t,e){if(this.u=Object.assign({},s,e),r){if("string"==typeof t&&(t=document.querySelector(t)),null==t||"canvas"!==t.nodeName.toLowerCase())throw new Error("Invalid viewport, you need to pass a valid selector or HTML5 canvas element");this.viewport=t,this.viewport.setAttribute("data-instacam-viewport",""),this.viewport.width=this.u.width,this.viewport.height=this.u.height,this.v=document.createElement("video"),this.v.setAttribute("data-instacam-stream",""),this.v.style.display="none",this.viewport.parentNode.insertBefore(this.v,this.viewport.nextSibling),this.g=document.createElement("div"),this.g.setAttribute("data-instacam",""),this.g.style="position:relative;overflow:hidden;vertical-align:bottom;",this.viewport.parentNode.insertBefore(this.g,this.viewport),this.g.appendChild(this.viewport),this.g.appendChild(this.v),this.mirror=this.u.mirror,!0===this.u.autostart&&(this.I(),this.j())}else"function"==typeof this.u.unsupported&&this.u.unsupported()}j(){try{navigator.mediaDevices.getUserMedia({audio:this.u.sound,video:(()=>!1!==this.u.camera&&{width:this.u.width,height:this.u.height,frameRate:this.u.framerate,aspectRatio:this.u.ratio,facingMode:"front"===this.u.mode?"user":"environment"})()}).then((t=>{this.$=t,this.v.srcObject=t,this.O=this.v.play();let e=this.$.getAudioTracks().filter((t=>"live"===t.readyState))[0],i=this.$.getVideoTracks().filter((t=>"live"===t.readyState))[0];if(this.k={audio:void 0===e?null:{id:e.id,name:e.label,track:e},video:void 0===i?null:{id:i.id,name:i.label,track:i,width:i.getSettings().width,height:i.getSettings().height}},this.viewport.width=null!==this.k.video?this.k.video.width:0,this.viewport.height=null!==this.k.video?this.k.video.height:0,this.volume=this.u.volume,this.u.camera){const t=()=>{"function"!=typeof this.u.filter?this.viewport.getContext("2d").drawImage(this.v,0,0,this.viewport.width,this.viewport.height):(void 0===this._&&(this._=document.createElement("canvas"),this._.setAttribute("data-instacam-buffer",""),this._.style.display="none",this._.width=this.viewport.width,this._.height=this.viewport.height,this.viewport.parentNode.insertBefore(this._,this.viewport.nextSibling)),this._.getContext("2d").drawImage(this.v,0,0,this.viewport.width,this.viewport.height),this.viewport.getContext("2d").putImageData(this.M(this._.getContext("2d").getImageData(0,0,this.viewport.width,this.viewport.height)),0,0)),requestAnimationFrame(t)};requestAnimationFrame(t)}"function"==typeof this.u.done&&this.u.done()})).catch((t=>{"function"==typeof this.u.fail&&this.u.fail(t)}))}catch(t){"function"==typeof this.u.fail&&this.u.fail(t)}}I(){this.S=this.u.opacity!==s.opacity?`opacity(${this.u.opacity}) `:"",this.S+=this.u.brightness!==s.brightness?`brightness(${this.u.brightness}) `:"",this.S+=this.u.contrast!==s.contrast?`contrast(${this.u.contrast}) `:"",this.S+=this.u.saturation!==s.saturation?`saturate(${this.u.saturation}) `:"",this.S+=this.u.hue!==s.hue?`hue-rotate(${this.u.hue}deg) `:"",this.S+=this.u.invert!==s.invert?`invert(${this.u.invert}) `:"",this.S+=this.u.grayscale!==s.grayscale?`grayscale(${this.u.grayscale}) `:"",this.S+=this.u.sepia!==s.sepia?`sepia(${this.u.sepia}) `:"",this.S+=this.u.blur!==s.blur?`blur(${this.u.blur}px) `:"",this.S+=this.u.url!==s.url?`url(${this.u.url}) `:"",this.viewport.style.filter=this.S,0!==Object.keys(this.u.blend).length?(void 0===this.q&&(this.q=document.createElement("div"),this.q.setAttribute("data-instacam-blend",""),this.viewport.parentNode.insertBefore(this.q,this.viewport)),this.q.style=`position:absolute;z-index:1;width:100%;height:100%;mix-blend-mode:${this.u.blend.mode};background:${this.u.blend.color};pointer-events:none;`):void 0!==this.q&&(this.q.parentNode.removeChild(this.q),delete this.q)}M(t){let e=t.data;try{for(let t=0;t<this.u.height;t++)for(let i=0;i<this.u.width;i++){const s=4*(this.u.width*t+i),r=this.u.filter({offset:s,x:i,y:t,red:e[s],green:e[s+1],blue:e[s+2],alpha:e[s+3]});e[s]=r[0],e[s+1]=r[1],e[s+2]=r[2],e[s+3]=r[3]}return t}catch(t){throw new Error("Invalid filter, you need to return a valid [red, green, blue, alpha] pixel array")}}start(){this.I(),this.j()}stop(){void 0!==this.$&&(this.$.getTracks().forEach((function(t){t.stop()})),this.v.srcObject=null)}pause(){void 0!==this.$&&this.O.then((()=>{this.v.pause(),this.u.paused=!0}))}resume(){this.v.play(),this.u.paused=!1}mute(){this.u.muted=this.v.muted=!0}unmute(){this.u.muted=this.v.muted=!1}snap(t=0,e=0,i=this.u.width,s=this.u.height){if(i<=0||s<=0)throw new Error("Invalid snap area, you need to specify a positive width and height for your image capture");return this.viewport.getContext("2d").getImageData(t,e,i,s)}save(t="png",e=1){return this.viewport.toDataURL("image/"+t,e)}get mode(){return this.u.mode}set mode(t){if("string"!=typeof t||"front"!==t&&"back"!==t)throw new Error("Invalid facing mode, you need to give a valid string front|back");this.u.mode=t,this.$.getVideoTracks().forEach((function(t){t.stop()})),this.j()}get paused(){return this.v.paused}get muted(){return this.v.muted}get volume(){return this.u.volume}set volume(t){if("number"!=typeof t||t<0||t>100)throw new Error("Invalid volume, you need to give a number between 0 and 100");this.v.volume=this.u.volume=t/100}get mirror(){return this.u.mirror}set mirror(t){if("boolean"!=typeof t)throw new Error("Invalid mirror mode, you need to give a boolean to enable or disable the mirror mode");let e=getComputedStyle(this.viewport).getPropertyValue("transform");e="none"!==e?e:"",this.viewport.style.transform=!0===t?`${e} scale(-1, 1)`:"",this.u.mirror=t}get opacity(){return this.u.opacity}set opacity(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid opacity, you need to give a number between 0 and 1");this.u.opacity=t,this.I()}get brightness(){return this.u.brightness}set brightness(t){if("number"!=typeof t||t<0)throw new Error("Invalid brightness, you need to give a number above 0");this.u.brightness=t,this.I()}get contrast(){return this.u.contrast}set contrast(t){if("number"!=typeof t||t<0)throw new Error("Invalid contrast, you need to give a number above 0");this.u.contrast=t,this.I()}get saturation(){return this.u.saturation}set saturation(t){if("number"!=typeof t||t<0)throw new Error("Invalid saturation, you need to give a number above 0");this.u.saturation=t,this.I()}get hue(){return this.u.hue}set hue(t){if("number"!=typeof t||t<0||t>360)throw new Error("Invalid hue, you need to give a number between 0 and 360");this.u.hue=t,this.I()}get invert(){return this.u.invert}set invert(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid invert, you need to give a number between 0 and 1");this.u.invert=t,this.I()}get grayscale(){return this.u.grayscale}set grayscale(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid grayscale, you need to give a number between 0 and 1");this.u.grayscale=t,this.I()}get sepia(){return this.u.sepia}set sepia(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid sepia, you need to give a number between 0 and 1");this.u.sepia=t,this.I()}get blur(){return this.u.blur}set blur(t){if("number"!=typeof t||t<0)throw new Error("Invalid blur, you need to give a number above 0");this.u.blur=t,this.I()}get url(){return this.u.url}set url(t){if("string"!=typeof t)throw new Error("Invalid url, you need to give a string");this.u.url=t,this.I()}get blend(){return this.u.blend}set blend(t){if("object"!=typeof t)throw new Error("Invalid blend, you need to give a valid object with {mode|color} or an empty object to disable blending");this.u.blend=t,this.I()}get filter(){return this.u.filter}set filter(t){if(null!==t&&"function"!=typeof t)throw new Error("Invalid filter, you need to give a function or null to disable the custom filtering");this.u.filter=t}get style(){return 0!==this.S.length?this.S.trim().split(" "):[]}get hardware(){return void 0===this.$?null:this.k}}}]).default}));
!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("Instacam",[],i):"object"==typeof exports?exports.Instacam=i():t.Instacam=i()}(self,(function(){return(()=>{"use strict";var t={d:(i,e)=>{for(var s in e)t.o(e,s)&&!t.o(i,s)&&Object.defineProperty(i,s,{enumerable:!0,get:e[s]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i)},i={};t.d(i,{default:()=>r});const e={width:400,height:300,autostart:!0,camera:!0,mode:"front",framerate:30,ratio:4/3,sound:!1,volume:100,mirror:!1,opacity:1,brightness:1,contrast:1,saturation:1,hue:0,invert:0,grayscale:0,sepia:0,blur:0,url:"",blend:{},filter:null,done:null,fail:null,unsupported:null},s="requestAnimationFrame"in window&&"mediaDevices"in navigator&&"Promise"in window;class r{constructor(t,i){if(this.t=Object.assign({},e,i),s){if("string"==typeof t&&(t=document.querySelector(t)),null==t||"canvas"!==t.nodeName.toLowerCase())throw new Error("Invalid viewport, you need to pass a valid selector or HTML5 canvas element");this.viewport=t,this.viewport.setAttribute("data-instacam-viewport",""),this.viewport.width=this.t.width,this.viewport.height=this.t.height,this.i=document.createElement("video"),this.i.setAttribute("data-instacam-stream",""),this.i.style.display="none",this.viewport.parentNode.insertBefore(this.i,this.viewport.nextSibling),this.h=document.createElement("div"),this.h.setAttribute("data-instacam",""),this.h.style="position:relative;overflow:hidden;vertical-align:bottom;",this.viewport.parentNode.insertBefore(this.h,this.viewport),this.h.appendChild(this.viewport),this.h.appendChild(this.i),this.mirror=this.t.mirror,!0===this.t.autostart&&(this.u(),this.l())}else"function"==typeof this.t.unsupported&&this.t.unsupported()}l(){try{navigator.mediaDevices.getUserMedia({audio:this.t.sound,video:(()=>!1!==this.t.camera&&{width:this.t.width,height:this.t.height,frameRate:this.t.framerate,aspectRatio:this.t.ratio,facingMode:"front"===this.t.mode?"user":"environment"})()}).then((t=>{this.v=t,this.i.srcObject=t,this.m=this.i.play();let i=this.v.getAudioTracks().filter((t=>"live"===t.readyState))[0],e=this.v.getVideoTracks().filter((t=>"live"===t.readyState))[0];if(this.g={audio:void 0===i?null:{id:i.id,name:i.label,track:i},video:void 0===e?null:{id:e.id,name:e.label,track:e,width:e.getSettings().width,height:e.getSettings().height}},this.viewport.width=null!==this.g.video?this.g.video.width:0,this.viewport.height=null!==this.g.video?this.g.video.height:0,this.volume=this.t.volume,this.t.camera){const t=()=>{"function"!=typeof this.t.filter?this.viewport.getContext("2d").drawImage(this.i,0,0,this.viewport.width,this.viewport.height):(void 0===this.p&&(this.p=document.createElement("canvas"),this.p.setAttribute("data-instacam-buffer",""),this.p.style.display="none",this.p.width=this.viewport.width,this.p.height=this.viewport.height,this.viewport.parentNode.insertBefore(this.p,this.viewport.nextSibling)),this.p.getContext("2d").drawImage(this.i,0,0,this.viewport.width,this.viewport.height),this.viewport.getContext("2d").putImageData(this.I(this.p.getContext("2d").getImageData(0,0,this.viewport.width,this.viewport.height)),0,0)),requestAnimationFrame(t)};requestAnimationFrame(t)}"function"==typeof this.t.done&&this.t.done()})).catch((t=>{"function"==typeof this.t.fail&&this.t.fail(t)}))}catch(t){"function"==typeof this.t.fail&&this.t.fail(t)}}u(){this.$=this.t.opacity!==e.opacity?`opacity(${this.t.opacity}) `:"",this.$+=this.t.brightness!==e.brightness?`brightness(${this.t.brightness}) `:"",this.$+=this.t.contrast!==e.contrast?`contrast(${this.t.contrast}) `:"",this.$+=this.t.saturation!==e.saturation?`saturate(${this.t.saturation}) `:"",this.$+=this.t.hue!==e.hue?`hue-rotate(${this.t.hue}deg) `:"",this.$+=this.t.invert!==e.invert?`invert(${this.t.invert}) `:"",this.$+=this.t.grayscale!==e.grayscale?`grayscale(${this.t.grayscale}) `:"",this.$+=this.t.sepia!==e.sepia?`sepia(${this.t.sepia}) `:"",this.$+=this.t.blur!==e.blur?`blur(${this.t.blur}px) `:"",this.$+=this.t.url!==e.url?`url(${this.t.url}) `:"",this.viewport.style.filter=this.$,0!==Object.keys(this.t.blend).length?(void 0===this.j&&(this.j=document.createElement("div"),this.j.setAttribute("data-instacam-blend",""),this.viewport.parentNode.insertBefore(this.j,this.viewport)),this.j.style=`position:absolute;z-index:1;width:100%;height:100%;mix-blend-mode:${this.t.blend.mode};background:${this.t.blend.color};pointer-events:none;`):void 0!==this.j&&(this.j.parentNode.removeChild(this.j),delete this.j)}I(t){let i=t.data;try{for(let t=0;t<this.t.height;t++)for(let e=0;e<this.t.width;e++){const s=4*(this.t.width*t+e),r=this.t.filter({offset:s,x:e,y:t,red:i[s],green:i[s+1],blue:i[s+2],alpha:i[s+3]});i[s]=r[0],i[s+1]=r[1],i[s+2]=r[2],i[s+3]=r[3]}return t}catch(t){throw new Error("Invalid filter, you need to return a valid [red, green, blue, alpha] pixel array")}}start(){this.u(),this.l()}stop(){void 0!==this.v&&(this.v.getTracks().forEach((function(t){t.stop()})),this.i.srcObject=null)}pause(){void 0!==this.v&&this.m.then((()=>{this.i.pause(),this.t.paused=!0}))}resume(){this.i.play(),this.t.paused=!1}mute(){this.t.muted=this.i.muted=!0}unmute(){this.t.muted=this.i.muted=!1}snap(t=0,i=0,e=this.t.width,s=this.t.height){if(e<=0||s<=0)throw new Error("Invalid snap area, you need to specify a positive width and height for your image capture");return this.viewport.getContext("2d").getImageData(t,i,e,s)}save(t="png",i=1){return this.viewport.toDataURL("image/"+t,i)}get mode(){return this.t.mode}set mode(t){if("string"!=typeof t||"front"!==t&&"back"!==t)throw new Error("Invalid facing mode, you need to give a valid string front|back");this.t.mode=t,this.v.getVideoTracks().forEach((function(t){t.stop()})),this.l()}get paused(){return this.i.paused}get muted(){return this.i.muted}get volume(){return this.t.volume}set volume(t){if("number"!=typeof t||t<0||t>100)throw new Error("Invalid volume, you need to give a number between 0 and 100");this.i.volume=this.t.volume=t/100}get mirror(){return this.t.mirror}set mirror(t){if("boolean"!=typeof t)throw new Error("Invalid mirror mode, you need to give a boolean to enable or disable the mirror mode");let i=getComputedStyle(this.viewport).getPropertyValue("transform");i="none"!==i?i:"",this.viewport.style.transform=!0===t?`${i} scale(-1, 1)`:"",this.t.mirror=t}get opacity(){return this.t.opacity}set opacity(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid opacity, you need to give a number between 0 and 1");this.t.opacity=t,this.u()}get brightness(){return this.t.brightness}set brightness(t){if("number"!=typeof t||t<0)throw new Error("Invalid brightness, you need to give a number above 0");this.t.brightness=t,this.u()}get contrast(){return this.t.contrast}set contrast(t){if("number"!=typeof t||t<0)throw new Error("Invalid contrast, you need to give a number above 0");this.t.contrast=t,this.u()}get saturation(){return this.t.saturation}set saturation(t){if("number"!=typeof t||t<0)throw new Error("Invalid saturation, you need to give a number above 0");this.t.saturation=t,this.u()}get hue(){return this.t.hue}set hue(t){if("number"!=typeof t||t<0||t>360)throw new Error("Invalid hue, you need to give a number between 0 and 360");this.t.hue=t,this.u()}get invert(){return this.t.invert}set invert(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid invert, you need to give a number between 0 and 1");this.t.invert=t,this.u()}get grayscale(){return this.t.grayscale}set grayscale(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid grayscale, you need to give a number between 0 and 1");this.t.grayscale=t,this.u()}get sepia(){return this.t.sepia}set sepia(t){if("number"!=typeof t||t<0||t>1)throw new Error("Invalid sepia, you need to give a number between 0 and 1");this.t.sepia=t,this.u()}get blur(){return this.t.blur}set blur(t){if("number"!=typeof t||t<0)throw new Error("Invalid blur, you need to give a number above 0");this.t.blur=t,this.u()}get url(){return this.t.url}set url(t){if("string"!=typeof t)throw new Error("Invalid url, you need to give a string");this.t.url=t,this.u()}get blend(){return this.t.blend}set blend(t){if("object"!=typeof t)throw new Error("Invalid blend, you need to give a valid object with {mode|color} or an empty object to disable blending");this.t.blend=t,this.u()}get filter(){return this.t.filter}set filter(t){if(null!==t&&"function"!=typeof t)throw new Error("Invalid filter, you need to give a function or null to disable the custom filtering");this.t.filter=t}get style(){return 0!==this.$.length?this.$.trim().split(" "):[]}get hardware(){return void 0===this.v?null:this.g}}return i=i.default})()}));

2

LICENSE.md
MIT License
Copyright (c) 2020 Xavier Foucrier
Copyright (c) 2021 Xavier Foucrier

@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

12

package.json
{
"name": "instacam",
"year": "2020",
"version": "1.11.7",
"version": "1.15.0",
"description": "Instant canvas video",
"source": "src/instacam.js",
"main": "dist/instacam.umd.js",
"browser": "dist/instacam.umd.js",
"unpkg": "dist/instacam.umd.js",

@@ -39,6 +40,7 @@ "scripts": {

"devDependencies": {
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.44.2",
"webpack-command": "^0.5.0"
"eslint": "^7.29.0",
"terser-webpack-plugin": "^5.1.3",
"webpack": "^5.40.0",
"webpack-cli": "^4.7.2"
}
}

9

README.md
# 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) [![dependencies](https://img.shields.io/librariesio/release/npm/instacam)](https://github.com/xavierfoucrier/instacam/network/dependencies)
Instacam is a library to perform **instant canvas video** through the WebRTC API with a fresh touch of CSS filters.

@@ -6,3 +7,2 @@

## Compatibility

@@ -13,3 +13,2 @@ Instacam is fully tested on **Google Chrome** for desktop *(latest public released version)*. The library 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.

## Install

@@ -28,3 +27,2 @@ 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:

## Documentation

@@ -42,7 +40,5 @@ Here you will find the documentation describing **how to use** the library.

## Contribute
If you want to report a bug or if you just want to request for a new feature/improvement, please **read the project [contributors guidelines](CONTRIBUTING.md) before**. Thanks for taking time to contribute to Instacam.
If you want to report a bug or request a new feature/improvement, please **read the project [contributors guidelines](CONTRIBUTING.md) before**. Thanks for taking time to contribute.
## License

@@ -57,5 +53,4 @@ The project is developed under the **MIT** license:

## Questions?
If you have any questions, please **feel free to contact me!**
[xavier.foucrier [at] gmail.com](mailto:xavier.foucrier@gmail.com)
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc