I am making mobile app which will show live image of back camera on canvas. I already tried too many cordova plugin but in all of that system app get opened to take picture or video.
Is there any plugin or coding way so I can see live on canvas from back or front camera.
Thanks.
HTML code
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
JS code
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
document.getElementById("snap")
.addEventListener("click", function() {
setInterval(function(){
context.drawImage(video, 0, 0, 640, 480);
},1);
});
notice that a browser supporting the api getUserMedia does not mean it can call all cameras on your phone,it is only able to call the front camera probably.
Related
After stop working with camera I still see permission icon for the camera in chrome browser. I cannot reload page after turn of the camera and I should stay on this page.
var _video = document.getElementById('video');
var _mediaStream = null;
navigator.mediaDevices
.getUserMedia({audio: false, video: true}).then(function (stream) {
_mediaStream = stream;
_video.src = window.URL.createObjectURL(stream);
_video.play();
});
document.getElementById('stopCamera').addEventListener('click', function () {
_video.pause();
_video.src = '';
_mediaStream.getVideoTracks().forEach(function (track) {
track.stop();
});
_mediaStream.getAudioTracks().forEach(function (track) {
track.stop();
});
_mediaStream = null;
_video.parentNode.removeChild(_video);
});
<button id="stopCamera">Stop Camera</button>
<video id="video" width="640" height="480" autoplay></video>
I followed this guide to utilise the getUserMedia API.
https://davidwalsh.name/browser-camera
The API works when I open it up in Brackets Live Preview mode but not when I open it in its directory.
There is a prompt to request for permissions to access my webcam in Live Preview but not when I open the file.
In the above tutorial that I followed, it mentions that I need https protocol for it to work, is that the reason why? If so, how do I go along fixing this issue?
Here is a code snippet.
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
My problem is : I just want to detect the webcam to know if I show the button "take a picture with your webcam" but i don't want to film the user if he doesn't click on this button. ( And I don't want to show the button if the webcam isn't available)
I succeed to get webcam stream but i have to use navigator.getUserMedia to know if the webcam is available and i have to use the same function to get the stream of the webcam so the user will be asked 2 times if he wants to share his webcam.
This is my code for detecting webcam :
errBack = function (error) {
//We hide photo button if video is not supported
document.getElementById("OpenWebcam").style.visibility = 'hidden';
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
// video.src = stream;
// video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
// video.src = window.webkitURL.createObjectURL(stream);
// video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Firefox-prefixed
// navigator.mozGetUserMedia(videoObj, function (stream) {
// video.src = window.URL.createObjectURL(stream);
// video.play();
}, errBack);
}
I use the same code to get the stream from the webcam (I just uncomment the line video.src and video.play)
The best for me is that i detect that there is a webcam (but i don't ask permission to the user) so i show the button and when the user clicks on the button the navigator ask him if he wants to share his webcam.
Do you know if the is a way of doing this?
I created a simple HTML form and inside of it user should be able to take picture of himself using his device web cam. I used this piece of HTML in my form:
<div class="form-group">
<div id="camera">
<div class="center clear">
<video id="video" class="picCapture" autoplay=""></video>
<button id="snap" type="button" class="btn btn-default" onclick="return false;">Take Picture</button>
<canvas id="canvas" class="picCapture"></canvas>
</div>
</div>
</div>
and this JS (catch-pic.js) :
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
---28--- navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
In my local machine every thing worked. i could see the output of the webcam in my form, and was able to save pictures. but now i uploaded the app to the server and i cant get the stream from the webcam to show up.
I checked in the console and i get this two printed out:
getUserMedia() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
catch-pic.js:28 Video capture error: undefined
i marked line 28 in catch-pic.js. I couldn't really understand how come this one is working only in my machine and not in others...any idea? thx
i find same this your code:
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
and running this link
howdy ~ tryin' to whip out a MEJS based video player with user switchable vids.
problem i'm havin is when i call setSrc(), both the flash and the html5 player preloads the entire video before it starts playing the new vid, regardless of what the preload tag indicates. ideally the video begins playing as data is downloading.
/* code and comments trimmed for your viewing pleasure */
<video src="myvideo1.mp4" width="800" height="450" preload="none" smoothing autoplay></video>
<script>
var player = new MediaElementPlayer('video', {
enablePluginDebug: true,
plugins: ['flash','silverlight'],
defaultVideoWidth: 800, defaultVideoHeight: 450,
videoWidth: -1, videoHeight: -1,
loop: false,
features: ['playpause','progress','current','duration','fullscreen'],
success: function (mediaElement, domObject) {
mediaElement.play();
},
error: function () {
alert('error!');
}
});
var currentVid = 1;
var vidnames = new Array("(null)",
"myvideo1.mp4",
"myvideo2.mp4",
"myvideo3.mp4");
function switchvid (vidnum) {
currentVid = vidnum;
player.pause();
player.setSrc( vidnames[vidnum] );
player.play();
return false;
}
</script>
<IMG SRC="ch01x.png">
<IMG SRC="ch02x.png">
<IMG SRC="ch03x.png">
tried preload="none", preload, preload="auto" all with the same results... player just appears to hang while filling the buffer with the entire download, then begins to play.
apparently, the load() function handles this. not clear on load()'s relationship to the PRELOAD attributes (if any), but for me it is working now.
var player = new MediaElementPlayer('video', {
// etc
success: function (mediaElement, domObject) {
mediaElement.load();
mediaElement.play();
}
}
function switchvid (vidnum) {
currentVid = vidnum;
player.pause();
player.setSrc( vidnames[vidnum] );
player.load();
player.play();
return false;
}