browser-media - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

changelog.md

 `0.0.1` 使用 `html2canvas` 实现拍摄框等比图片输出。但拍摄速度较慢，打包体积较大。
 
 `0.0.2` 去掉 `html2canvas`，加入 `web-dsp` 拍照滤镜。
+
+`0.0.3` 提供 `close` 方法关闭视频状态。

dist/main.js

@@ -1,1 +0,1 @@
-!function(e){var t={};function a(s){if(t[s])return t[s].exports;var r=t[s]={i:s,l:!1,exports:{}};return e[s].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=t,a.d=function(e,t,s){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(a.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(s,r,function(t){return e[t]}.bind(null,r));return s},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/",a(a.s=0)}([function(e,t,a){var s;!function(e){"use strict";const t=function(e){return new a(e)};function a(e){const t={video:{facingMode:"environment",width:1280,height:720},audio:!0,type:"image",filter:"Normal"};if("object"==typeof e&&e)for(let a in e)t[a]=e[a];this.set=t}function s(e){if(!document.querySelector("#canvas")){const t=document.createElement("canvas");t.id="canvas",t.style.width="100%","image"===e.type||e.type,"video"===e.type&&(t.style.height="auto"),document.querySelector(e.el).parentNode.replaceChild(t,document.querySelector(e.el))}return document.querySelector("#canvas")}function r(e){if(!document.querySelector("#video")){const e=document.createElement("video");e.id="video",e.style.display="none",document.querySelector("#canvas").parentNode.appendChild(e)}return document.querySelector("#video")}function i(t,a){const s=t.split(","),r=s[0].match(/:(.*?);/)[1]||a,i=e.atob(s[1]),o=new ArrayBuffer(i.length),d=new Uint8Array(o);for(let e=0;e<i.length;e++)d[e]=i.charCodeAt(e);return new Blob([o],{type:r})}t.prototype=a.prototype={open(){const t=navigator.mediaDevices&&navigator.mediaDevices.getUserMedia(this.set);return t?(this.isOpen=!0,this.canvas=s(this.set),this.context=this.canvas.getContext("2d"),this.video=r(this.set),this.video.addEventListener("loadeddata",(()=>{this.canvas.setAttribute("height",this.video.videoHeight),this.canvas.setAttribute("width",this.video.videoWidth),this.draw()})),t.then((t=>{this.mediaRecorder=new e.MediaRecorder(t),this.chunks=[],this.mediaRecorder.ondataavailable=e=>{this.chunks.push(e.data)},this.mediaRecorder.onstop=()=>{this.recorderFile=new Blob(this.chunks,{type:this.mediaRecorder.mimeType}),this.chunks=[],this.recordCallback(this.convertRecordFile(this.recorderFile))},this.video.srcObject=t,this.video.play()})).catch((e=>{console.error(e),this.isOpen=!1})),!0):(console.error("navigator.mediaDevices.getUserMedia 开启失败，请检查浏览器支持及是否在本地环境或https下。"),this.isOpen=!1,!1)},draw(){const t=this.video.videoWidth,a=this.video.videoHeight,s=t/a,r=this.canvas.clientWidth/this.canvas.clientHeight;let i,o,d,n;s<r?(n=t,d=n/r,i=0,o=(a-d)/2):(d=a,n=a*r,o=0,i=(t-n)/2),this.context.drawImage(this.video,i,o,n,d,0,0,this.video.videoWidth,this.video.videoHeight),this.pixels=this.context.getImageData(0,0,video.videoWidth,video.videoHeight),"Normal"!==this.set.filter&&this.setPixels(this.set.filter,"wasm"),this.context.putImageData(this.pixels,0,0),e.requestAnimationFrame((()=>{this.draw()}))},async shot(){return!!this.isOpen&&i(this.canvas.toDataURL("image/jpeg"))},startRecord(){if(!this.isOpen)return!1;this.mediaRecorder&&this.mediaRecorder.start()},stopRecord(e){if(!this.isOpen)return!1;this.mediaRecorder&&(e&&(this.recordCallback=e),this.mediaRecorder.stop())},convertRecordFile(t){const a=new File([t],"msr-"+(new Date).toISOString().replace(/:|\./g,"-")+".mp4",{type:"video/mp4"});return(e.URL||e.webkitURL).createObjectURL(a)},setMediaType(e){const t=document.querySelector("#video");"video"===e&&(t.style.height="auto"),"image"===e&&(t.style.height="100%")},setPixels(e){const{pixels:t}=this,a=this.video.videoWidth,s=this.video.videoHeight;try{switch(e){case"Grayscale":t.data.set(wasm.grayScale(t.data));break;case"Brighten":t.data.set(wasm.brighten(t.data));break;case"Invert":t.data.set(wasm.invert(t.data));break;case"Noise":t.data.set(wasm.noise(t.data));break;case"Sunset":t.data.set(wasm.sunset(t.data,a));break;case"Analog TV":t.data.set(wasm.analogTV(t.data,a));break;case"Emboss":t.data.set(wasm.emboss(t.data,a));break;case"Super Edge":t.data.set(wasm.sobelFilter(t.data,a,s));break;case"Super Edge Inv":t.data.set(wasm.sobelFilter(t.data,a,s,!0));break;case"Gaussian Blur":t.data.set(wasm.blur(t.data,a,s));break;case"Sharpen":t.data.set(wasm.sharpen(t.data,a,s));break;case"Uber Sharpen":t.data.set(wasm.strongSharpen(t.data,a,s));break;case"Clarity":t.data.set(wasm.clarity(t.data,a,s));break;case"Good Morning":t.data.set(wasm.goodMorning(t.data,a,s));break;case"Acid":t.data.set(wasm.acid(t.data,a,s));break;case"Urple":t.data.set(wasm.urple(t.data,a));break;case"Forest":t.data.set(wasm.forest(t.data,a));break;case"Romance":t.data.set(wasm.romance(t.data,a));break;case"Hippo":t.data.set(wasm.hippo(t.data,a));break;case"Longhorn":t.data.set(wasm.longhorn(t.data,a));break;case"Underground":t.data.set(wasm.underground(t.data,a));break;case"Rooster":t.data.set(wasm.rooster(t.data,a));break;case"Moss":t.data.set(wasm.moss(t.data,a));break;case"Mist":t.data.set(wasm.mist(t.data,a));break;case"Tingle":t.data.set(wasm.tingle(t.data,a));break;case"Kaleidoscope":t.data.set(wasm.kaleidoscope(t.data,a));break;case"Bacteria":t.data.set(wasm.bacteria(t.data,a));break;case"Dewdrops":t.data.set(wasm.dewdrops(t.data,a,s));break;case"Color Destruction":t.data.set(wasm.destruction(t.data,a,s));break;case"Hulk Edge":t.data.set(wasm.hulk(t.data,a));break;case"Ghost":t.data.set(wasm.ghost(t.data,a));break;case"Swasmp":t.data.set(wasm.swasmp(t.data,a));break;case"Twisted":t.data.set(wasm.twisted(t.data,a));break;case"Security":t.data.set(wasm.security(t.data,a));break;case"Robbery":t.data.set(wasm.robbery(t.data,a))}}catch(e){console.log(e)}},setFilter(e){this.set.filter=e}},e.BrowserMedia=t}(window),void 0===(s=function(){return BrowserMedia}.call(t,a,t,e))||(e.exports=s),e.exports&&(e.exports=BrowserMedia)}]);
+!function(e){var t={};function a(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,a),i.l=!0,i.exports}a.m=e,a.c=t,a.d=function(e,t,s){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(a.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)a.d(s,i,function(t){return e[t]}.bind(null,i));return s},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/",a(a.s=0)}([function(e,t,a){var s;!function(e){"use strict";const t=function(e){return new a(e)};function a(e){const t={video:{facingMode:"environment",width:1280,height:720},audio:!0,type:"image",filter:"Normal"};if("object"==typeof e&&e)for(let a in e)t[a]=e[a];this.set=t}function s(e){if(!document.querySelector("#canvas")){const t=document.createElement("canvas");t.id="canvas",t.style.width="100%","image"===e.type||e.type,"video"===e.type&&(t.style.height="auto"),document.querySelector(e.el).parentNode.replaceChild(t,document.querySelector(e.el))}return document.querySelector("#canvas")}function i(e){if(!document.querySelector("#video")){const e=document.createElement("video");e.id="video",e.style.display="none",document.querySelector("#canvas").parentNode.appendChild(e)}return document.querySelector("#video")}function r(t,a){const s=t.split(","),i=s[0].match(/:(.*?);/)[1]||a,r=e.atob(s[1]),o=new ArrayBuffer(r.length),d=new Uint8Array(o);for(let e=0;e<r.length;e++)d[e]=r.charCodeAt(e);return new Blob([o],{type:i})}t.prototype=a.prototype={open(){const t=navigator.mediaDevices&&navigator.mediaDevices.getUserMedia(this.set);return t?(this.isOpen=!0,this.canvas=s(this.set),this.context=this.canvas.getContext("2d"),this.video=i(this.set),this.video.addEventListener("loadeddata",(()=>{this.canvas.setAttribute("height",this.video.videoHeight),this.canvas.setAttribute("width",this.video.videoWidth),this.draw()})),t.then((t=>{this.MediaStream=t,this.mediaRecorder=new e.MediaRecorder(t),this.chunks=[],this.mediaRecorder.ondataavailable=e=>{this.chunks.push(e.data)},this.mediaRecorder.onstop=()=>{this.recorderFile=new Blob(this.chunks,{type:this.mediaRecorder.mimeType}),this.chunks=[],this.recordCallback(this.convertRecordFile(this.recorderFile))},this.video.srcObject=t,this.video.play()})).catch((e=>{console.error(e),this.isOpen=!1})),!0):(console.error("navigator.mediaDevices.getUserMedia 开启失败，请检查浏览器支持及是否在本地环境或https下。"),this.isOpen=!1,!1)},close(){if(!this.isOpen)return!1;this.MediaStream&&(this.isOpen=!1,this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.MediaStream.getTracks().forEach((e=>{"live"==e.readyState&&e.stop()})))},draw(){if(!this.isOpen)return!1;const t=this.video.videoWidth,a=this.video.videoHeight,s=t/a,i=this.canvas.clientWidth/this.canvas.clientHeight;let r,o,d,n;s<i?(n=t,d=n/i,r=0,o=(a-d)/2):(d=a,n=a*i,o=0,r=(t-n)/2),this.context.drawImage(this.video,r,o,n,d,0,0,this.video.videoWidth,this.video.videoHeight),this.pixels=this.context.getImageData(0,0,video.videoWidth,video.videoHeight),"Normal"!==this.set.filter&&this.setPixels(this.set.filter,"wasm"),this.context.putImageData(this.pixels,0,0),e.requestAnimationFrame((()=>{this.draw()}))},async shot(){return!!this.isOpen&&r(this.canvas.toDataURL("image/jpeg"))},startRecord(){if(!this.isOpen)return!1;this.mediaRecorder&&this.mediaRecorder.start()},stopRecord(e){if(!this.isOpen)return!1;this.mediaRecorder&&(e&&(this.recordCallback=e),this.mediaRecorder.stop())},convertRecordFile(t){const a=new File([t],"msr-"+(new Date).toISOString().replace(/:|\./g,"-")+".mp4",{type:"video/mp4"});return(e.URL||e.webkitURL).createObjectURL(a)},setMediaType(e){const t=document.querySelector("#video");"video"===e&&(t.style.height="auto"),"image"===e&&(t.style.height="100%")},setPixels(e){const{pixels:t}=this,a=this.video.videoWidth,s=this.video.videoHeight;try{switch(e){case"Grayscale":t.data.set(wasm.grayScale(t.data));break;case"Brighten":t.data.set(wasm.brighten(t.data));break;case"Invert":t.data.set(wasm.invert(t.data));break;case"Noise":t.data.set(wasm.noise(t.data));break;case"Sunset":t.data.set(wasm.sunset(t.data,a));break;case"Analog TV":t.data.set(wasm.analogTV(t.data,a));break;case"Emboss":t.data.set(wasm.emboss(t.data,a));break;case"Super Edge":t.data.set(wasm.sobelFilter(t.data,a,s));break;case"Super Edge Inv":t.data.set(wasm.sobelFilter(t.data,a,s,!0));break;case"Gaussian Blur":t.data.set(wasm.blur(t.data,a,s));break;case"Sharpen":t.data.set(wasm.sharpen(t.data,a,s));break;case"Uber Sharpen":t.data.set(wasm.strongSharpen(t.data,a,s));break;case"Clarity":t.data.set(wasm.clarity(t.data,a,s));break;case"Good Morning":t.data.set(wasm.goodMorning(t.data,a,s));break;case"Acid":t.data.set(wasm.acid(t.data,a,s));break;case"Urple":t.data.set(wasm.urple(t.data,a));break;case"Forest":t.data.set(wasm.forest(t.data,a));break;case"Romance":t.data.set(wasm.romance(t.data,a));break;case"Hippo":t.data.set(wasm.hippo(t.data,a));break;case"Longhorn":t.data.set(wasm.longhorn(t.data,a));break;case"Underground":t.data.set(wasm.underground(t.data,a));break;case"Rooster":t.data.set(wasm.rooster(t.data,a));break;case"Moss":t.data.set(wasm.moss(t.data,a));break;case"Mist":t.data.set(wasm.mist(t.data,a));break;case"Tingle":t.data.set(wasm.tingle(t.data,a));break;case"Kaleidoscope":t.data.set(wasm.kaleidoscope(t.data,a));break;case"Bacteria":t.data.set(wasm.bacteria(t.data,a));break;case"Dewdrops":t.data.set(wasm.dewdrops(t.data,a,s));break;case"Color Destruction":t.data.set(wasm.destruction(t.data,a,s));break;case"Hulk Edge":t.data.set(wasm.hulk(t.data,a));break;case"Ghost":t.data.set(wasm.ghost(t.data,a));break;case"Swasmp":t.data.set(wasm.swasmp(t.data,a));break;case"Twisted":t.data.set(wasm.twisted(t.data,a));break;case"Security":t.data.set(wasm.security(t.data,a));break;case"Robbery":t.data.set(wasm.robbery(t.data,a))}}catch(e){console.log(e)}},setFilter(e){this.set.filter=e}},e.BrowserMedia=t}(window),void 0===(s=function(){return BrowserMedia}.call(t,a,t,e))||(e.exports=s),e.exports&&(e.exports=BrowserMedia)}]);

package.json

 {
   "name": "browser-media",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "browser-media 提供了在浏览器环境下通过摄像头拍照和录像的API",
@@ -5,0 +5,0 @@ "homepage": "",

README.md

@@ -36,2 +36,3 @@ # browser-media
   document.querySelector('#image-test').src = imageUrl;
+  Media.close(); // 关闭录像状态
 });
@@ -38,0 +39,0 @@

src/main.js

@@ -113,2 +113,3 @@ (function (factory) {
       media.then(MediaStream => {
+        this.MediaStream = MediaStream;
         this.mediaRecorder = new window.MediaRecorder(MediaStream);
@@ -135,3 +136,17 @@ this.chunks = [];
     },
+    close() {
+      if (!this.isOpen) return false;
+      if (this.MediaStream) {
+        this.isOpen = false;
+        this.context.setTransform(1, 0, 0, 1, 0, 0);
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.MediaStream.getTracks().forEach(track => {
+          if (track.readyState == 'live') {
+            track.stop();
+          }
+        })
+      }
+    },
     draw() {
+      if (!this.isOpen) return false;
       // 计算偏移量
@@ -138,0 +153,0 @@ const imageWidth = this.video.videoWidth;

Fixed alerts

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

Improved metrics

Total package byte prevSize

3490326

increased by0.03%

Lines of code

1356

increased by1.12%

Number of lines in readme file

72

increased by1.41%

Number of medium supply chain risk alerts

7

decreased by-12.5%

No dependency changes