Capture camera and show preview in div

StackOverflow https://stackoverflow.com//questions/24011375

Question

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>
Was it helpful?

Solution

Well, i have some problems doing this when i tried it. But i finally succeded. Here's how to do

Html

<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

Initialize media elements

// 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();

 Get the camera device

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top