MediaHub sample app

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:

Shows the MediaHub app's home page

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.

     

    For more info on the SystemMediaTransportControls see How to use 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:

  1. Open the sample's project in Microsoft Visual Studio 2013.
  2. 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.
  3. The app's main page is divided into a Play section and a Create section.

  4. 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.

    Shows the Play section of the MediaHub sample

  5. 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.

    Shows the Play section of the MediaHub sample

    Here is one of the Create features: the Sound Recorder.

    Shows the sound recorder section of the MediaHub sample

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
Adding multimedia
Capturing or rendering audio, video, and images
Designing UX for apps
Roadmap for apps using C# and Visual Basic
Roadmap for apps using C++
Roadmap for apps using JavaScript
Samples
MediaHub sample app
HTML media playback sample
Transcoding media sample
Media extension sample
Real-Time communication sample
Media capture sample
Camera capture UI sample
Camera options UI sample
Device enumeration sample
EffectsDiscovery sample
SystemMediaTransportControls sample
Tasks
Quickstart: capturing a photo or video using the camera dialog
Quickstart: capturing video using the MediaCapture API
Reference
CameraCaptureUI
AddEffectAsync
ClearEffectsAsync
MediaCapture
MediaCaptureSettings
MediaEncodingProfile
StartRecordToStorageFileAsync
Windows.Media.Capture
SystemMediaTransportControls

 

 

Show:
© 2014 Microsoft. All rights reserved.