Microsoft Universal Windows Platform

This guide is provided to assist an integrator with the use of the Uplynk Microsoft UWP SDK. The Uplynk Microsoft UWP SDK is a wrapper around the Windows.Media.Streaming.Adaptive.AdaptiveMediaSource class. It provides HLS and DASH playback support on all Windows 10 devices including the Xbox One. It is implemented as a Windows Runtime component and can be used with both C# and JavaScript apps.

Downloads

The SDK is released as a NuGet package. You can find the latest SDK package here. Sample applications can be found on our github repo.

Uplynk.MediaSource.UplynkMediaSource

The Uplynk.MediaSource.UplynkMediaSource class provides playback support for HLS and DASH content for your app.

Uplynk.MediaSource.UplynkMediaSource API:

Method	Description
CreateFromUriAsync	Asynchronously creates a UplynkMediaSource object from the URI of the source.
IsContentTypeSupported	Determines whether the content type of the source is supported.

Property	Description
AdaptiveMediaSource	Gets the underlying AdaptiveMediaSource object.
Assets	Gets the list of Assets in the playlist. This list is populated during creation of the UplynkMediaSource object. For live playback, the Assets list can be added to when a new Asset is encountered when refreshing the playlist.
CurrentPlaybackRay	Gets the char representing the Uplynk ray currently being played.
MediaPlaybackItem	Gets the underlying MediaPlaybackItem representing the current media item being played.
MediaSource	Gets the underlying MediaSource.
Segments	Gets the list of Segments in the VOD playlist. This list is populated during creation of the UplynkMediaSource object.

Event	Description
AssetsChanged	Occurs when a new asset has been added to the Assets collection. This event only fires during live playback.
AssetEntered	Occurs when the player enters an Asset boundary. This event only fires during live playback.
AssetExited	Occurs when the player exists an Asset boundary. This event only fires during live playback.
SegmentEntered	Occurs when the player enters a Segment boundary. This event only fires during VOD playback.
SegmentExited	Occurs when the player exits a Segment boundary. This event only fires during VOD playback.

Basic Playback using XAML/C#

Basic playback using MediaElement and the Uplynk.MediaSource.UplynkMediaSource class.

XAML:

<Page
    x:Class="Sample.Player"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <MediaElement x:Name="mediaElementPlayer"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      AreTransportControlsEnabled="True"
                      AutoPlay="True" />
    </Grid>
</Page>

C# code:

using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Uplynk.MediaSource;

namespace Sample
{
    public partial class Player
    {
        private UplynkMediaSource uplynkMediaSource;
    
        public Player()
        {
            InitializeComponent();

            InitializeUplynkMediaSourceAsync(new Uri("https://content.uplynk.com/52ab86c3f6c74d6abf7f162204d51609.m3u8"));
        }

        private async void InitializeUplynkMediaSourceAsync(Uri uri)
        {
            UplynkMediaSourceCreationResult result = await UplynkMediaSource.CreateFromUriAsync(uri);

            if (result.Status == UplynkMediaSourceCreationStatus.Success)
            {
                uplynkMediaSource = result.UplynkMediaSource;
                mediaElementPlayer.SetPlaybackSource(uplynkMediaSource.MediaPlaybackItem);
            }
        }
    }
}

Basic Playback using HTML/JS

Basic playback using html video element and the Uplynk.MediaSource.UplynkMediaSource class from JavaScript.

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sample Player</title>
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/main.js"></script>
</head>
<body class="win-type-body">
    <div>
        <video id="video_player" controls width="640" height="480" autoplay></video>
    </div>
</body>
</html>

main.js:

(function () {
    'use strict';

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var url = null;
    var uplynk = Uplynk.MediaSource;
    var mediaSource = null;
    var mediaPlaybackItem = null;
    var uplynkMediaSource = null;

    function onAssetEntered(event) {

        console.log("now playing: " + event.asset.description);
    }

    function getTimeString(milliseconds) {

        var time = new Date(milliseconds);
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();

        if (minutes < 10) {
            minutes = "0" + minutes;
        }

        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        return minutes + ":" + seconds;
    }

    function onSegmentEntered(event) {

        var segment = event.segment;

        var start = getTimeString(segment.startTime);
        var end = getTimeString(segment.endTime);

        console.log(segment.asset.description + ": " + start + " -> " + end);
    }

    function attachMediaSource() {

        if (mediaPlaybackItem != null) {
            var vid = document.getElementById("video_player");

            var playlist = new Windows.Media.Playback.MediaPlaybackList();
            playlist.items.append(mediaPlaybackItem);

            vid.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
        }
    }

    function onMediaSourceCreated(result) {

        if (result.status === Uplynk.MediaSource.UplynkMediaSourceCreationStatus.success) {

            mediaSource = result.uplynkMediaSource.mediaSource;
            mediaPlaybackItem = result.uplynkMediaSource.mediaPlaybackItem;
            uplynkMediaSource = result.uplynkMediaSource;
            uplynkMediaSource.addEventListener("assetentered", onAssetEntered, false);
            uplynkMediaSource.addEventListener("segmententered", onSegmentEntered, false);

            attachMediaSource();
        }
    }

    function loadMediaSourceFromUri(urlString) {

        var vid = document.getElementById("video_player");

        url = new Windows.Foundation.Uri(urlString);

        mediaSource = null;
        mediaPlaybackItem = null;
        uplynkMediaSource = null;

        vid.removeAttribute("src");

        uplynk.UplynkMediaSource.createFromUriAsync(url).done(
			function completed(result) {
			    onMediaSourceCreated(result);
			});
    }

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {
            args.setPromise(WinJS.UI.processAll().then(function () {
                loadMediaSourceFromUri("https://content.uplynk.com/52ab86c3f6c74d6abf7f162204d51609.m3u8");
            }));
        }
    };

    app.oncheckpoint = function(args) {
    };

    app.start();
}());