Guida introduttiva: Acquisizione di foto o video tramite l'interfaccia utente di acquisizione con fotocamera (HTML)

Articolo
02/12/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

In questo argomento viene mostrato il modo più semplice per acquisire una foto o un video dalla fotocamera incorporata o associata, utilizzando l'API CameraCaptureUI. Quest'API avvia una finestra di dialogo a schermo intero in cui viene presentata l'interfaccia utente di una fotocamera e che ti consente di acquisire una foto o un video semplicemente con la chiamata di un metodo.

In alternativa se desideri creare un'interfaccia utente personalizzata invece di utilizzare quella fornita dalla classe CameraCaptureUI dovrai usare MediaCapture. Per altri informazioni, vedi Guida introduttiva: Acquisizione di video con l'API MediaCapture.

Obiettivo: Acquisire una foto o un video da una webcam.

Prerequisiti

Devi avere familiarità con JavaScript e avere installato in Windows 8 Microsoft Visual Studio.

Tempo per il completamento: 20 minuti.

Istruzioni

1. Aprire Visual Studio

Apri un'istanza di Visual Studio.

2. Creare un nuovo progetto

Nella finestra di dialogo Nuovo progetto scegli un'applicazione vuota dai tipi di progetto JavaScript.

3. Inserire il codice JavaScript e HTML dell'app

Apri il file Default.html e copia al suo interno il codice HTML seguente, sostituendo il contenuto originale.

<!DOCTYPE html>
<html>
<head>   
   <title>WinWebApp1</title>
   <!-- WinJS references -->
   <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
   <script src="/winjs/js/base.js"></script>
   <script src="/winjs/js/wwaapp.js"></script>
   <!-- WinWebApp1 references -->
   <link rel="stylesheet" href="/css/default.css" />
    
   <script type = "text/javascript" >

   // Takes a photo using the default JPEG format.
   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."
         }
      });
   }
   </script>
</head>
<body>
   <input type="button" onclick="takepicture()" value="Take a Picture" /><br />
   <span id="message"></span>
</body>
</html>

4. Dichiarare la funzionalità webcam

Utilizza la finestra di progettazione del file manifesto dell'applicazione per aggiungere la funzionalità webcam. Seleziona la scheda Funzionalità, quindi seleziona Webcam dall'elenco.

5. Compilare l'app

Scegli Compila > Compila soluzione per compilare il progetto.

6. Testare l'app

Scegli Debug > Avvia debug per testare la soluzione.
Fai clic sul pulsante Scatta foto per scattare una foto.

Riepilogo

La foto viene scattata utilizzando le impostazioni predefinite. Puoi inoltre specificare un formato o una modalità formato diversa oppure registrare un video.

Per acquisire una foto con modalità formato di 4:3 nel formato PNG, inserisci questo codice sopra la chiamata per acquisire FileAsync nel codice incollato nell'app.

captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};

Argomenti correlati

Guida introduttiva: Acquisizione di video con l'API MediaCapture

Esempio di acquisizione di un file multimediale

Condividi tramite