Есть ли представление, показывающее просмотр живой камеры внутри html (например, встроенный в div), прежде чем мы снимем изображение с использованием JavaScript? Я попробовал PhoneGap, но он полностью запускает новое приложение для камеры и полностью удаляется от моего веб-приложения html, прежде чем возвращаться к нему. Мне нужно что-то встроенное в мое приложение
Спасибо
Вы можете установить 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 больше не поддерживается и в настоящее время не работает с последней версией Кордовы.
Я сделал это для одного из моих проектов. Проверьте 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:
Это решение действительно только для передней камеры, если наше устройство имеет один. Это в основном решение "веб-камеры". Не уверен, что это сработает для вашего дела. На всякий случай, проверьте ресурсы.
Вы можете использовать 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;
Надеюсь, что это поможет.
Прямой доступ к приложению камеры с помощью javascript отсутствует. Для этого вы можете написать собственный плагин PhoneGap (Cordova).