'How can I access mobile front camera and record a video in Js?
I am making a app with: Html, Css and Javascript, and I want that app access mobile front camera and record a video off the user face, I am usin Adobe Phone Gap to convert my codes to .apk
Have similar questions in StackOverflow about this, but anyone couldn't help me, I've tried searching in Google, but I found nothing
I've tried made this:
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
but don't work
I expect, when the user click in a button, the app will open the front cam, and the user record a video of your face.
Solution 1:[1]
You can use<input type="file" accept="image/*;capture=camera">
to access the user camera from a Browser
Solution 2:[2]
The capture
attribute on file inputs (input type="file"
) can be used to activate photo (accept="image/*"
) or video (accept="video/*"
) mode on the front (capture="user"
) or rear (capture="user"
) camera.
Note:
- Test the code on mobile devices for best results. Desktop environments may show the standard file picker only.
- Supporting webcams on desktop environments can be far more tricky: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
<input type="file" id="soundFile" capture="user" accept="audio/*"><br/>
<input type="file" id="videoFile" capture="environment" accept="video/*"><br/>
<input type="file" id="imageFile" capture="user" accept="image/*">
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Brayan Garcia |
Solution 2 | OXiGEN |