search

gsavio / player-shoutcast-html5

Responsive HMTL5 Web Player for SHOUTCast and Icecast streamings with cover art and lyrics
https://guilhermesavio.dev/player-shoutcast-html5/
MIT License
92 stars 59 forks source link

New code blocked by Cross-Origin Read Blocking (CORB) #15

Closed juanamm closed 4 years ago

juanamm commented 4 years ago

I have cloned the project again, I have configured my shoutcast v2 radio and now it does not play anything. The new error refers to CORB.

From what I read in the link shown in the chrome console: https://www.chromestatus.com/feature/5629709824032768 Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page. CORB reduces the risk of leaking sensitive data by keeping it further from cross-origin web pages. In most browsers, it keeps such data out of untrusted script execution contexts. In browsers with Site Isolation, it can keep such data out of untrusted renderer processes entirely, helping even against side channel attacks like Spectre.

andreas5232 commented 4 years ago

I don't know if this issue can be easily fixed with code, since CORS/CORB is a security feature of the browser. In my setup the webradio player and the streaming server are running on the same domain, so that this is not an issue. If you have control over your server you could setup a revese-proxy to make the foreign streaming URL available on your domain and circumvent the error.

juanamm commented 4 years ago

I don't know if this issue can be easily fixed with code, since CORS/CORB is a security feature of the browser. In my setup the webradio player and the streaming server are running on the same domain, so that this is not an issue. If you have control over your server you could setup a revese-proxy to make the foreign streaming URL available on your domain and circumvent the error.

I have no control over hosting server. But still this is accomplished with JSONP. Here I share an example for you to try with a shoutcast v2 server where player and streaming use different domains.

Change your_streaming_URL and your_port and you will see the results in the web console:

<!DOCTYPE html>

<html lang="es-ES">

<head>

<meta charset="utf-8">

<title></title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

<script>

$.ajax({

    url : "https://your_streaming_URL:your_port/stats?sid=1&json=1",

    dataType: 'JSONP',

    type : "GET",

    success:function(data){

        console.log(data);

    }

});

</script>

</body>

</html>

A player that only works on the same server where the streaming is would be very limited and little used. Today, most users hire third-party streaming services.

I am using another player that works, but sincerely I liked this project, I hope they do not abandon it and can make it work. Regards

gsavio commented 4 years ago

Hi @juanamm,

I realized that the api file on your server never returns data. Is cURL active on your server?

Try to clone the project on your machine, set up a local server and see if, in this way, some data will be returned.

It is not necessary for the player and streaming to be in the same domain. As it is today, only the api.php file needs to be in the same domain as the player, but if you want to separate them, just make the following change on line 205 of the api.php file:

$urlHost = 'your player url';

Thus, your api file accepts requests from the domain where your player is located.

Hope this helps.

juanamm commented 4 years ago

Hi @gsavio,

I have just verified the information about the modules installed on the player server which uses PHP 7.4.7 and cURL is activated.

curl

The issue is CORB that blocking streaming does not allow data transfer.

juanamm commented 4 years ago

More data: In addition to CORB (in the case of my streaming) there are problems to obtain the metadata in those streams that can be played without being blocked by CORB.

Look at this example: https://fabiotech.github.io/radio/

The song is playable, this streaming is not blocked by CORB, but metadata is not fetched. https://noplayer.fabiosakamoto.com/api.php?url=https://stm6-ssl.painelcast.com:6934&streamtype=shoutcast&historic=true&next=true

failed

gsavio commented 4 years ago

Testing using this url, because here I can say that it is updated.

And to make sure your project is up to date, download the player here.

juanamm commented 4 years ago

I can't play the songs either, but this is another problem that gives me only with your player.

The ip/host streaming:port leads me to the shoutcast panel (as it happens to most, which does not use another panel like centovacast, etc).

If you open this streaming in the browser you will see what I have told you before. At https://host_streaming.com:port It transforms in https://host_streaming.com:port /index.html?sid=1

I have looked at the mozilla firefox error console and it says: The HTTP "Content-Type" of "text/html" is not supported. Loading media resource https://host_streaming.com:port/ failed.

The media cannot be played. There are no decoders for the requested formats: text/html

And in Microsoft Edge console it gives CORB crash error.

The truth is I have given up, I have already tried everything and nothing works.

====================================== EDIT

In the end I did not want to give up and tried many things.

It only has one detail in the animation that is not working well (it is in a continuous loop..) I share a video (GIF) for you to see.

juanamm commented 4 years ago

@gsavio, I have already fixed metadata and the sound, with this CORB is solved too.

What I did was create a separate variable for the sound! :)

In config.js I have added the following in var settings: 'url_streaming2': 'https://streaming.com:8080/stream', and then: const URL_STREAMING2 = settings.url_streaming2;

And in script.js I have replaced var audio with the new constant. var audio = new Audio(URL_STREAMING2);

Now you would have to help me with the theme of cover art animations that are animating every 1 second and not every song change. See here.

I will continue working to see if I find a solution, but if you can see it you who know much more than me about this please.

After the animation is fixed we can close this issue. :)

EDIT:

I found the error, I have corrected it with my little knowledge of javascript, maybe you will do better. In line 374 of the script.js an uppercase text (currentSongElement.innerText) was being compared with a lowercase text (song.trim()) for that reason the covert art and historic was continually being refreshed and slipped every 1 second.

if (currentSongElement.innerText !== song.trim()) {

After that I had trouble replacing the characters "&amp;" in song.trim() and "&AMP;" in currentSongElement.innerText I had to make another modification. Replace element currentSongElement.innerText with decodedString and song.trim() with currentSong.trim()

In summary:

                       // Uppercase the song
            currentSong = currentSong.toUpperCase();

            // Formating songs characters to UTF-8
            var encodedStr = String(currentSongElement.innerText);
            var parser = new DOMParser;
            var dom = parser.parseFromString(
            '<!doctype html><body>' + encodedStr,
            'text/html');
            var decodedString = dom.body.textContent;

                        if (decodedString !== currentSong.trim()) {

I hope you can shorten all that, I did it to trial and error, but it worked for me.

best regard

DirtySkeMe commented 3 years ago

first i gat to thanks juanamm for all the edit he done i gat mine finally working if i could get the full script updated be better maybe of my multifixed one since the download isn't here