Client R8308: YouTube live stream no longer works

I used to livestream YouTube videos using the Xibo player, but it seems to no longer be compatible due to the Xibo Client’s outdated browser. I also tried whitelisting the URL to Edge in the Display profile, but it didn’t work.

An exemple*:


(a screenshot from Xibo Client R308 on a livestream from youtube using WebPage widget)
I tried to use embed ticker, or webpage ticker… none of them worked.

Note* My Edge Browser is in the latest version

Thanks

1 Like

I believe this is being caused by a lack of updated codecs in CefSharp.
@natasha or @dan, can you let me know how I can solve this issue?

Note: My Windows player is already updated with the latest everything, including codecs. The problem is indeed with the Xibo Client.

CefSharp only provides codecs which are free of copy protection, and so perhaps YouTube has switched to something which is not provided. There are all sorts of nasty licensing implications to shipping Xibo with support for other codecs.

Edge however should be able to use the codecs supplied by the operating system, so I think you should be able to use a browser tag and embedded widget to force that.

You just put the below tag at the top of your embedded widget before your YouTube html

<!-- BROWSER=edge -->

1 Like

THANK YOU @dan!!

I tried almost everything but your suggestion made it work correctly

1 Like

Too soon… it only works using the ticker HTML… but it’s a start, for now maybe i can solve my demand
But i also need that this iframe works in the webpage ticker

@pitoco02

Paulo, on one of our test device with Windows 10 is still working with youtube! Our customer/friend/testuser is just simply adding new youtube to their playlist, every morning the player gets a reboot. It is still working!!! But i am still running player windows 2 R258.1-258

HTML to Embed
<!-- BROWSER=edge-->
<div id="player">

Head content to Embed

<script>    

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist({list:'#PLAYLISTIDFROMYOUTUBE', listType: 'playlist'});
    event.target.setLoop(true);
  }
</script>
1 Like

Hi vishal
Yes, in fact the youtube videos work… I even use the same iframe model that you mentioned above. The problem is in live videos.

More specifically with the webpage and dataset widget.

@dan can you share with us how to use this feature?

Can you tell me if by configuring this, the YouTube iframe would be rendered by Edge? How can I make this configuration?
Should I include all YouTube URL formats, a specific video URL, or the YouTube domain?

Thank you.

i tested the webpage widget in this site:

https://www.whatismybrowser.com

And indeed it shows that the browser is outdated… in this case, Chromium.

This is what i get when i use the whitelist:


But it only works with one URL at a time.

I tried the same with the complete URL of the YouTube live video I’m using for testing, but no luck.

Please note that the YouTube URL was not included in the whitelist for some reason, but the test URL was included.


Are you using a Web Page widget or an Embedded widget? My recommendation would be to use the embedded widget and browser tag.

The edge browser white list is a fairly basic tool which just matches if the URL to show contains the URL in the white list. Currently there is a problem with comma separating those URLs.

We update the version of Chromium we use with each release, which is a lot more up to date than most signage devices you’ll see! Edge uses the browser installed in windows (sort of) and so is often more up to date.

1 Like

Hi @dan
Thanks for the awnser
I made a small progress in this task.

It must be just “https://www.youtube.com/” on the whitelist:

and it work the webpage twidget:

Now let me explain what I’m doing, and I also want to share it with the community.

I created a dataset layout that includes a regex where you input the URL of a YouTube video, and it automatically updates the layout. It was working great until YouTube stopped allowing embedding live streams on the Xibo Player (for whatever reason), only videos that are not live streams work.

(layout using the dataset)

With your help, I managed to get it working again using the HTML (embedded ) widget and now with the whitelist, using the Web page widget.

However, my latest need is to force the Xibo player to render my HTML from a Dataset Ticker using Edge.

All of this is to make it easier for the user to easily insert a YouTube video by simply adding the video URL to the dataset. The regex handles the URL and extracts only the video ID.

In the layout, as you can see in the image below, I compile the entire YouTube iframe JavaScript.

This way, it becomes much easier for the end user to insert videos in a super simple way in the layout.

1 Like

The bug mentioned above will also fix it so that it will match on “contains” as well, which should make it easier :crossed_fingers:

Thanks for sharing your whole approach!

1 Like

I found the solution, guys. Thanks for the help.

First of all, whitelist the following URL in Edge: https://www.youtube.com/

Create a layout with a fullscreen WebPage and insert the URL of your YouTube video or livestream using the following format: YouTube
(This URL format will play the video in fullscreen and autoplay)

If autoplay doesn’t work, add a region with a 10-second timer followed by a shell command that simulates a screen click:

powershell.exe Start-Process powershell -verb runAs 'Add-Type -TypeDefinition "using System; using System.Runtime.InteropServices; public class MouseSimulator { [DllImport('user32.dll', CharSet = CharSet.Auto, CallingConvention = CallingConvention.StdCall)] public static extern void mouse_event(uint dwFlags, uint dx, uint dy, uint cButtons, uint dwExtraInfo); public const uint MOUSEEVENTF_LEFTDOWN = 0x02; public const uint MOUSEEVENTF_LEFTUP = 0x04; public static void SimulateLeftClick() { mouse_event(MOUSEEVENTF_LEFTDOWN | MOUSEEVENTF_LEFTUP, 0, 0, 0, 0); } } [MouseSimulator]::SimulateLeftClick()"'

This is the result:

I will create a web page that standardizes the YouTube URL to the embedded format I mentioned. This way, the user will input the URL in the correct format in the CMS.

The solution using the dataset ticker was great, but I had to apply this temporary solution that also avoids the end user having to deal with JavaScript or HTML.

2 Likes

Guys, just to let you know.
I tested it on version R203, which uses IE. Even with Windows 10, it worked REALLY well.
Including using the dataset model I mentioned earlier.
Indeed, the problem for this to work correctly is CefSharp.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.