cameraclick - npm Package Compare versions

Comparing version 0.2.2 to 1.1.0

dist/cameraclick.js

@@ -1,2 +0,120 @@
-"use strict";function CameraClick(e,t){let a=!1;const n={width:320,height:480,screenshotCaption:"Screenshot",resolution:"auto",captureCaption:{start:"Start",stop:"Stop"},...t};let i={};const o=e,c=document.createElement("button"),s=document.createElement("video"),r=document.createElement("div"),l=document.createElement("div"),d=(e={})=>{const a={type:"image/jpeg",quality:.85,stopStreamAfterCapture:!0,...e},n=document.createElement("canvas"),{width:o,height:c}=[...i.getVideoTracks()].filter(e=>e.enabled)[0].getSettings();if(n.width=o,n.height=c,n.getContext("2d").drawImage(s,0,0),"function"==typeof t.onCapture){const{type:e,quality:i}=a;t.onCapture({image:n.toDataURL(e,i),cropInfo:{width:o,height:c}})}},p=async function(){const e=await navigator.permissions.query({name:"camera"});return(await e).state};return o.className="cameraclick",l.className=`${e.className||"element"}__wrapper`,r.className=`${e.className||"element"}__video-wrapper`,c.className=`${e.className||"element"}__capture`,c.innerHTML=n.screenshotCaption,c.disabled=!0,c.onclick=d,s.autoplay=!0,s.width=n.width,s.height=n.height,s.style.objectFit="cover",l.appendChild(r),l.appendChild(c),o.appendChild(l),{isOpen:()=>a,capture:d,open:async(e,t)=>{"function"==typeof e&&e("granted"===await p()),a=!0,c.disabled=!1,navigator.getUserMedia({video:!0},function(e){r.innerHTML="",r.appendChild(s),s.srcObject=e,i=e,window.mediaTracks=i},function(e){"function"==typeof t&&t(e)})},close:e=>{c.disabled=!0,a=!1,s.srcObject=null,[...i.getTracks()].map(e=>e.stop()),"function"==typeof t.onClose&&e&&t.onClose()}}}module.exports=CameraClick;
+function CameraClick(element, camOptions) {
+  let isPlaying = false;
+  const options = {
+    width: 320,
+    height: 480,
+    screenshotCaption: 'Screenshot',
+    resolution: 'auto',
+    captureCaption: {
+      start: 'Start',
+      stop: 'Stop'
+    },
+    ...camOptions
+  };
+  let mediaTracks = {};
+  const videoElement = element;
+  const captureBtn = document.createElement('button');
+  const videoCanvas = document.createElement('video');
+  const videoWrapper = document.createElement('div');
+  const wrapper = document.createElement('div');
+
+  const open = async (onOpen, onSuccess, onError) => {
+    if (typeof onOpen === 'function') {
+      onOpen((await checkPermissions()) === 'granted');
+    }
+
+    isPlaying = true;
+    captureBtn.disabled = false;
+    navigator.getUserMedia({
+      video: true
+    }, function (localMediaStream) {
+      videoWrapper.innerHTML = '';
+      videoWrapper.appendChild(videoCanvas);
+      videoCanvas.srcObject = localMediaStream;
+      mediaTracks = localMediaStream;
+      window.mediaTracks = mediaTracks;
+
+      if (typeof onSuccess === 'function') {
+        onSuccess(localMediaStream);
+      }
+    }, function (error) {
+      if (typeof onError === 'function') onError(error);
+    });
+  };
+
+  const capture = (captureArguments = {}) => {
+    const captureOptions = {
+      type: 'image/jpeg',
+      quality: 1,
+      stopStreamAfterCapture: true,
+      ...captureArguments
+    };
+    const canvas = document.createElement('canvas');
+    const {
+      width,
+      height
+    } = [...mediaTracks.getVideoTracks()].filter(video => video.enabled)[0].getSettings();
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(videoCanvas, 0, 0);
+
+    if (typeof camOptions.onCapture === 'function') {
+      const {
+        type,
+        quality
+      } = captureOptions;
+      camOptions.onCapture({
+        data: canvas.toDataURL(type, quality),
+        cropInfo: {
+          width,
+          height
+        }
+      });
+    }
+  };
+
+  const close = activateCallback => {
+    captureBtn.disabled = true;
+    isPlaying = false;
+    videoCanvas.srcObject = null;
+    [...mediaTracks.getTracks()].map(track => track.stop());
+
+    if (typeof camOptions.onClose === 'function' && activateCallback) {
+      camOptions.onClose();
+    }
+  };
+
+  const checkPermissions = async function () {
+    const permissions = await navigator.permissions.query({
+      name: 'camera'
+    });
+    const result = await permissions;
+    return result.state;
+  };
+
+  const isOpen = () => isPlaying;
+
+  videoElement.className = 'cameraclick';
+  wrapper.className = `${element.className || 'element'}__wrapper`;
+  videoWrapper.className = `${element.className || 'element'}__video-wrapper`;
+  captureBtn.className = `${element.className || 'element'}__capture`;
+  captureBtn.innerHTML = options.screenshotCaption;
+  captureBtn.disabled = true;
+  captureBtn.onclick = capture;
+  videoCanvas.autoplay = true;
+  videoCanvas.width = options.width;
+  videoCanvas.height = options.height;
+  videoCanvas.style.objectFit = 'cover';
+  wrapper.appendChild(videoWrapper);
+  wrapper.appendChild(captureBtn);
+  videoElement.appendChild(wrapper);
+  return {
+    isOpen,
+    capture,
+    open,
+    close
+  };
+}
+
+export default CameraClick;
 //# sourceMappingURL=cameraclick.js.map

