Support Smoothstream video format

[sturlath]

Hi hi

I'm trying to stream (this time none-DRM) content that gives me an 404 error that I´m guessing is because of the format (probably Smoothstream) I´m trying to play (its a preview URL from Azure Media Services (maybe @johndeu can confirm).

If that is the case then I´m guessing nobody can use the video player to play unprotected videos using that format.

I see that hls.js seems to support it .

Here below are some debugging information that I prepared before I (think) figured out the formatting issue. I´ll keep it here if its something else.

I´m able to play the video with IFrame (code below) but not using Blazorise Video as you can see here

The video plays in https://ampdemo.azureedge.net/

also in https://openidconnectweb.azurewebsites.net/AMTestPlayer

I tried Dash and None

<Video Source="@Event.PreviewUrl"
StreamingLibrary="StreamingLibrary.Dash"/>

<Video Source="@Event.PreviewUrl"
StreamingLibrary="StreamingLibrary.None"/>

This IFrame code works fine (I´m trying to eliminate this code)

  <div class="embed-responsive embed-responsive-16by9">
      <iframe src="//aka.ms/ampembed?url=@Event.PreviewUrl"
      @ref="azuremediaplayer"
      id="azuremediaplayer"
      name="azuremediaplayer"
      scrolling="no"
      frameborder="no"
      align="center"
      height="280px"
      width="500px"
      autoplay
      allowfullscreen
      class="embed-responsive-item"></iframe>
  </div>

My manifest

<?xml version="1.0" encoding="UTF-8"?><SmoothStreamingMedia IsLive="TRUE" MajorVersion="2" MinorVersion="2" DVRWindowLength="270000000" Duration="0" TimeScale="10000000" LookAheadFragmentCount="2">
<StreamIndex Chunks="0" Type="video" Url="QualityLevels({bitrate})/Fragments(video={start time})" QualityLevels="6" Language="und" Subtype="" Name="video" TimeScale="90000"><QualityLevel Index="0" Bitrate="3500000" FourCC="H264" MaxWidth="1280" MaxHeight="720" CodecPrivateData="000000016764001FACD9405005BB016A02020280000003008000001E078C18CB0000000168EBED4940" />
<QualityLevel Index="1" Bitrate="2200000" FourCC="H264" MaxWidth="960" MaxHeight="540" CodecPrivateData="000000016764001FACD940F0117EF016A0202028000003000800000301E078C18CB00000000168EBED4940" />
<QualityLevel Index="2" Bitrate="1350000" FourCC="H264" MaxWidth="704" MaxHeight="396" CodecPrivateData="000000016764001EACD940B033FBC05A808080A0000003002000000781E2C5B2C00000000168EBED4940" />
<QualityLevel Index="3" Bitrate="850000" FourCC="H264" MaxWidth="512" MaxHeight="288" CodecPrivateData="0000000167640015ACD9408025B016A0202028000003000800000301E078B16CB00000000168EBED4940" />
<QualityLevel Index="4" Bitrate="550000" FourCC="H264" MaxWidth="384" MaxHeight="216" CodecPrivateData="0000000167640015ACD94181DF97016A02020280000003008000001E078B16CB0000000168EBED4940" />
<QualityLevel Index="5" Bitrate="200000" FourCC="H264" MaxWidth="340" MaxHeight="192" CodecPrivateData="000000016764000DACD941619E7FFF010000FF6A02020280000003008000001E078A14CB0000000168EBED4940" /></StreamIndex>
<StreamIndex Chunks="0" Type="audio" Url="QualityLevels({bitrate})/Fragments(audio_und={start time})" QualityLevels="1" Language="und" Subtype="" Name="audio_und" TimeScale="48000"><QualityLevel AudioTag="255" Index="0" BitsPerSample="16" Bitrate="128000" FourCC="AACL" CodecPrivateData="119056E500" Channels="2" PacketSize="4" SamplingRate="48000" /></StreamIndex>
<StreamIndex Chunks="0" Type="text" ParentStreamIndex="video" Url="QualityLevels({bitrate})/Fragments(amssignal={start time})" ManifestOutput="TRUE" QualityLevels="1" Subtype="ADI3" Name="amssignal" TimeScale="10000000">
<QualityLevel Index="0" Bitrate="0" FourCC="DATA" CodecPrivateData="" /></StreamIndex>
<StreamIndex Chunks="0" Type="text" ParentStreamIndex="video" Url="QualityLevels({bitrate},{CustomAttributes})/Fragments(scte35={start time})" ManifestOutput="TRUE" QualityLevels="1" Subtype="DATA" Name="scte35" TimeScale="1000">
<QualityLevel Index="0" Bitrate="1" FourCC="" CodecPrivateData=""><CustomAttributes><Attribute Name="Scheme" Value="urn:scte:scte35:2013a:bin" /></CustomAttributes></QualityLevel></StreamIndex>
<StreamIndex Chunks="0" Type="text" ParentStreamIndex="video" Url="QualityLevels({bitrate})/Fragments(simplesignal={start time})" ManifestOutput="TRUE" QualityLevels="1" Subtype="ADI3" Name="simplesignal" TimeScale="1000">
<QualityLevel Index="0" Bitrate="1" FourCC="" CodecPrivateData="" /></StreamIndex></SmoothStreamingMedia>

