Capturing or rendering audio, video, and images (HTML)

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

This section contains information on how to capture photos and videos from a capture device, such as a built-in camera or connected webcam, and how to render audio streams in a Windows Runtime app using JavaScript.

For samples that use media capture in a Windows Runtime app using JavaScript, see the Media capture sample and the other samples listed in the Samples section in the Related topics below.

If you’d like to try working with media capture and other key Windows 8 features, download the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).

In this section

Topic Description

Quickstart: capturing a photo or video using the camera capture UI

This topic shows you the simplest way to capture a photo or video from your embedded or attached camera, by using the CameraCaptureUI API. This API launches a full-screen dialog that presents a camera UI, and enables you to capture a photo or video with as little as one method call.

Quickstart: Capturing video using the MediaCapture API

This topic shows you how to capture video to a file using the Windows.Media.Capture API. You can use the Windows.Media.Capture API to control the asynchronous capture operation, select an encoding profile and send the resulting video to a file.

How to preview video from a webcam

You can associate a camera with a <video> tag to preview the video.

How to record audio or video

You can record video from the camera and/or audio from the microphone.

How to rotate the video

You can rotate video captured from a camera by using the SetPreviewRotation and SetRecordRotation methods on the MediaCapture class.

How to mirror the video

Mirroring the preview image is useful for video conferencing and video chat applications. Typically the user wants to see a reflected image of themselves. The "correct" (non-mirrored) view can look strange, because we are used to seeing ourselves in a mirror.

How to add video stabilization

The VideoStabilization effect can help reduce shakiness in video, such as from a hand-held camera.

How to apply effects to captured video

Use the MediaCapture.AddEffectAsync method to apply effects to captured video.

Quickstart: Audio in a Windows Store app

This topic explains the audio streaming categories and shows how to use the <audio> tag to add audio streaming capabilities to your app.

How to configure keys for media controls

This tutorial shows you how to configure the hardware media keys on a keyboard, and then use the configured keys to control an audio-video (AV) stream by pressing or clicking play, pause, stop, and so on.

How to categorize an AV stream for audio streaming

This tutorial shows you how to select the correct category for an audio-video (AV) stream to configure it as an audio playback stream.

How to manage calls on the default Bluetooth communications device

This tutorial shows you how to configure the default Bluetooth communications device to handle calls.



Roadmap for Windows Runtime apps using JavaScript

Designing UX for apps


Media capture sample

Camera capture UI sample

Camera options UI sample

Device enumeration sample

Real-Time communication sample

Media extension sample

Hands-on labs for Windows 8






HTML5 Audio and Video

Other resources

Supported audio and video formats

Audio and video performance