cef-osr-browser und vdr-plugin-htmlskin

  • Hallo,


    dies ist nur ein Proof of Concept und beinhaltet noch viele Baustellen. Einige Werte sind noch hardcodiert, die Optik ist - wohlwollend ausgedrückt - etwas rustikal und dem Classic Theme angelehnt. Der Zoom-Level ist noch nicht implementiert, aber schon vorbereitet. Und und und.... Aber leider neigt sich mein Urlaub dem Ende zu.

    Intention:

    Ich wollte wissen, ob es möglich ist, das Skin des VDR in HTML zu implementieren und auch beliebige HTML Seiten im VDR anzuzeigen und das ist mir gelungen.


    1. Versuch mit WebkitGTK+
    Experimentiert habe ich zuerst mit WebkitGtk+, hatte aber sehr viele Probleme mit dem Rendering, Javascript und eigentlich hat es nicht so richtig gut funktioniert.


    2. Versuch mit CEF (Chromium embedded framework)

    CEF ist einfach zu nutzen und gerade das Off-Screen-Rendering klappt hervorragend und dabei bin ich dann geblieben.
    Aber Vorsicht: Das CEF und damit das Plugin und der cef-osr-browser sind ein ziemliches Schwergewicht. Obwohl die komplette Installation des WebkitGTK+ auch nicht ohne ist.


    Architektur:

    Das gesamte System besteht aus 2 (oder eher aus 3) Teilen:

    • cef-osr-browser
      Dies ist die eigentliche Implementation des Offscreen-Browsers. Die Aufgabe ist nur, HTML Seiten zu rendern die Grafik per nanomsg (Unix Sockets) weiterzugeben. Der cef-osr-browser öffnet dabei in /tmp 2 Unix Sockets. Eine davon ist für die Kommandos an den cef-osr-browser zuständig. Das andere Socket liefert nur die gerenderten Grafikdaten.
    • osrclient
      Dies ist nur ein Hilfsprogramm um Kommandos an den cef-osr-browser zu senden und wurde zum Testen verwendet.
    • vdr-plugin-htmlskin
      Das eigentlich Skin-Plugin für den VDR. Die Aufgabe besteht nur darin Daten zur Anzeige zu sammeln und als json (bzw. als Javascript) an den cef-osr-browser zu senden. Ein separater Thread liest die gerenderten Seiten und stellt sie im OSD dar. Dabei habe ich versucht, möglichst wenig bzw. gar nicht selber irgendwelche Grafiken oder Images zu kopieren. Im gesamten Plugin findet sich kein memcpy oder ähnliches. Kopieraktionen finden höchstens im VDR bzw. in nanomsg statt. Erweiterte Informationen wie sie z.B. epgd liefern kann, sind noch nicht implementiert. Ich glaube, Schnittmarken dürften auch noch nicht funktionieren.

    Der bisher einzige Skin wurde mit vue.js implementiert. Als Einstiegspunkt in den Browser wird nur eine javascript Methode aufgerufen, die dann die Verwantwortung für die Seite erhält. Mit vue.js war es möglich die Komponenten sehr klein und übersichtlich zu halten. Theoretisch kann man aber auch alles andere verwenden, sofern man die Prozedur implementiert.


    Build des cef-osr-browser:

    Im github habe ich versucht, alles zu beschreiben, daher nur in Kürze.

    • git clone https://github.com/Zabrimus/cef-osr-browser.git
    • make prepare
      Dabei wird die vorkompilierte Version des CEF heruntergeladen, die Installation vorbereitet und die Library kompiliert. Das Paket ist allerding ziemlich groß.
    • make
      Im Release Unterordner finden sich dann die Executables und Softlinks auf das CEF-Installationsverzeichnis

    Build des vdr-plugin-htmlskin:

    Start:

    Der cef-osr-browser muss / sollte gestartet sein, bevor VDR gestartet wird. Das Plugin wie üblich in vdr.conf eintragen und im OSD auszusuchen.


    Probleme:

    Auf meinem Client-Hauptsystem hatte ich etwas zu kämpfen mit dem Start, deshalb in Kürze die Probleme und meine Lösungen

    • der cef-osr-browser muss Zugriff auf den X-Server haben. Also aufpassen mit welchem User man den Browser und X startet. Evt. reicht ein xhost +.
    • der cef-osr-browser legt die beiden Unix-Sockets im tmp-Verzeichnis an. Der VDR muss dann Lese- und Schreibrechte haben.

    Ein paar Screenshots:


    Ein simples Menu:



    Eigentlich ist das Kaleidoskop animiert und wird auch animiert im OSD angezeigt. Hier wurde eine externe Seite eingebunden, die in einem IFrame gerendert wurde. Das Problem mit einem IFrame ist allerdings, das man nicht mittels Javascript ran kommt. Cross-Domain Exception und dergleichen werden geworfen. Dazu muss ich noch eine Lösung finden.



    Der obligatorische HTML5 Test. Die niedrige Punktezahl hat die Ursache in den beschränkten Berechtigungen (sandbox), die ich dem IFrame gegeben habe. Normalerweise liegt der Wert weit über 500. Aus dem Gedächtnis irgendwo bei 520.



    Es gibt noch eine dritte Animation

    Code
    1. http://animateyourhtml5.appspot.com/part4-webgl/index.html

    die aber jetzt aus unerfindlichen Gründen einen Fehler innerhalb der Seite wirft. Vielleicht finde ich den Fehler noch.


    Anzumerken ist, das alle Animation sehr flüssig dargestellt werden und auch die Navigation durch die Menus keine Probleme machen.


    Getestet habe ich das mit VDR 2.4.0 und

    • AMD Phenom II X6, Nvidia GTX 1050ti, softhddevice
    • Intel Celeron CPU J3455, Onboard-GPU, softhddevice

    Selbst der kleine Celeron hat die Aufgabe gemeistert.


    Ideen für Erweiterungen gibt es genug. Z.B. schickeres VDR OSD, Videoplayer, Youtube, sonstige Mini-Html Applikationen. Mal sehen. Erstmal alles stabilisieren und die weitere Infrastruktur für z.B. die Fernbedienung schaffen, damit Tasten irgendwelche Aktionen im Browser ausführen können.


    Edit:

    Die selbstkompilierte Version des CEF (mit anschließendem strip der Libraries) mit proprietären Codecs (u.a. auch H.264) braucht entpackt nur schlanke 187 MB. Das ist schon erheblich kleiner. Der HTML 5 Test liefert 528 von 555 Punkten. Was immer die einzelnen Tests auch aussagen. Sehen kann man sie hier: http://html5test.com/s/f38577423789b59a.html



    Zabrimus

  • Hi,


    das sieht aber wirklich schon vielversprechend aus. Da sehe ich die Grundlage für ein echtes HbbTV Plugin im VDR.


    Gruß

    Atech

    HTPC:
    Softtware: Archlinux mit VDR aus Archvdr repo (1.7.31 mit softhddevice) und xbmc 12.2 Frodo stable
    Hardware: Coolermaster 260 mit Core I3 540, 4 GB Kingst. Ram, GA.H55M-D2H, PCIe 16X RiserCard, NVIDIA 430GT, TT3600USB, TT3650-CI USB, Samsung SSD 640, WD Blue 1TB (WD10TP), IR Einschalter, imon Display, mce FB und 12 Kanal Atmolight (4 Led Streifen) über DFatmo und Boblight

  • So lange irgendwas im Chromium dargestellt werden kann, sollte es auch im VDR verfügbar gemacht werden können.

    Fernbedienung bzw. Keyboard Events fehlen zwar noch, sind aber auf meiner Todo-Liste. Aber gerade das Thema Keyboard scheint irgendwie sehr speziell zu sein im Hinblick auf die Keycodes..


    Zabrimus

  • konnte man das nicht auch fuer HBBTV nutzen?

    https://github.com/karl-rousseau/HybridTvViewer

    Dafür könnte auch FireFly's 'HbbTv URL Plugin' interessant sein, um die URLs zu extrahieren.

  • Ich habe mal ein wenig geschaut. Es hat mit dem Skin erstmal nix zu tun. Aber HbbTv ist eine mögliche Anwendung.

    Der HybridTvViewer macht genau das, was mir als ersten Test vorgeschwebt hat (nur viel, viel besser): ContentType ändern, MimeType manipulieren, User-Agent ändern und dergleichen.

    Also soweit gut. Allerdings sind die Extensions im CEF noch im recht frühen Stadium und nicht vollständig verfügbar:

    https://bitbucket.org/chromium…ort-for-chrome-extensions


    Die Fragen wären:

    Welche Extensions werden explizit benötigt?

    Welcher Aufwand entsteht, wenn die fehlenden Extensions nachimplementiert werden müssten? Oder könnte man den HybridTvViewer entsprechend ändern? Alernativ wäre vielleicht eine Implementierung im CEF direkt möglich.

    Wie werden die Extensions im CEF überhaupt eingebunden.


    Das Plugin von FireFly ist mir durchgegangen, weil HbbTv mich bisher nicht sonderlich interessiert hat, aber ich sehe Potential für eine interessante Entwicklungsarbeit.


    Zabrimus