[SOLVED] Azure Media Services Stream not displaying in Blazor App using Azure Media Player

Azure Media Services Stream not displaying in Blazor App using Azure Media Player

I have a stream that I have tested and is working. However I can get it to display in this test site for Azure Media Player (https://ampdemo.azureedge.net/azuremediaplayer.html) but I cannot get it to work on my blazor app I am building to view the stream.

So clearly I am greatly misunderstanding something.

Below is the razor page for the blazor app

@page "/FastMarketScreen"
@inject IJSRuntime JavaScript

<h3>FastMarketScreenStream</h3>

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>

@code {

}

This is the razor.js file. I tried this most recently by doing it with JavaScript but tried to do this in the HTML Tag as well with no success. However I think I am missing a step with the Blazor and JavaScript, cause that console.log("") message never shows in the console. I am actually not married to using JavaScript, this page is intended to be very simple.

console.log("Dingus");

var myOptions = {
    autoplay: true,
    controls: true,
    width: "1920",
    height: "1080",
    poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "<url here>", type: "application/vnd.ms-sstr+xml" },]);

below is my index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>FastMarketScreen</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="css/azuremediaplayer.min.css" rel="stylesheet" />
</head>

<body>
    <script src="JS/azuremediaplayer.min.js"></script>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>


</body>

</html>

any and all help is greatly appriciated.

Resources I accessed:
https://azure.microsoft.com/en-us/blog/azure-media-services-rtmp-support-and-live-encoders/
https://amp.azure.net/libs/amp/latest/docs/samples.html
https://learn.microsoft.com/en-us/azure/media-services/latest/live-event-obs-quickstart
https://learn.microsoft.com/en-us/azure/media-services/azure-media-player/azure-media-player-full-setup
https://azure.microsoft.com/en-us/blog/azure-media-services-rtmp-support-and-live-encoders/

Solution

I wasn't properly injecting the JSRuntime to execute the Razor.JS function

Once I implemented the following code, everything functioned as expected.

        [Inject]
        protected IJSRuntime jsRuntime { get;set;}

        protected override void OnAfterRender(bool firstRender)
        {
            jsRuntime.InvokeVoidAsync("load");
            base.OnAfterRender(firstRender);
        }