Захват камеру и показывают предварительный просмотр в Div
-
21-12-2019 - |
Вопрос
Я нахожусь в процессе разработки приложения для хранения Windows, который показывает предварительный просмотр камеры, а затем (очевидно) позволяет пользователю делать снимки.
В моем следующем коде весь экран отображается отображение камераPReview, а щелкните на клик.Я хочу, чтобы предварительный просмотр был показан в Div и используйте отдельную кнопку, чтобы на самом деле сделать изображение.Я прочитал различные учебники, но все они используют полный экран для фотографирования.Есть ли способ решить мою проблему?
Я использую Visual Studio для разработки приложения для хранения Windows в 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."
}
});
}
.
Функция называется 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>
.
Предварительный просмотр камеры будет отображаться в видеоэлементе. Не забудьте установить размер Parent 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];
.
Затем инициализируйте элемент Mediarec, используя INANIVENISEASYNC и связывайте его 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
})
.
Я надеюсь, что это поможет вам (и я надеюсь, что это все еще работает. Я не могу даже попробовать, я не в окне банкомата)
Чтобы сделать снимок, ваша может работать.У меня нет того же кода, но если вы сфотографируете, то почему нет.Спросите меня, если вы хотите увидеть, что я сделал, чтобы сфотографироваться.