MediaHub sample
The MediaHub sample app is a rich multimedia app for Windows 8.1. It plays, records, and converts audio, video, and images and it streams media to Play To devices.
This app demonstrate how to use the HTML audio, video, and img API in a Windows Store app using JavaScript. As well as how to use many of the API in the following namespaces:
- Windows.Media
- Windows.Media.Capture
- Windows.Media.Transcoding
- Windows.Media.MediaProperties
- Windows.Media.PlayTo
.png)
Key features
The MediaHub sample app demonstrate the following media features and API.
Camera Capture UI
The CameraCaptureUI displays a full window UI for capturing photos and videos. It has controls for switching between taking photos and videos, a timer for taking time-delayed photos, and for adjusting camera settings such as the audio device, the video resolution, the brightness, and contrast.
For more info on using the CameraCaptureUI see Quickstart: capturing a photo or video using the camera capture UI and Guidelines for the camera UI.
Audio recording
Captures audio recordings using the MediaCapture class.
For more info on recording audio in a Windows Store app using JavaScript see How to record audio or video.
Converting media
Converts audio and video files to different media formats using the Transcoder.
For more info on using the Transcoder see Quickstart: transcoding video files.
Plays local video and audio and view picture images.
Uses the audio and video objects to play audio and video files and view pictures stored on the local machine or Microsoft OneDrive .
For more info on playing video in a Windows Store app see Quickstart: playing video in an app.
Plays video and audio from the network
Demonstrates how to play audio and video media from the internet using a web URL.
Video Stabilization
Demonstrates how to add the built-in videoStabilization effect to video.
System media transport controls
Demonstrators how hook into the new SystemMediaTransportControls for Windows 8.1, which replace the MediaControl class. These are the transport controls that are displayed when a hardware media key is pressed, such as the volume button on a pair of headphones.
SystemMediaTransportControls enable an app to use the system media transport controls provided by Windows for controlling media playback as well as updating media info that is displayed by the controls.
| API | Description |
| SystemMediaTransportControls | Enables apps to integrate with the system media transport controls. |
| ButtonPressed | Occurs when a button is pressed on the SystemMediaTransportControls. |
| SystemMediaTransportControlsDisplayUpdater | Used to update the media metadata and images that are displayed by the system media transport controls. |
Background Audio
Demonstrates how to implement background audio. Normally when a Windows Store app that is playing audio goes to the background, the app will automatically be muted. But many music apps want to continue to play audio when they are in the background, so the user can continue to listen to the music while they use other apps.
For more info on playing audio in the background see How to play audio in the background.
3D Video
Demonstrates how to render 3-D video. This requires support from the hardware and the media. The following API are used to determine if 3D playback is supported and set the 3D render mode.
| API | Description |
| msIsStereo3D | Gets a value that indicates whether the system considers the video source that is loaded to be stereo 3-D. |
| DisplayProperties.stereoEnabled | In Windows.Graphics.Display Gets a value that indicates whether the device supports stereoscopic 3D. |
| msStereo3DRenderMode | Gets or sets whether the system display is set to stereo display, if the display is stereo-capable. |
PlayTo Manager
Demonstrates how to implement Play To using the PlayToManager class and how to invoke the charm programmatically using the PlayToManager.ShowPlayToUI.
You can use Play To to enable users to easily stream audio, video, or images from their computer to devices in their home network. For example, a user who is watching a video in your application can stream that video to their TV for everyone in the room to view.
For more info on setting up Play To see Streaming media to devices using Play To.
Using the app
To use the sample:
Open the sample's project in Microsoft Visual Studio 2013.
To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.
The app's main page is divided into a Play section and a Create section.
In the Play you can playback audio, video, and images. As well stream to a Play To enabled device. The Videos, Pictures, and Music buttons allow you to access the media libraries on your device. The Media Servers button let's you access the Play To devices on your network.
.png)
In the Create section you can record audio, capture video from a webcam, and convert and trim media files. The Sound recorder button let's you record audio. The Convert media let's you convert and trim media from one format to another format. And the Webcam capture button let's you capture video and audio from a camera attached to the device.
.png)
Here is one of the Create features: the Sound Recorder.
.png)
Code snippets from app
Here are some code examples from the sample that highlight some of the features.
Camera Capture UI
Look in capture.js for the CameraCaptureUI code.
// Simple function to get video or pictures from a webcam
var getWebcamMediaAsync = function () {
var captureUI = capture.CameraCaptureUI();
var destination = null;
var file;
// Invoke the camera capture UI
return captureUI.captureFileAsync(capture.CameraCaptureUIMode.photoOrVideo).then(function (result) {
// If no file was captured fail the operation with a "cancel" reason
file = result;
if (!file) {
return WinJS.Promise.wrapError("cancel");
} else if (file.contentType.indexOf("image") === 0) {
// If a picture was aquired get the image properties of the file and save the result in Pictures
destination = storage.KnownFolders.picturesLibrary;
return file.properties.getImagePropertiesAsync();
} else {
// Otherwise get the video properties and save them in the videos library
destination = storage.KnownFolders.videosLibrary;
return file.properties.getVideoPropertiesAsync();
}
}).then(function (properties) {
// Save properties on the new file
var date = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month day year hour minute second").format(new Date());
properties.title = (file.contentType.indexOf("image") === 0) ? "Image capture" : "Video capture";
if (properties.subtitle !== undefined) {
properties.subtitle = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month day year hour minute second").format(new Date());
}
return properties.savePropertiesAsync();
}).then(function () {
// Move it to the proper location
return file.moveAsync(destination, "WIN_" + dateTimeFileName() + file.fileType, storage.NameCollisionOption.generateUniqueName);
}).then(function () {
// And finish the operation
return WinJS.Promise.wrap({ file: file, folder: destination });
});
};
Trancoding
Look in transcode.js for the Transcoder code.
startTranscodeAsync: function (file, container, profile) {
var that = this;
// Verify this operation can be performed in the current state
if (that.state !== states.audioSource && that.state !== states.videoSource) {
return WinJS.Promise.wrapError("Invalid operation in the current state");
}
// Create the media transcoder object
var transcoder = new transcoding.MediaTranscoder();
that.state = states.unavailable;
that.destinationFileName = file.name;
// Prepare the transcode operation using the appropiate profile
return transcoder.prepareFileTranscodeAsync(
that._source,
file,
mediaProperties.MediaEncodingProfile["create" + container](
mediaProperties[(that._source.contentType.indexOf("video") === 0) ?
"VideoEncodingQuality" : "AudioEncodingQuality"][profile])
).then(function (operation) {
// Fail the operation if transcoding is not possible
if (!operation.canTranscode) {
that._clean();
if (operation.failureReason === transcoding.TranscodeFailureReason.codecNotFound) {
return WinJS.Promise.wrapError("The codec was not found.");
} else if (operation.failureReason === transcoding.TranscodeFailureReason.invalidProfile) {
return WinJS.Promise.wrapError("Profile is invalid.");
} else {
return WinJS.Promise.wrapError("Reason unknown.");
}
}
// Change the state and keep a reference to the operation
that._operation = operation;
that.state = states.transcoding;
// Start transcoding
operation.transcodeAsync().done(function () {
// When finished clean the internal variables and state
Windows.UI.Popups.MessageDialog(that.destinationFileName + " was saved successfully", "Convert media").showAsync();
that._clean();
},
function (error) {
// In case the error also clean the internal variables and state
Windows.UI.Popups.MessageDialog(error, "Convert media error").showAsync();
that._clean();
},
function (progress) {
// Update the operation progress
that.progress = progress;
});
return operation;
});
}
Audio recoding
Look in soundrecorder.js for the MediaCapture audio recording code.
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/soundrecorder/soundrecorder.html", {
processed: function (element, options) {
this.soundRecorder = new Application.Capture.SoundRecorder();
element.querySelector(".controls .record").onclick = this.toggleRecording;
element.querySelector(".controls .play").onclick = this.togglePlayback;
element.querySelector(".controls .save").onclick = this.save;
// Bind the UI to the recorder and initialize the device
return WinJS.Binding.processAll(element, this.soundRecorder);
},
ready: function (element, options) {
this.soundRecorder.initialize(element.querySelector(".controls audio"));
},
// Start or stop recording
toggleRecording: function () {
if (Application.navigator.pageControl.soundRecorder.state === Application.Capture.SoundRecorderStates.recording) {
Application.navigator.pageControl.soundRecorder.stop();
} else {
Application.navigator.pageControl.soundRecorder.start();
}
},
// Toggle playback of the captured audio
togglePlayback: function () {
if (Application.navigator.pageControl.soundRecorder.state === Application.Capture.SoundRecorderStates.playing) {
Application.navigator.pageControl.soundRecorder.pause();
} else {
Application.navigator.pageControl.soundRecorder.play();
}
},
// Save the captured audio
save: function () {
Application.navigator.pageControl.soundRecorder.saveAsync().done(function () {
(new Application.Data.Folder({ folder: Windows.Storage.KnownFolders.musicLibrary })).invoke();
});
},
// Dispose the sound recorder when unloading
unload: function () {
this.soundRecorder.dispose();
},
soundRecorder: null
});
})();
Additional Info
Capabilities
The MediaHub sample app specifies a number of different capabilities. An app is required to set capabilities if it requires certain resources or access. For example, the MediaHub app needs access to the webcam and microphone on the user's device, so it specifies the Microphone and Webcam capability.
For more info see App capability declarations.
Related topics
Roadmaps
Capturing or rendering audio, video, and images
Roadmap for Windows Runtime apps using C# or Visual Basic
Roadmap for Windows Runtime apps using C++
Roadmap for Windows Runtime apps using JavaScript
Samples
Real-Time communication sample
SystemMediaTransportControls sample
Tasks
Quickstart: capturing a photo or video using the camera dialog
Quickstart: capturing video using the MediaCapture API
Reference
Windows.Media.Capture