Customer Sign In

upLynk

Microsoft UWP SDK

Overview

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:

Methods
CreateFromUriAsyncAsynchronously creates a UplynkMediaSource object from the URI of the source.
IsContentTypeSupportedDetermines whether the content type of the source is supported.
Properties
AdaptiveMediaSourceGets the underlying AdaptiveMediaSource object.
AssetsGets 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.
CurrentPlaybackRayGets the char representing the upLynk ray currently being played.
MediaPlaybackItemGets the underlying MediaPlaybackItem representing the current media item being played.
MediaSourceGets the underlying MediaSource.
SegmentsGets the list of Segments in the VOD playlist. This list is populated during creation of the UplynkMediaSource object.
Events
AssetsChangedOccurs when a new asset has been added to the Assets collection. This event only fires during live playback.
AssetEnteredOccurs when the player enters an Asset boundry. This event only fires during live playback.
AssetExitedOccurs when the player exists an Asset boundry. This event only fires during live playback.
SegmentEnteredOccurs when the player enters a Segment boundry. This event only fires during VOD playback.
SegmentExitedOccurs when the player exits a Segment boundry. This event only fires during VOD playback.

Basic playback using XAML/C#

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

XAML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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("http://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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!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
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
(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("http://content.uplynk.com/52ab86c3f6c74d6abf7f162204d51609.m3u8");
            }));
        }
    };

    app.oncheckpoint = function(args) {
    };

    app.start();
}());