Câmera de captura e mostrar pré-visualização em div

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

Pergunta

Eu estou no processo de desenvolvimento de um aplicativo da windows store, que mostra uma pré-visualização da câmera e, em seguida, (obviamente) permite ao usuário tirar fotos.

No meu código a seguir, a tela inteira mostra uma visualização do camerapreview, e clique tira uma foto.Eu quero a visualização para ser mostrado em uma div e usar um botão separado para tirar a fotografia.Eu li vários tutoriais, mas todos eles usam a tela cheia para tirar fotos.Existe alguma maneira para resolver meu problema?

Eu estou usando o Visual Studio para desenvolver um aplicativo da Windows Store em 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."
            }
        });
    }

A função é chamada onload.Eu tenho que ler sobre a API-info aqui, mas não conseguia descobrir como.Eu estou faltando alguma coisa?

A minha ideia é usar a seguinte configuração:

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

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

Solução

Bem, eu tenho alguns problemas para fazer isso, quando eu tentei.Mas eu finalmente conseguiu.Veja aqui como fazer

Html

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

A câmara de pré-visualização será exibida no vídeo elemento.Lembre-se de definir o tamanho da div principal, ou você vai ver tudo

Inicializar os elementos de mídia

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

A câmara do dispositivo

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

Esta chamada depois de inicializações.Também, deviceList aqui é uma matriz global.

Uma vez que você obter a lista de dispositivos, obter 1o e adicioná-lo às configurações

settings.videoDeviceId = deviceList[0];

Em seguida, inicializar o mediaRec elemento usando initializeAsync, e vinculá-lo a 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 ajude você (e eu espero que ele ainda funciona.Eu não posso nem tentar, eu não estou na janela atm)

Para tirar a fotografia, seu trabalho.Eu não tenho o mesmo código, mas se vocês tirar fotografia, então por que não.Pergunte-me se você quiser ver o que eu fiz para tirar fotos.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top