Getting around CORS using hls.js player in Blazor WASM

Sturla 176

Since I´m having issues using Blazorise WASM version of plyr.io video player to play AES token videos because dash.js doesn´t support AES encryption I´m trying to implement this my self using hls.js

I have this repository Where it looks like its working but now I´m getting CORS errors trying to play the video stream

Access to XMLHttpRequest at 'https://myServer-euno.streaming.media.azure.net/0b4ba27d-2e47-45c3-b764-00713ede5d25/a6c1feb9-e9b7-4003-997d-6ca720e14da1.ism/manifest(format=mpd-time-cmaf,encryption=cbc)&aes=true&aestoken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiJjMmUzN2IyYy1iNTg5LTQxNTEtYjlkYy1mNTU1NDc2MGI4NDAiLCJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6bWF4dXNlcyI6IjUiLCJuYmYiOjE2NzYzMDg0MTgsImV4cCI6MTY3NjMwOTMxOCwiaXNzIjoiaUJlaW5uaUlzc3VlciIsImF1ZCI6ImlCZWlubmlBdWRpZW5jZSJ9.oCwg5rPDna3VKiOYhP9zHyD6cSxuLweq5rQXYFeIsHc' from origin 'https://localhost:7101' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So my question is: Can I do something about this in Azure Media Service or Blazor WASM? This works "fine" if I play the stream in IFrame like this. But I´m trying to get rid doff this code using Azure Media Player so it must be doing something under the hood, correct?

 <iframe src="//aka.ms/ampembed?url=@Video.DashUrl&aes=true&token=@Video.Token&autoplay=false"
                                    id="azuremediaplayer"
                                    name="azuremediaplayer"
                                    scrolling="no"
                                    frameborder="no"
                                    align="center"
                                    height="500px"
                                    width="672px"
                                    allowfullscreen
                                    class="embed-responsive-item"></iframe>

Sturla 176 Reputation points

2023-02-16T05:06:47+00:00

Anybody? All feedback appreciated! 😉
SnehaAgrawal-MSFT 19,921 Reputation points

2023-02-16T05:11:22.4533333+00:00

Sturla Apologies for late response here! You stated that

“This works "fine" if I play the stream in IFrame like this. But I´m trying to get rid doff this code using Azure Media Player so it must be doing something under the hood, correct?”

does that mean you are not getting any issues using Azure Media Player, but are trying to replace it with another player? Or you are getting the CORS error with AMP?
Sturla 176 Reputation points

2023-02-17T10:01:31.3133333+00:00

does that mean you are not getting any issues using Azure Media Player,

Well when you say it, I realise that its not quite true. Because there is no Blazor WASM video player out there what I have done is to show the streaming user the preview stream (no AES) and done it with IFrame showing the ampdemo.azureedge.net player (aka aka.ms/ampembed)

So I´m guessing that that page/domain has CORS in the AMS, correct?

I´m just trying to get this code here (hls.js javascript player wrapped in a Blazor component ) to work. But this code (locally at least) does not play the video and just gives me the CORS error.

I hope this explains it better
Sturla 176 Reputation points

2023-02-17T10:08:37.4433333+00:00

does that mean you are not getting any issues using Azure Media Player

Yes when I use https://ampdemo.azureedge.net/ with IFrame but I´m guessing that domain has CORS set with AMS, correct?

I'm just trying to wrap the hls.js javascript video player in a Blazor component to get AES to work since the Blazorise one is using plyr.io that looks like doesn´t support playing hls AES encrypted stream.

But I´m getting this CORS error. Can you try my code out (providing your own event and token) if this CORS error isn´t supposed to be there? I couldn´t find any CORS settings for AMS in the portal.
Sturla 176 Reputation points

2023-02-17T11:59:18.6666667+00:00

Sorry for the two answers.. It looked like the first one got lost so I wrote another one and I can only edit it but not delete it so I´ll just let it stand.
SnehaAgrawal-MSFT 19,921 Reputation points

2023-02-25T05:55:19.51+00:00

Apologies for late reply here! I am having discussion with PG will update here accordingly.
Sturla 176 Reputation points

2023-02-26T11:14:16.1+00:00

Thank you. Look forward hearing from you. Hope this is just something super simple!
Sturla 176 Reputation points

2023-03-02T12:31:46.6933333+00:00

Any feedback @SnehaAgrawal-MSFT ? I would love to get something to try out.
Sturla 176 Reputation points

2023-03-03T09:10:56.69+00:00

Anything @SnehaAgrawal-MSFT I would love to have something to work with over the weekend if possible 🙏
Sturla 176 Reputation points

2023-03-11T13:21:57.5033333+00:00

It looks like I have the "Standard_Version" IU so I have created a support request in the azure portal. Lets see what they say.

1 answer

SnehaAgrawal-MSFT 19,921 Reputation points

2023-03-13T04:54:25.4533333+00:00

Sturla My sincere apologies for late response here, Unfortunately, there are limitation on CORS handling in our streaming endpoint.

Workaround for limitation on CORS responses from a streaming endpoint is to set CORS configuration from CDN side. If you are using the Azure CDN from Verizon Premium SKU you can update this via rules engine in the CDN supplemental portal.

If you are using Azure CDN from Verizon Standard SKU you will need to work with CDN support to have this updated for them.

Hope this helps.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

Getting around CORS using hls.js player in Blazor WASM

1 answer