[johndeu]

First off. I know nothing about Blazor... nor intend to learn more right now.

If you are hosting a commonly used player framework like HLS.js, DASH.js, Video.js, you have to put the correct format string on the URL. The default URL manifest that comes back from a Live event preview URL is going to be Smooth Streaming format. /manifest

To get HLS, you have to add /manifest(format=m3u8-cmaf) to get an HLS playlist. Some players require you to add the .m3u8 extension to that as well.

To get DASH, you have to add /manifest(format=mpd-time-cmaf) to get an actual DASH MPD manifest. Some players require you to add a .mpd extension to that.

[sturlath]

Thank you @johndeu for the information. I gave it a try but was unable to get the player to work. As you can see on the image below I can get the IFrame to play with the preview url but all the permutations I could think of for the Blazorise Video player didn´t work.

<Field ColumnSize="ColumnSize.Is12.OnDesktop">
    <FieldLabel></FieldLabel>
    <Field>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="//aka.ms/ampembed?url=@NewStreamEvent.PreviewUrl&autoplay=false"
            @ref="azuremediaplayer"
            id="azuremediaplayer"
            name="azuremediaplayer"
            scrolling="no"
            frameborder="no"
            align="center"
            height="280px"
            width="500px"
            autoplay
            allowfullscreen
            class="embed-responsive-item"></iframe>
        </div>

    </Field>
    <FieldHelp></FieldHelp>
</Field>

<Video Source="@NewStreamEvent.PreviewUrlDash"
StreamingLibrary="StreamingLibrary.Dash" />

<Video Source="@NewStreamEvent.PreviewUrlHls"
StreamingLibrary="StreamingLibrary.Hls" />

<Video Source="@NewStreamEvent.PreviewUrlDash"
StreamingLibrary="StreamingLibrary.None" />

<Video Source="@NewStreamEvent.PreviewUrlHls"
StreamingLibrary="StreamingLibrary.None" />

all black and not streaming...

with this code adding your manifest information to the end.

NewStreamEvent.PreviewUrl = mediaServiceData.PreviewEndpointUrl;
NewStreamEvent.PreviewUrlDash = $"{mediaServiceData.PreviewEndpointUrl}/manifest(format=mpd-time-cmaf)";
NewStreamEvent.PreviewUrlHls = $"{mediaServiceData.PreviewEndpointUrl}//manifest(format=m3u8-cmaf)";

I guess I´ll have to stick with the IFrame "solution" for now...😞

[stsrki]

To be honest I didn't hear about MSS until now. So I cannot know for sure if we would be able to support it. Based on this https://stackoverflow.com/questions/48165413/is-dash-js-player-support-hls-http-live-streaming-and-mss-microsoft-smooth-st I think we at least could try.

[sturlath]

It would be great to get rid of the IFrame stuff. Let me know how I can help (urls to stream, testing etc.) and I´m ready!