I know it’s been a while since this thread was last seen, but I have been doing some experiments with Wayne Golding’s amazing SnapShot Widget.
I’m happy to share the way I have put it to work both in Google Chrome (actually Comodo Dragon) and Microsoft Edge.
I just needed to change the contents of the Constant “Code” on the widget to:
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
} else {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// List cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var audioSource = null;
var videoSource = null;
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
videoSource = device.id;
} else if (device.kind === 'audioinput'){
audioSource = device.id;
}
});
sourceSelected(audioSource, videoSource);
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
}
function sourceSelected(audioSource, videoSource) {
var constraints = {
video: {
optional: [{sourceId: videoSource}]
}
}
// Put video listeners into place
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
})
.catch(function(err) {
/* handle the error */
});
/*
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(constraints, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(constraints, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(constraints, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} */
}
Other than that, I just put the Snapshot Widget into the project along with a simple webpage. In the webpage there is an instence of the SnapshotWidget, an ImageWell and a button.
A sample project can be found here:
https://drive.google.com/file/d/1SzEtGhzzN1–z1oA_W8cmaMtCObRMjwf/view?usp=sharing
Only thing missing is a safer way to turn the webcam off.
Thanks a lot, Wayne!