Wyświetlanie widoku z kamery w html w Androidzie, a następnie wiązanie obrazu


Czy istnieje sposób na pokazanie podglądu na żywo z kamery wewnątrz html (np. Osadzonego w div) przed zrobieniem zdjęcia za pomocą JavaScript? Wypróbowałem PhoneGap, ale całkowicie uruchamia nową aplikację aparatu i całkowicie znika z mojej aplikacji internetowej html przed powrotem do niej. Potrzebuję czegoś wbudowanego w moją aplikację
podziękować
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz


zainstaluj wtyczkę mbppower/

https://github.com/mbppower/CordovaCameraPreview
CordovaCameraPreview (dla Androida, iOS)
w aplikacji Cordova/phonegap, która umożliwia interakcję z aparatem za pomocą kodu HTML. To naprawdę niesamowita wtyczka ...
Możesz uzyskać dostęp do takich funkcji, jak:

Rozpocznij podgląd aparatu za pomocą kodu HTML.
Przeciągnij okno podglądu.
Ustaw efekt kolorystyczny aparatu (Android i iOS), wyślij okno podglądu na tył zawartości HTML, ustaw niestandardowe położenie okna podglądu aparatu, ustaw niestandardowy rozmiar okna podglądu i zachowaj interaktywność HTML.

Możesz też


użyj wtyczki donaldp24/

https://github.com/donaldp24/CanvasCameraPlugin
CanvasCamera dla Twojej aplikacji, jeśli spełnia Twoje wymagania. Jest obsługiwany na platformach Android i iOS. Zauważyłem, że na iOS działa dobrze, ale na Androidzie nie działa.
Możesz teraz zainstalować wtyczkę CordovaCameraPreview przez Online PhoneGap. Więc bez używania CLI, możesz go bezpośrednio używać, dodając
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io"/>
w pliku config.xml i utwórz ApplicationTemplate.apk/.ipa. Aby uzyskać więcej informacji na ten temat, możesz zapytać mnie. Chętnie pomogę.
AKTUALIZACJA: 10 października 2017 r
Kiedyś działał dobrze w tym czasie, ale donaldp24/CanvasCamera nie jest już obsługiwany i obecnie nie można go zbudować z najnowszą wersją Cordova.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zrobiłem to dla jednego z moich projektów. Sprawdź navigator.getUserMedia (). Jest mnóstwo rzeczy, które możesz zrobić za pomocą kamery internetowej i przeglądarki, w tym gry AR! Oto tylko podstawowy przykład:

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);
}

Demonstracja na żywo:
Osobisty projekt
http://www.sanjeevmk.in/findit
Więcej zasobów, oto czego użyłem:
Dostęp do kamery internetowej
http://joshondesign.com/p/book ... .html

Aktualizacja

:
To rozwiązanie dotyczy tylko przedniego aparatu, jeśli nasze urządzenie go posiada. Jest to po prostu rozwiązanie typu „kamera internetowa”. Nie jestem pewien, czy to zadziała w Twoim przypadku. Sprawdź zasoby na wszelki wypadek.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz użyć
camera.getPicture
z
cordova-plugin-camera
lub
navigator.device.capture.captureVideo
z
cordova-plugin-media -capture
.
var getUserMedia = navigator.getUserMedia 
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;

Mam nadzieję że to pomoże.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Brak bezpośredniego dostępu do aplikacji aparatu za pomocą javascript. Możesz w tym celu napisać własną wtyczkę PhoneGap (Cordova).

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się