dist/index.js

@@ -1,2 +0,3 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var cameraclick=require("./cameraclick.js"),utils=require("./utils.js");exports.CameraClick=cameraclick,exports.adjustSizing=utils.adjustSizing;
+export { default as CameraClick } from './cameraclick.js';
+export { adjustSizing, createCanvas } from './utils.js';
 //# sourceMappingURL=index.js.map

dist/utils.js

@@ -1,2 +0,103 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const adjustSizing=(e,t,n,i)=>{const r=r=>{const u=e*i/t;return{newWidth:u,newHeight:i,...{x:(r?u-e:e-u)/(e>n?1:2),y:0}}},u=r=>{const u=t*n/e;return{newWidth:n,newHeight:u,...{x:0,y:(r?u-t:t-u)/(t>i?1:2)}}};if(n>i)return u();if(i>n)return r();if(i===n){if(e>t)return r(!0);if(t>e)return u(!0);if(t===e)return(()=>({newWidth:n,newHeight:i,x:0,y:0}))()}};exports.adjustSizing=adjustSizing;
+const createCanvas = async (imageData, parentDimensions, extension, quality) => {
+  const {
+    data,
+    cropInfo
+  } = imageData;
+  const img = document.createElement('img');
+  const canvas = document.createElement('canvas');
+  const {
+    width,
+    height
+  } = cropInfo;
+  const {
+    newWidth,
+    newHeight,
+    x,
+    y
+  } = adjustSizing(width, height, parentDimensions);
+  img.src = data;
+  canvas.getContext('2d').drawImage(img, x, y, newWidth, newHeight);
+  canvas.width = parentDimensions.width;
+  canvas.height = parentDimensions.height;
+  return new Promise(function (resolve, reject) {
+    img.onload = function () {
+      canvas.getContext('2d').drawImage(img, x, y, newWidth, newHeight);
+      resolve({
+        toBase64: () => canvas.toDataURL(`image/${extension || 'jpeg'}`, quality || 0.8),
+        toImage: () => {
+          const output = document.createElement('img');
+          output.src = canvas.toDataURL(`image/${extension || 'jpeg'}`, quality || 0.8);
+          return output;
+        }
+      });
+    };
+  });
+};
+const adjustSizing = (w, h, parentDimensions) => {
+  const {
+    width: parentWidth,
+    height: parentHeight
+  } = parentDimensions;
+
+  const portraitAdjust = even => {
+    const newHeight = parentHeight;
+    const newWidth = w * parentHeight / h;
+    const offset = {
+      x: (!even ? w - newWidth : newWidth - w) / (w > parentWidth ? 1 : 2),
+      y: 0
+    };
+    return {
+      newWidth,
+      newHeight,
+      ...offset
+    };
+  };
+
+  const landscapeAdjust = even => {
+    const newWidth = parentWidth;
+    const newHeight = h * parentWidth / w;
+    const offset = {
+      x: 0,
+      y: (!even ? h - newHeight : newHeight - h) / (h > parentHeight ? 1 : 2)
+    };
+    return {
+      newWidth,
+      newHeight,
+      ...offset
+    };
+  };
+
+  const squareAdjust = () => {
+    return {
+      newWidth: parentWidth,
+      newHeight: parentHeight,
+      x: 0,
+      y: 0
+    };
+  };
+
+  if (parentWidth > parentHeight) {
+    return landscapeAdjust();
+  }
+
+  if (parentHeight > parentWidth) {
+    return portraitAdjust();
+  }
+
+  if (parentHeight === parentWidth) {
+    if (w > h) {
+      return portraitAdjust(true);
+    }
+
+    if (h > w) {
+      return landscapeAdjust(true);
+    }
+
+    if (h === w) {
+      return squareAdjust();
+    }
+  }
+};
+
+export { adjustSizing, createCanvas };
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "cameraclick",
-  "version": "0.2.2",
+  "version": "1.1.0",
   "description": "Simple script to capture images from your browser",
@@ -5,0 +5,0 @@ "files": [

README.md

 ��# cameraclick
+
+Capture photos from your webcam easily
+
+## Usage
+
+Create a new instance:
+```
+  import { CameraClick, createCanvas } from 'cameraclick'
+  let camera;
+  const element = document.querySelector('#camera')
+
+  camera = new CameraClick(element, {
+    onCapture: async (imageData) => {
+      const parentDimensions = {
+        width: 320, //or the element width, like element.clientWidth
+        height: 480 //or the element height, like element.clientHeight
+      }
+      const resource = await createCanvas(imageData, parentDimensions, 'jpeg', 0.5)
+      // resource has two methods: `.toImage()` returns an <img /> 
+      // element and `toBase64()` returns an
+      // encoded base64 image string 
+      camera.close()
+    }
+  })
+```
+
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23724

increased by69.95%

Lines of code

211

increased by1072.22%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

28

increased by1300%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes