Captura de cámara y muestra vista previa en div

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

Pregunta

Estoy en el proceso de desarrollar una aplicación de Windows Store que muestra una vista previa de la cámara y luego (obviamente) le permite al usuario tomar fotografías.

En mi siguiente código, toda la pantalla muestra una visualización de la cámara de cámara y, en el clic, toma una foto.Quiero que la vista previa se muestre en un div y use un botón separado para tomar la imagen.He leído varios tutoriales, pero todos usan la pantalla completa para tomar fotos.¿Hay alguna forma de resolver mi problema?

Estoy usando Visual Studio para desarrollar una aplicación de Windows Store en 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."
            }
        });
    }

La función se llama la carga.He leído en la API-INFO aquí , pero no pude descubrir cómo.¿Me estoy perdiendo algo?

Mi idea general es usar la siguiente configuración: 

<body onload="showPreview();">
    <div id="cameraPreview">

    </div>
    <div>
        <button id="capture" onclick="takePicture();">Take Picture</button>
    </div>
</body>

¿Fue útil?

Solución

Bueno, tengo algunos problemas haciendo esto cuando lo intenté. Pero finalmente sucedí.Aquí es cómo hacer

HTML 

<div style="width:100%;height:100px">
    <video id="cameraPreview"></video>
</div>

La vista previa de la cámara se mostrará en el elemento de video. Recuerde establecer el tamaño del Padre DIV, o verá cualquier cosa

Inicializar elementos de medios 

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

Obtenga el dispositivo de la cámara 

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");});
}

Llame a esto después de las iniciales. Además, el devicelista aquí es una matriz global.

Una vez que obtenga la lista de dispositivos, obtenga el 1º y agreguela a la configuración 

settings.videoDeviceId = deviceList[0];

Luego inicialice el elemento de MEDIAREC usando InitializEasync, y le enlace el 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
})

Espero que te ayude (y espero que todavía funcione. Ni siquiera puedo intentarlo, no estoy en la ventana ATM)

para tomar la foto, el tuyo podría funcionar.No tengo el mismo código, pero si el tuyo toma la foto, entonces, ¿por qué no?Pregúntame si quieres ver lo que hice para tomar fotos.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top