Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to get high quality pictures. #29

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Allow to get high quality pictures. #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d01f6f
Allow to get high quality pictures.
firvida Aug 4, 2021
0a1c928
Use available screen width and height for webcam defaults
firvida Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
all:
cp src/webcam-easy.js dist/webcam-easy.js
uglifyjs --compress --mangle -- src/webcam-easy.js > dist/webcam-easy.min.js
57 changes: 35 additions & 22 deletions dist/webcam-easy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
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.width = this._webcamElement.width || screen.availWidth;
this._webcamElement.height = this._webcamElement.height || screen.availHeight;
this._facingMode = facingMode;
this._webcamList = [];
this._streamList = [];
this._selectedDeviceId = '';
this._canvasElement = canvasElement;
this._snapSoundElement = snapSoundElement;
var self = this;

window.addEventListener("resize", function() {
self._webcamElement.width = screen.availWidth;
self._webcamElement.height = screen.availHeight;
}, false);
}

get facingMode(){
Expand Down Expand Up @@ -41,7 +47,7 @@ class Webcam {
});
if(this._webcamList.length == 1){
this._facingMode = 'user';
}
}
return this._webcamList;
}

Expand All @@ -53,14 +59,16 @@ class Webcam {
} else {
videoConstraints.deviceId = { exact: this._selectedDeviceId};
}
/* Try to get a media stream that takes at least 1080p pictures */
videoConstraints.height = { min: 1080 }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

min means minimum supported resolution. So if you have smaller resolution camera you will not see it. I think here could be used ideal .

To require a capability, use the keywords min, max, or exact
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

var constraints = {
video: videoConstraints,
audio: false
};
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'))
Expand All @@ -73,21 +81,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 => {
Expand All @@ -106,7 +114,7 @@ class Webcam {
}else{
resolve(this._selectedDeviceId);
}
})
})
.catch(error => {
reject(error);
});
Expand All @@ -117,27 +125,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)";
}
Expand All @@ -151,22 +164,22 @@ class Webcam {
});
}

/* Stop streaming webcam */
/* Stop streaming webcam */
stop() {
this._streamList.forEach(stream => {
stream.getTracks().forEach(track => {
track.stop();
});
});
});
}

snap() {
if(this._canvasElement!=null){
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);
Expand All @@ -180,5 +193,5 @@ class Webcam {
else{
throw "canvas element is missing";
}
}
}
}
}
2 changes: 1 addition & 1 deletion dist/webcam-easy.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 33 additions & 20 deletions src/webcam-easy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
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 || this._webcamElement.width * (3 / 4);
this._webcamElement.width = this._webcamElement.width || screen.availWidth;
this._webcamElement.height = this._webcamElement.height || screen.availHeight;
this._facingMode = facingMode;
this._webcamList = [];
this._streamList = [];
this._selectedDeviceId = '';
this._canvasElement = canvasElement;
this._snapSoundElement = snapSoundElement;
var self = this;

window.addEventListener("resize", function() {
self._webcamElement.width = screen.availWidth;
self._webcamElement.height = screen.availHeight;
}, false);
}

get facingMode(){
Expand Down Expand Up @@ -41,7 +47,7 @@ export default class Webcam {
});
if(this._webcamList.length == 1){
this._facingMode = 'user';
}
}
return this._webcamList;
}

Expand All @@ -53,14 +59,16 @@ 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
};
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'))
Expand All @@ -73,21 +81,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 => {
Expand All @@ -106,7 +114,7 @@ export default class Webcam {
}else{
resolve(this._selectedDeviceId);
}
})
})
.catch(error => {
reject(error);
});
Expand All @@ -117,27 +125,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)";
}
Expand All @@ -151,22 +164,22 @@ export default class Webcam {
});
}

/* Stop streaming webcam */
/* Stop streaming webcam */
stop() {
this._streamList.forEach(stream => {
stream.getTracks().forEach(track => {
track.stop();
});
});
});
}

snap() {
if(this._canvasElement!=null){
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);
Expand All @@ -180,5 +193,5 @@ export default class Webcam {
else{
throw "canvas element is missing";
}
}
}
}