diff --git a/dist/webcam-easy.js b/dist/webcam-easy.js index cffab19..1a0d381 100644 --- a/dist/webcam-easy.js +++ b/dist/webcam-easy.js @@ -1,8 +1,8 @@ -class Webcam { +export default class Webcam { constructor(webcamElement, facingMode = 'user', canvasElement = null, snapSoundElement = null) { this._webcamElement = webcamElement; this._webcamElement.width = this._webcamElement.width || 640; - this._webcamElement.height = this._webcamElement.height || video.width * (3 / 4); + this._webcamElement.height = this._webcamElement.height || this._webcamElement.width * (3 / 4); this._facingMode = facingMode; this._webcamList = []; this._streamList = []; @@ -41,7 +41,7 @@ class Webcam { }); if(this._webcamList.length == 1){ this._facingMode = 'user'; - } + } return this._webcamList; } @@ -53,6 +53,8 @@ class Webcam { } else { videoConstraints.deviceId = { exact: this._selectedDeviceId}; } + /* Try to get a media stream that takes at least 1080p pictures */ + videoConstraints.height = { min: 1080 } var constraints = { video: videoConstraints, audio: false @@ -60,7 +62,7 @@ class Webcam { return constraints; } - /* Select camera based on facingMode */ + /* Select camera based on facingMode */ selectCamera(){ for(let webcam of this._webcamList){ if( (this._facingMode=='user' && webcam.label.toLowerCase().includes('front')) @@ -73,21 +75,21 @@ class Webcam { } } - /* Change Facing mode and selected camera */ + /* Change Facing mode and selected camera */ flip(){ this._facingMode = (this._facingMode == 'user')? 'enviroment': 'user'; this._webcamElement.style.transform = ""; - this.selectCamera(); + this.selectCamera(); } /* 1. Get permission from user 2. Get all video input devices info - 3. Select camera based on facingMode + 3. Select camera based on facingMode 4. Start stream */ async start(startStream = true) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { this.stop(); navigator.mediaDevices.getUserMedia(this.getMediaConstraints()) //get permisson from user .then(stream => { @@ -106,7 +108,7 @@ class Webcam { }else{ resolve(this._selectedDeviceId); } - }) + }) .catch(error => { reject(error); }); @@ -117,27 +119,32 @@ class Webcam { }); } - /* Get all video input devices info */ + /* Get all video input devices info */ async info(){ - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { navigator.mediaDevices.enumerateDevices() .then(devices =>{ this.getVideoInputs(devices); resolve(this._webcamList); - }) + }) .catch(error => { reject(error); }); }); } - - /* Start streaming webcam to video element */ + + /* Start streaming webcam to video element */ async stream() { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { navigator.mediaDevices.getUserMedia(this.getMediaConstraints()) .then(stream => { + let self = this; this._streamList.push(stream); this._webcamElement.srcObject = stream; + this._webcamElement.onloadedmetadata = function() { + self.snapHeight = this.videoHeight; + self.snapWidth = this.videoWidth; + } if(this._facingMode == 'user'){ this._webcamElement.style.transform = "scale(-1,1)"; } @@ -151,13 +158,13 @@ class Webcam { }); } - /* Stop streaming webcam */ + /* Stop streaming webcam */ stop() { this._streamList.forEach(stream => { stream.getTracks().forEach(track => { track.stop(); }); - }); + }); } snap() { @@ -165,8 +172,8 @@ class Webcam { if(this._snapSoundElement!= null){ this._snapSoundElement.play(); } - this._canvasElement.height = this._webcamElement.scrollHeight; - this._canvasElement.width = this._webcamElement.scrollWidth; + this._canvasElement.width = this.snapWidth || this._webcamElement.scrollWidth; + this._canvasElement.height = this.snapHeight || this._webcamElement.scrollHeight; let context = this._canvasElement.getContext('2d'); if(this._facingMode == 'user'){ context.translate(this._canvasElement.width, 0); @@ -180,5 +187,5 @@ class Webcam { else{ throw "canvas element is missing"; } - } -} \ No newline at end of file + } +} diff --git a/dist/webcam-easy.min.js b/dist/webcam-easy.min.js index 0ad3741..0865bf4 100644 --- a/dist/webcam-easy.min.js +++ b/dist/webcam-easy.min.js @@ -1 +1 @@ -class Webcam{constructor(e,t="user",s=null,i=null){this._webcamElement=e,this._webcamElement.width=this._webcamElement.width||640,this._webcamElement.height=this._webcamElement.height||.75*this._webcamElement.width,this._facingMode=t,this._webcamList=[],this._streamList=[],this._selectedDeviceId="",this._canvasElement=s,this._snapSoundElement=i}get facingMode(){return this._facingMode}set facingMode(e){this._facingMode=e}get webcamList(){return this._webcamList}get webcamCount(){return this._webcamList.length}get selectedDeviceId(){return this._selectedDeviceId}getVideoInputs(e){return this._webcamList=[],e.forEach(e=>{"videoinput"===e.kind&&this._webcamList.push(e)}),1==this._webcamList.length&&(this._facingMode="user"),this._webcamList}getMediaConstraints(){var e={};return""==this._selectedDeviceId?e.facingMode=this._facingMode:e.deviceId={exact:this._selectedDeviceId},{video:e,audio:!1}}selectCamera(){for(let e of this._webcamList)if("user"==this._facingMode&&e.label.toLowerCase().includes("front")||"enviroment"==this._facingMode&&e.label.toLowerCase().includes("back")){this._selectedDeviceId=e.deviceId;break}}flip(){this._facingMode="user"==this._facingMode?"enviroment":"user",this._webcamElement.style.transform="",this.selectCamera()}async start(e=!0){return new Promise((t,s)=>{this.stop(),navigator.mediaDevices.getUserMedia(this.getMediaConstraints()).then(i=>{this._streamList.push(i),this.info().then(i=>{this.selectCamera(),e?this.stream().then(e=>{t(this._facingMode)}).catch(e=>{s(e)}):t(this._selectedDeviceId)}).catch(e=>{s(e)})}).catch(e=>{s(e)})})}async info(){return new Promise((e,t)=>{navigator.mediaDevices.enumerateDevices().then(t=>{this.getVideoInputs(t),e(this._webcamList)}).catch(e=>{t(e)})})}async stream(){return new Promise((e,t)=>{navigator.mediaDevices.getUserMedia(this.getMediaConstraints()).then(t=>{this._streamList.push(t),this._webcamElement.srcObject=t,"user"==this._facingMode&&(this._webcamElement.style.transform="scale(-1,1)"),this._webcamElement.play(),e(this._facingMode)}).catch(e=>{console.log(e),t(e)})})}stop(){this._streamList.forEach(e=>{e.getTracks().forEach(e=>{e.stop()})})}snap(){if(null!=this._canvasElement){null!=this._snapSoundElement&&this._snapSoundElement.play(),this._canvasElement.height=this._webcamElement.scrollHeight,this._canvasElement.width=this._webcamElement.scrollWidth;let e=this._canvasElement.getContext("2d");return"user"==this._facingMode&&(e.translate(this._canvasElement.width,0),e.scale(-1,1)),e.clearRect(0,0,this._canvasElement.width,this._canvasElement.height),e.drawImage(this._webcamElement,0,0,this._canvasElement.width,this._canvasElement.height),this._canvasElement.toDataURL("image/png")}throw"canvas element is missing"}} \ No newline at end of file +export default class Webcam{constructor(e,t="user",s=null,i=null){this._webcamElement=e,this._webcamElement.width=this._webcamElement.width||640,this._webcamElement.height=this._webcamElement.height||.75*this._webcamElement.width,this._facingMode=t,this._webcamList=[],this._streamList=[],this._selectedDeviceId="",this._canvasElement=s,this._snapSoundElement=i}get facingMode(){return this._facingMode}set facingMode(e){this._facingMode=e}get webcamList(){return this._webcamList}get webcamCount(){return this._webcamList.length}get selectedDeviceId(){return this._selectedDeviceId}getVideoInputs(e){return this._webcamList=[],e.forEach(e=>{"videoinput"===e.kind&&this._webcamList.push(e)}),1==this._webcamList.length&&(this._facingMode="user"),this._webcamList}getMediaConstraints(){var e={};return""==this._selectedDeviceId?e.facingMode=this._facingMode:e.deviceId={exact:this._selectedDeviceId},e.height={min:1080},{video:e,audio:!1}}selectCamera(){for(var e of this._webcamList)if("user"==this._facingMode&&e.label.toLowerCase().includes("front")||"enviroment"==this._facingMode&&e.label.toLowerCase().includes("back")){this._selectedDeviceId=e.deviceId;break}}flip(){this._facingMode="user"==this._facingMode?"enviroment":"user",this._webcamElement.style.transform="",this.selectCamera()}async start(i=!0){return new Promise((t,s)=>{this.stop(),navigator.mediaDevices.getUserMedia(this.getMediaConstraints()).then(e=>{this._streamList.push(e),this.info().then(e=>{this.selectCamera(),i?this.stream().then(e=>{t(this._facingMode)}).catch(e=>{s(e)}):t(this._selectedDeviceId)}).catch(e=>{s(e)})}).catch(e=>{s(e)})})}async info(){return new Promise((t,s)=>{navigator.mediaDevices.enumerateDevices().then(e=>{this.getVideoInputs(e),t(this._webcamList)}).catch(e=>{s(e)})})}async stream(){return new Promise((s,t)=>{navigator.mediaDevices.getUserMedia(this.getMediaConstraints()).then(e=>{let t=this;this._streamList.push(e),this._webcamElement.srcObject=e,this._webcamElement.onloadedmetadata=function(){t.snapHeight=this.videoHeight,t.snapWidth=this.videoWidth},"user"==this._facingMode&&(this._webcamElement.style.transform="scale(-1,1)"),this._webcamElement.play(),s(this._facingMode)}).catch(e=>{console.log(e),t(e)})})}stop(){this._streamList.forEach(e=>{e.getTracks().forEach(e=>{e.stop()})})}snap(){if(null==this._canvasElement)throw"canvas element is missing";{null!=this._snapSoundElement&&this._snapSoundElement.play(),this._canvasElement.width=this.snapWidth||this._webcamElement.scrollWidth,this._canvasElement.height=this.snapHeight||this._webcamElement.scrollHeight;let e=this._canvasElement.getContext("2d");return"user"==this._facingMode&&(e.translate(this._canvasElement.width,0),e.scale(-1,1)),e.clearRect(0,0,this._canvasElement.width,this._canvasElement.height),e.drawImage(this._webcamElement,0,0,this._canvasElement.width,this._canvasElement.height),this._canvasElement.toDataURL("image/png")}}} diff --git a/src/webcam-easy.js b/src/webcam-easy.js index b17c5d5..1a0d381 100644 --- a/src/webcam-easy.js +++ b/src/webcam-easy.js @@ -41,7 +41,7 @@ export default class Webcam { }); if(this._webcamList.length == 1){ this._facingMode = 'user'; - } + } return this._webcamList; } @@ -53,6 +53,8 @@ export default class Webcam { } else { videoConstraints.deviceId = { exact: this._selectedDeviceId}; } + /* Try to get a media stream that takes at least 1080p pictures */ + videoConstraints.height = { min: 1080 } var constraints = { video: videoConstraints, audio: false @@ -60,7 +62,7 @@ export default class Webcam { return constraints; } - /* Select camera based on facingMode */ + /* Select camera based on facingMode */ selectCamera(){ for(let webcam of this._webcamList){ if( (this._facingMode=='user' && webcam.label.toLowerCase().includes('front')) @@ -73,21 +75,21 @@ export default class Webcam { } } - /* Change Facing mode and selected camera */ + /* Change Facing mode and selected camera */ flip(){ this._facingMode = (this._facingMode == 'user')? 'enviroment': 'user'; this._webcamElement.style.transform = ""; - this.selectCamera(); + this.selectCamera(); } /* 1. Get permission from user 2. Get all video input devices info - 3. Select camera based on facingMode + 3. Select camera based on facingMode 4. Start stream */ async start(startStream = true) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { this.stop(); navigator.mediaDevices.getUserMedia(this.getMediaConstraints()) //get permisson from user .then(stream => { @@ -106,7 +108,7 @@ export default class Webcam { }else{ resolve(this._selectedDeviceId); } - }) + }) .catch(error => { reject(error); }); @@ -117,27 +119,32 @@ export default class Webcam { }); } - /* Get all video input devices info */ + /* Get all video input devices info */ async info(){ - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { navigator.mediaDevices.enumerateDevices() .then(devices =>{ this.getVideoInputs(devices); resolve(this._webcamList); - }) + }) .catch(error => { reject(error); }); }); } - - /* Start streaming webcam to video element */ + + /* Start streaming webcam to video element */ async stream() { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { navigator.mediaDevices.getUserMedia(this.getMediaConstraints()) .then(stream => { + let self = this; this._streamList.push(stream); this._webcamElement.srcObject = stream; + this._webcamElement.onloadedmetadata = function() { + self.snapHeight = this.videoHeight; + self.snapWidth = this.videoWidth; + } if(this._facingMode == 'user'){ this._webcamElement.style.transform = "scale(-1,1)"; } @@ -151,13 +158,13 @@ export default class Webcam { }); } - /* Stop streaming webcam */ + /* Stop streaming webcam */ stop() { this._streamList.forEach(stream => { stream.getTracks().forEach(track => { track.stop(); }); - }); + }); } snap() { @@ -165,8 +172,8 @@ export default class Webcam { if(this._snapSoundElement!= null){ this._snapSoundElement.play(); } - this._canvasElement.height = this._webcamElement.scrollHeight; - this._canvasElement.width = this._webcamElement.scrollWidth; + this._canvasElement.width = this.snapWidth || this._webcamElement.scrollWidth; + this._canvasElement.height = this.snapHeight || this._webcamElement.scrollHeight; let context = this._canvasElement.getContext('2d'); if(this._facingMode == 'user'){ context.translate(this._canvasElement.width, 0); @@ -180,5 +187,5 @@ export default class Webcam { else{ throw "canvas element is missing"; } - } + } }