Schnellstart: Aufnehmen eines Fotos oder Videos mit der Kameraaufnahme-UI (HTML)

Artikel
02/16/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In diesem Thema wird Ihnen die einfachste Möglichkeit gezeigt, wie Sie mithilfe der CameraCaptureUI-API ein Foto oder Video über Ihre integrierte oder angeschlossene Kamera aufnehmen können. Diese API startet ein Dialogfeld mit einer Kamerabenutzeroberfläche im Vollbildmodus und ermöglicht Ihnen die Aufnahme eines Fotos oder Videos mit nur einem Methodenaufruf.

Wenn Sie stattdessen Ihre eigene Benutzeroberfläche erstellen und nicht die von der CameraCaptureUI-Klasse bereitgestellte verwenden möchten, sollten Sie MediaCapture verwenden. Weitere Informationen finden Sie unter Schnellstart: Aufzeichnen von Video mit der MediaCapture-API.

Ziel: Nehmen Sie ein Foto oder Video mit einer Webcam auf.

Voraussetzungen

Sie sollten mit JavaScript vertraut sein und Microsoft Visual Studio unter Windows 8 installiert haben.

Zeitaufwand: 20 Minuten.

Anweisungen

1. Öffnen von Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

2. Erstellen eines neuen Projekts

Wählen Sie im Dialogfeld Neues Projekt in den JavaScript-Projekttypen die Option für eine leere Anwendung aus.

3. Einfügen des JavaScript- und HTML-Codes der App

Öffnen Sie die Datei "Default.html", und kopieren Sie den folgenden HTML-Code in diese Datei (ersetzen Sie dabei den ursprünglichen Inhalt).

<!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. Deklarieren der Webcamfunktion

Verwenden Sie den Designer der Anwendungsmanifestdatei, um die Webcamfunktion hinzuzufügen. Wählen Sie die Registerkarte Funktionen und dann Webcam aus der Liste aus.

5. Erstellen der App

Klicken Sie auf Erstellen > Projektmappe erstellen, um das Projekt zu erstellen.

6. Testen der App

Wählen Sie Debuggen > Debugging starten aus, um die Projektmappe zu testen.
Klicken Sie auf die Schaltfläche Aufnehmen, um ein Bild aufzunehmen.

Zusammenfassung

Sie haben gerade ein Bild mit den Standardeinstellungen aufgenommen. Sie können auch ein anderes Format oder Seitenverhältnis angeben oder ein Video aufzeichnen.

Wenn Sie ein Foto mit einem Seitenverhältnis von 4:3 im PNG-Format aufnehmen möchten, fügen Sie diesen Code über dem Aufruf von captureFileAsync in dem Code ein, den Sie in Ihre App kopiert haben.
```
captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};
```

Freigeben über