Cattura di immagini nell'applicazione Web su tablet Windows 8.1

Question

Sto per sviluppare un'applicazione che deve essere eseguita su tablet Windows 8.1. Una caratteristica importante è poter fare clic su un pulsante per accedere alla fotocamera per scattare alcune foto. Idealmente mi piacerebbe crearlo come applicazione Web piuttosto che un'applicazione nativa a causa di una serie di motivi (licenze, multipiattaforma, tempo di sviluppo: nessuna esperienza nelle app native, ecc.).

Ho guardato le opzioni per l'acquisizione di immagini da HTML 5 e hanno trovato HTML Media Capture che mi permette di scrivere:

<input type="file" accept="image/*" capture="camera" /> 

Per ottenere l'accesso alla telecamera. Funziona perfettamente su iPad e tablet Android, ma non riesco a farlo funzionare su tablet Windows 8. Ho provato a utilizzare Chrome sul tablet Windows 8, ma ancora nessun effetto. Tutto ciò che fa è che apre una finestra di dialogo in cui posso scegliere un file da caricare. Quello che voglio fare è essere in grado di catturare una nuova immagine. Questo standard non è supportato da IE (apparentemente anche gli altri browser non possono accedere alla videocamera del dispositivo).

Mi sono anche imbattuto in Media Capture and Streams che sembra essere principalmente correlato alla visualizzazione di flussi da ad es. la web cam, ma probabilmente potrebbe essere utilizzata per catturare immagini ed è supportata da Chrome e Firefox tra gli altri browser, ma non ancora da Internet Explorer (anche IE11). Tuttavia, nessuna delle tre implementazioni dei browser sembra funzionare sul mio computer di prova di Windows 8.1. Se qualcuno ha ottenuto getUserMedia per funzionare su tablet Windows 8 in qualsiasi browser, sono interessato a sentirlo.

In ogni caso, la mia domanda principale è: c'è un modo per accedere alla fotocamera su un tablet Windows 8 utilizzando HTML5 da un'applicazione web? Gli unici esempi di lavoro che ho visto si sono basati su un'implementazione prototipo per IE che utilizza Active X o soluzioni che utilizzano il flash.

EDIT: mi piacerebbe molto preferiscono tenerlo in HTML5/JavaScript come si deve lavorare offline (utilizzando HTML5 Application Cache)

Answer 1

Così ho girato nella esattamente lo stesso problema. La mia app web è simile, tranne che devo fare qualche scansione di codici a barre con la fotocamera del tablet.

Sto usando l'HTML 5 media api come hai commentato. Per farlo funzionare in Chrome in Windows 8 Surface Pro, dovevo farlo:

Per abilitare getUserMedia in Chrome digitare 'chrome: // flags /' nella barra URL e abilitare "Abilita supporto cattura schermo in getUserMedia(). Opzione Mac, Windows, Linux, Chrome OS ".

Stava funzionando nel mio laptop ma non nel tablet, dopo aver apportato tale modifica e riavviato il chrome ha funzionato. In bocca al lupo.

Answer 2

Ecco il codice che ho usato per aggirare questa situazione ... Sembra funzionare molto bene in chrome, ma ancora nessun supporto per Internet Explorer che non è supportato da getUserMedia. Ancora una volta vorrei che questo non fosse necessario e Windows ha appena supportato la funzionalità di prendere foto come iOS e Android ma funziona per ora.

credito: http://davidwalsh.name/browser-camera

// Put event listeners into place 
    window.addEventListener("DOMContentLoaded", function() { 
    // Grab elements, create settings, etc. 
    var canvas = document.getElementById("canvas"), 
     context = canvas.getContext("2d"), 
     video = document.getElementById("video"), 
     videoObj = { "video": true }, 
     errBack = function(error) { 
      console.log("Video capture error: ", error.code); 
     }; 

    // Put video listeners into place 
    if(navigator.getUserMedia) { // Standard 
     navigator.getUserMedia(videoObj, function(stream) { 
      video.src = stream; 
      video.play(); 
     }, errBack); 
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
     navigator.webkitGetUserMedia(videoObj, function(stream){ 
      video.src = window.webkitURL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed 
     navigator.mozGetUserMedia(videoObj, function(stream){ 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
     }, errBack); 
    } 
    document.getElementById("snap").addEventListener("click", function() { 
     context.drawImage(video, 0, 0, 640, 480); 
    }); 
}, false); 

Answer 3

interfaccia getUserMedia lavora in Chrome sul mio Surface 2, dimostrano:

Ho implementato la soluzione descritta qui: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ A proposito, c'è un gruppo di lavoro esempio sul loro sito:

• getUserMedia non funziona in IE
• getUserMedia probabilmente funziona in FF, ma non ho la prova
• accesso alla telecamera dal tasto [Sfoglia] non funziona in qualsiasi browser sul mio Surface 2

EDIT: Ho appena realizzato, il mio approccio non funziona più su Surface. Stessa storia per la pagina html5rocks, l'esempio dato non funziona su Surface. Suppongo che la nuova versione di Chrome sia stata interrotta per supportare qualcosa. Ma ho trovato l'esempio che funziona su Surface per Chrome e Firefox, qui sei: http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html

Answer 4

Ho faticato moltissimo per questa soluzione, alla fine trovo una buona soluzione. Ma può essere utilizzato solo nelle app di Windows Store come la modalità chrome windows 8 (impostazioni chrome -> riavvia chrome in modalità Windows 8), quindi puoi utilizzare il normale tag di input del file in html. quando premi "scegli file", vedi l'immagine qui sotto. Quindi puoi scegliere la fotocamera per aggiungere l'immagine dalla fotocamera.

se non si può vedere fotocamera nella lista, u può installare app di seguito.

https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN