HTML

Question

我正在开发一个Windows商店应用程序，它显示了相机的预览，然后（显然）允许用户拍照。

在我的下面的代码中，整个屏幕显示了相机预览的显示，然后点击一下即可拍照。我希望预览显示在一个div中，并使用一个单独的按钮来实际拍摄照片。我已经阅读了各种教程，但他们都使用全屏拍照。有什么方法可以解决我的问题吗？

我正在使用Visual Studio在Javascript中开发Windows应用商店。

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 here，但无法了解具体方法。我错过了什么吗？

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

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

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

Answer 1

好吧，当我尝试时，我有一些问题。但我终于成功了。这是怎么做的

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是一个全局数组。

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

settings.videoDeviceId = deviceList[0];

然后使用initializeAsync初始化mediaRec元素，并将其绑定到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
})

我希望它可以帮助你（我希望它仍然有用。我甚至无法尝试，我不在窗口atm）

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

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

1 个答案:

HTML

初始化媒体元素

获取相机设备