Отображение вида камеры внутри html в андроиде, а затем привязка изображения

Есть ли представление, показывающее просмотр живой камеры внутри html (например, встроенный в div), прежде чем мы снимем изображение с использованием JavaScript? Я попробовал PhoneGap, но он полностью запускает новое приложение для камеры и полностью удаляется от моего веб-приложения html, прежде чем возвращаться к нему. Мне нужно что-то встроенное в мое приложение

Спасибо

Ответы

Ответ 1

Вы можете установить mbppower/CordovaCameraPreview плагин (для android, ios) в приложении Cordova/phonegap, которое позволяет взаимодействовать с камерой из HTML-кода. Действительно потрясающий плагин. Вы можете получить доступ к таким функциям, как:

Начать предварительный просмотр камеры из HTML-кода. Перетащите окно предварительного просмотра. Установите цветной эффект камеры (Android и iOS), отправьте окно предварительного просмотра в конец содержимого HTML, установите пользовательскую позицию для окна предварительного просмотра камеры, установите собственный размер для окна предварительного просмотра и поддерживайте интерактивность HTML.

Или вы также можете использовать donaldp24/CanvasCamera плагин для вашего приложения, если оно соответствует вашим требованиям. поддерживается на платформах android и iOS. Я заметил, что для iOS он работает нормально, но в андроиде он не работает.

Теперь вы можете установить плагин CordovaCameraPreview через Online PhoneGap. Таким образом, без использования CLI вы можете напрямую использовать его, добавив

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

в файле config.xml и создайте ApplicationTemplate.apk/.ipa. Для получения дополнительной информации об этом вы можете спросить меня. Рад был помочь.

ОБНОВЛЕНИЕ: 10 октября 2017 г. Он хорошо работал в течение этого времени, но donaldp24/CanvasCamera больше не поддерживается и в настоящее время не работает с последней версией Кордовы.

Ответ 2

Я сделал это для одного из моих проектов. Проверьте navigator.getUserMedia(). Есть тонна вещей, которые вы можете делать со своей веб-камерой и браузером, включая игры AR! Вот только базовый пример:

HTML:

    <html>
    <head>
    </head>

    <body>
       <form><input type='button' id='snapshot' value="snapshot"/></form> 
       <video autoplay></video>
       <canvas id='canvas' width='100' height='100'></canvas> 
       <script type="text/javascript" src="findit.js"></script>
    </body>

    </html>

findit.js

    var onFailSoHard = function(e)
    {
            console.log('failed',e);
    }

    window.URL = window.URL || window.webkitURL ;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    var video = document.querySelector('video');

    if(navigator.getUserMedia)
    {
        navigator.getUserMedia({video: true},function(stream) {
        video.src = window.URL.createObjectURL(stream);
        },onFailSoHard);
    }

    document.getElementById('snapshot').onclick = function() { 
        var canvas = document.getElementById('canvas'); 
        var ctx = canvas.getContext('2d'); 
        ctx.drawImage(video,0,0); 
    }

Live Demo:

Персональный проект

Дополнительные ресурсы, это то, что я использовал:

Доступ к веб-камерам

Update:

Это решение действительно только для передней камеры, если наше устройство имеет один. Это в основном решение "веб-камеры". Не уверен, что это сработает для вашего дела. На всякий случай, проверьте ресурсы.

Ответ 3

Вы можете использовать camera.getPicture от cordova-plugin-camera или navigator.device.capture.captureVideo от cordova-plugin-media-capture.

var getUserMedia = navigator.getUserMedia 
        || navigator.webkitGetUserMedia 
        || navigator.mozGetUserMedia 
        || navigator.msGetUserMedia 
        || navigator.device.capture.captureVideo 
        || navigator.camera 
        || camera.getPicture;

Надеюсь, что это поможет.

Ответ 4

Прямой доступ к приложению камеры с помощью javascript отсутствует. Для этого вы можете написать собственный плагин PhoneGap (Cordova).