So wird's gemacht: Anzeigen einer Videovorschau von einer Webcam
Language: HTML | XAML

So wird’s gemacht: Anzeigen einer Videovorschau von einer Kamera (HTML)

[ 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 ]

Sie können einem "<video>"-Tag eine Kamera zuordnen, um eine Vorschau des Videos anzuzeigen.

Hinweis  In diesem Thema wird beschrieben, wie Sie die Kamera programmgesteuert dem HTML5-Videosteuerelement zuordnen. CameraCaptureUI ("Kameraauswahl") wird nicht beschrieben. Dieses Thema bezieht sich außerdem speziell auf Windows-Runtime-Apps mit JavaScript. Für Windows-Runtime-Apps mit C++, C# oder Visual Basic wird eine andere API verwendet.
 

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Informationen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Anweisungen

Schritt 1: Legen Sie die Gerätefunktion im App-Manifest fest.

Um den Webcamzugriff zu ermöglichen, sollten die Apps zuerst das entsprechende DeviceCapability-Element im App-Manifest enthalten.

  1. Öffnen Sie in Microsoft Visual Studio den Designer für das Anwendungsmanifest, indem Sie im Projektmappen-Explorer auf package.appxmanifest doppelklicken.
  2. Klicken Sie auf Funktionen.
  3. Aktivieren Sie das Feld für Webcam.

Schritt 2: Fügen Sie den Code hinzu

Das video-Tag kann für die Vorschau des Webcamvideos verwendet werden.


<script type="text/javascript">
   function init(){
      var mediarec = new Windows.Media.MediaRecorder();
      var opInitializeRecorder = mediarec.initializeAsync(null);
      opInitializeRecorder.start();
   }

   function preview(){  
      var myVideo = document.getElementById("videoTag1");
      myVideo.src = URL.createObjectURL(mediarec);
      myVideo.play();
   }
</script>


Verwandte Themen

Beispiel für Medienerfassungen

 

 

Anzeigen:
© 2018 Microsoft