Захват камеру и показывают предварительный просмотр в Div

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

Вопрос

Я нахожусь в процессе разработки приложения для хранения 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
})
.

Я надеюсь, что это поможет вам (и я надеюсь, что это все еще работает. Я не могу даже попробовать, я не в окне банкомата)

Чтобы сделать снимок, ваша может работать.У меня нет того же кода, но если вы сфотографируете, то почему нет.Спросите меня, если вы хотите увидеть, что я сделал, чтобы сфотографироваться.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top