【问题标题】：Capture camera and show preview in div捕获相机并在 div 中显示预览
【发布时间】：2014-07-23 13:33:40
【问题描述】：

我正在开发一个 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>

【问题讨论】：

标签： javascript camera windows-phone windows-store

【解决方案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
})

我希望它可以帮助你（我希望它仍然有效。我什至无法尝试，我不在窗口自动取款机上）

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

【讨论】：

我无法获得预览。运行应用程序时，加载似乎会发生很长一段时间。然后加载停止，没有任何反应。
希望这会奏效！提前感谢您的帮助。
我忘了给你正确的 html 代码。它应该包含一个视频元素。（见我的回答）
我确实试过了，没用。或许是我对js的解读。我要把它放在一个初始化函数中吗？
您应该了解如何使用 winJS ui 元素。就个人而言，我有一个定义我的 html 页面的 winjs ui 元素。加载后，我会在其上创建一个新的相机对象，然后调用 showCameraPreview() 函数。但为了让它更简单，只需制作一个按钮来调用您的 showPreview() 函数，以确保页面正确加载。这样做，它有什么作用？任何输出？有什么错误吗？