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.
- Öffnen Sie in Microsoft Visual Studio den Designer für das Anwendungsmanifest, indem Sie im Projektmappen-Explorer auf package.appxmanifest doppelklicken.
- Klicken Sie auf Funktionen.
- 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>