捕捉相机并在div中显示预览

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

题

我在开发Windows商店应用程序的过程中，该应用程序显示相机的预览，然后（显然）允许用户拍照。

在我的以下代码中，整个屏幕显示了Camerapreview的显示，然后单击拍摄图片。我希望预览显示在div中并使用单独的按钮实际拍摄。我已经阅读了各种教程，但他们都使用全屏拍照。有没有办法解决我的问题？

我正在使用Visual Studio在JavaScript中开发Windows Store应用程序。

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

函数称为onload。我已经在API-info
，但无法了解如何。我错过了什么？

我的一般想法是使用以下设置：

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

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

有帮助吗？

解决方案

嗯，我试过时，我有一些问题这样做。 但我终于成功了。这是如何做的

html 

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

相机预览将显示在视频元素中。 请记住设置父DIV的大小，或者您将看到任何

初始化媒体元素

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

获取相机设备

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

在初始化后调用此。 此外，DeviceList这里是一个全局数组。

获取设备列表后，获取第1个并将其添加到设置

settings.videoDeviceId = deviceList[0];
. 然后使用initializeasync初始化mediarec元素，并将其绑定。

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

我希望它能帮助你（我希望它仍然有效。我甚至无法尝试，我不是在窗口atm上）

拍照，你的可能工作。我没有相同的代码，但如果你的拍照，那么为什么不。问我，如果你想看看我做了什么拍照。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top