Cattura la fotocamera e mostra Anteprima in Div

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

Domanda

Sono nel processo di sviluppo di un'app di Windows Store che mostra un'anteprima della fotocamera e quindi (ovviamente) consente all'utente di scattare foto.

Nel mio codice seguente, l'intero schermo mostra una visualizzazione della CamerapReview e click scatta un'immagine.Voglio che l'anteprima sia mostrata in un div e utilizzare un pulsante separato per scattare effettivamente la foto.Ho letto vari tutorial ma tutti usano lo schermo intero per scattare foto.C'è un modo per risolvere il mio problema?

Sto usando Visual Studio per sviluppare un'app per Windows Store 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."
            }
        });
    }
.

La funzione viene chiamata onload.Ho letto l'API-Info qui , ma non riuscivo a scoprire come.Mi manca qualcosa?

La mia idea generale è quella di utilizzare la seguente configurazione: 

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

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

È stato utile?

Soluzione

Bene, ho dei problemi a farlo quando l'ho provato. Ma sono finalmente riuscito.Ecco come fare

html 

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

L'anteprima della fotocamera verrà visualizzata nell'elemento video. Ricordati di impostare le dimensioni del genitore div, o vedrai qualcosa

Inizializza Elementi multimediali 

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

Ottieni il dispositivo della fotocamera 

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

Chiama questo dopo le inizializzazioni. Inoltre, Devicelist Ecco un array globale.

Una volta ottenuto l'elenco dei dispositivi, prendi il 1 ° e aggiungilo alle impostazioni 

settings.videoDeviceId = deviceList[0];
.

Quindi inizializza l'elemento MediaRec usando Initializeasync e legarlo il 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
})
.

Spero che ti aiuti (e spero che funzioni ancora. Non posso nemmeno provarlo, non sono su Window atm)

Per scattare la foto, il tuo potrebbe funzionare.Non ho lo stesso codice, ma se il tuo prendi foto, allora perché no.Chiedimi se vuoi vedere cosa ho fatto per scattare foto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top