捕捉相机并在div中显示预览
-
21-12-2019 - |
题
我在开发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上)
拍照,你的可能工作。我没有相同的代码,但如果你的拍照,那么为什么不。问我,如果你想看看我做了什么拍照。
不隶属于 StackOverflow