I am in the process of developing a windows store app which shows a preview of the camera and then (obviously) allows the user to take pictures.
In my following code, the entire screen shows a display of the camerapreview, and on-click takes a picture. I want the preview to be shown in a div and use a seperate button to actually take the picture. I have read various tutorials but they all use the full screen to take pictures. Is there any way to solve my problem?
I am using Visual Studio to develop a Windows Store app in Javascript.
function takepicture() {
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
if (capturedItem) {
document.getElementById("message").innerHTML = "User captured a photo."
}
else {
document.getElementById("message").innerHTML = "User didn't capture a photo."
}
});
}
The function gets called onload. I have read up on the API-info here, but could not find out how. Am I missing something?
My general idea is to use the following setup:
<body onload="showPreview();">
<div id="cameraPreview">
</div>
<div>
<button id="capture" onclick="takePicture();">Take Picture</button>
</div>
</body>
Well, i have some problems doing this when i tried it. But i finally succeded. Here's how to do
<div style="width:100%;height:100px">
<video id="cameraPreview"></video>
</div>
The camera preview will be displayed in the video element. Remember to set the size of the parent div, or you will see anything
// div is the dom element that will contain the camera preview
// div should be a video element
var mediaRec = new Windows.Media.Capture.MediaCapture();
var div = document.getElementById("cameraPreview");
var settings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
var deviceList = [];
function enumerateCameras() {
var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
// Add the devices to deviceList
if (devices.length > 0) {
for (var i = 0; i < devices.length; i++) {
deviceList.push(devices[i]);
}
} else {
console.log("No devices found");
}
}, function () { console.log("error");});
}
Call this after initializations. Also, deviceList here is a global array.
Once you get the devices list, get the 1st one and add it to the settings
settings.videoDeviceId = deviceList[0];
Then initialize the mediaRec element using initializeAsync, and bind it the the div.
mediaRec.initializeAsync().then(function () {
div.src = URL.createObjectURL(mediaRec); // Set the div data source. Most important part
div.play(); // read the source and display it
})
I hope it helps you (and i hope it still works. I can't even try it, i'm not on window atm)
To take the picture, yours might work. I don't have the same code, but if yours take picture, then why not. Ask me if you want to see what i done to take pictures.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments