Capturer la caméra et montrer un aperçu dans DIV

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

Question

Je suis en train de développer une application Windows Store qui affiche un aperçu de la caméra puis (évidemment) permet à l'utilisateur de prendre des photos.

Dans mon code suivant, l'écran entier affiche un affichage de la cameraPReview et le clic prend une photo.Je souhaite que l'aperçu soit affiché dans un div et utilisez un bouton séparé pour prendre la photo.J'ai lu divers tutoriels mais ils utilisent tous l'écran complet pour prendre des photos.Y a-t-il un moyen de résoudre mon problème?

J'utilise Visual Studio pour développer une application 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 fonction est appelée surcharge.J'ai lu sur l'API-info ici , mais ne pouvait pas savoir comment.Est-ce que je manque quelque chose?

Mon idée générale est d'utiliser la configuration suivante: 

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

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

Était-ce utile?

La solution

Eh bien, j'ai des problèmes de faire cela quand je l'ai essayé. Mais j'ai finalement réussi.Voici comment faire

HTML 

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

L'aperçu de la caméra sera affiché dans l'élément vidéo. N'oubliez pas de définir la taille du parent div, ou vous verrez quelque chose

Initialiser les éléments de support 

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

Obtenez le périphérique de la caméra 

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

Appelez cela après les initialisations. En outre, Devicelist Voici un tableau global.

Une fois la liste des périphériques, obtenez le 1er 1 et l'ajoutez aux paramètres 

settings.videoDeviceId = deviceList[0];

Initialise ensuite l'élément MediAREC à l'aide d'initialiseasync et liez-le de la 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
})

J'espère que cela vous aide (et j'espère que cela fonctionne toujours. Je ne peux même pas l'essayer, je ne suis pas sur la fenêtre ATM)

Prendre la photo, vous pourriez travailler.Je n'ai pas le même code, mais si le vôtre prend la photo, alors pourquoi pas.Demandez-moi si vous voulez voir ce que j'ai fait pour prendre des photos.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top