Hello,
I am using this to run a react kiosk app with ubuntu core. This runs smoothly without glitches so far. Furthermore I am trying to display few phrases in different languages. Any heads up that how I should add language fonts to this if needed?
just ship them with your snap and make sure you use a desktop launcher for your kiosk app that points the font path to them …
If you build a local kiosk app, @ogra’s suggestion is the best solution. If you use WPE as-is and just configure it to point to a web server, you may also embed web fonts for those languages. If a language is only used on specific pages, you can also specify the unicode-range in the @font-face rule to ensure the font only gets loaded if needed. I built this snap for a similar purpose, check out the web font definitions from our app as an example.
1 Like
I have been trying to bind fonts with wpe-webkit-mir-kiosk itself. What I tried was to bind using snapcraft.yaml layout section. I expected it to include fonts in my build machine to snap’s usr/share/fonts. But this attempt was unsuccessful as I cant find any fonts at wpe snap’s space. Any thoughts on this?
this is not how it works. you need to add the font packages you want it to ship as stage-packages: to a part in the snapcraft.yaml then they will end up in $SNAP/usr/share/fonts/…
Sorry for misunderstanding! Now I’m trying to include fonts to the react app itself as @tobias mentioned above. Additionally I’m facing trouble with getting an HDMI sound output from wpe-webkit-mir-kiosk. I found this thread while seeking for help. Any update on this @tobias?
I’m finishing up a snap build with the latest WPE 2.30.2, now based on the gnome-3-34 extension. I expect a load of improvements, and I have added the audio-playback interface, so WPE should spit out sound with the new version. If all goes well, there’ll be a new revision on the edge channel by the weekend. You’re very much invited to test it out 
2 Likes
After quite some time and refactoring1, I just pushed a new build of wpe-webkit-mir-kiosk with WPE 2.30.2 + accompanying libraries + cog 0.8.0. It is now available on the edge channel, but currently only for amd64 (see further down).
- Latest stable releases of libwpe, wpebackend-fdo, wpewebkit and cog
- Now based on the gnome-3-34 extension:
- vastly improved startup time (bye snapcraft-preload and desktop-helpers)
- reduced size
- … all the benefits I don’t realize yet
- Already since rev47: watcher service to restart the browser if/when the mir kiosk Wayland socket goes away, e.g. during a mir-kiosk refresh.
All interested are cordially invited to test it out, and to scrutinize the snapcraft.yaml – special invitation to @kenvandine , @ogra, @alan_g and @cjp256 , whose input has been helpful at various stages of this snap. Yeah, I know there are still lots of commented lines 
@kanishkasw I also added the audio-playback interface, didn’t test yet if it works or if additional things are required. (ping @sil who had this requirement as well)
Still on to-do is a completing ARM build: A native build on Raspi 4 with 4GB RAM aborted several times, will see if it works with 4GB of swap. Launchpad builders are no longer an option: I decided to drop the split between a content snap and the kiosk snap in favor of a consistent gnome sdk environment. This also means that snapcraft has to pull in additional sources after >> 2h of build time, which is where LP builders get their connection cut off.
I guess I’ll have to put in some more hours (days) for a dive into cross-compilation, any hints appreciated.
^1: and frustration paired with imposter syndrome
4 Likes
The armhf build went through with additional swap, but now I get a segfault at startup during Wayland initialization. I opened a separate thread for this, input very much appreciated: SIGSEGV / segmentation fault only on armhf version of wpe-webkit-mir-kiosk
This is my usecase except for the fact that I’m running a react front-end locally on the raspberry pi 3 ubuntu core. I have tried,
and
but still I’m unable to get those fonts rendered(all I get is a bunch of boxes). Though we do above mentioned, shouldn’t either the ubuntu core(/usr/share/fonts) or wpe-webkit-mir-kiosk snap’s /usr/share/fonts folder contain the font file to get it rendered? If yes, how do we put them to ubuntu core read-only file system? Apologies if I got this completely wrong since I’m bit new to ubuntu core and snaps.
Missed your post and the notification got buried, sorry. If you integrate your fonts as web fonts, they should be hosted on the same server as your React front-end – even if it’s just locally on the Pi. How do you serve the React app to WPE? Local web server, or are you opening it via file:///?
The system fonts are only checked if you specify a font within your font stack that is not available via web fonts. Possible issues (without seeing your code):
- Your
@font-facedeclaration has issues. Please check your React app in a desktop browser to see if the fonts are loaded at all, and if you load them for a specific unicode range, make sure it covers the necessary ranges. - You use font file formats that WPE doesn’t understand. Try to provide woff/woff2 files.
- The font files cannot be loaded in your production environment due to URI issues – maybe your dev/prod environments have different paths?
You can enable a remote inspector in wpe-webkit-mir-kiosk:
snap set wpe-webkit-mir-kiosk devmode=true- Point any WebKitGTK-based browser (e.g. Epiphany/GNOME Web) to
inspector://ip-of-the-device-where-wpe-is-running:8080
I’ve been playing around with this snap again. Just wanted to know if web browsing is this slow for you? I’m running this on a CM3+ module with a 7" LCD connected over DSI.
I tried changing this:
dtoverlay=vc4-fkms-v3d,cma-256
To this:
dtoverlay=vc4-kms-v3d,cma-64
But couldn’t get my system to boot after that…I’m wondering if hardware acceleration isn’t enabled or something…I’m running the latest stable armhf version of wpe-webkit-mir-kiosk.
Edit: I tested it out on various WebGL demos and 3D hardware acceleration is definitely enabled. My framerate is actually pretty good. I don’t understand why web-browsing is so slow and laggy.
When my snap refreshes (my snap hosts a web server), wpe-webkit-mir-kiosk fails to see that, so I have to manually restart wpe-webkit-mir-kiosk to see the updated version of my webpage. Is there an automated way of doing this?
Edit:
Hmm, I’ve tried using the dbus method but I can’t get it to work. In my snapcraft.yaml I have
plugs:
dbus-cogctl:
interface: dbus
bus: system
name: com.igalia.Cog
Then I added:
- dbus-cogctl
To my app’s plugs. I then connected them and can see my snap connected to the dbus wpe-webkit-mir-kiosk slot when i type “snap connections”.
I then do:
sudo snap run --shell mysnap
gdbus call --system --dest com.igalia.Cog --object-path /com/igalia/Cog --method org.gtk.Actions.Activate ‘open’ [’<“http://localhost:3005”>’] {}
…but I’m getting an AppArmor error:
Error: GDBus.Error:org.freedesktop.DBus.Error.AccessDenied: An AppArmor policy prevents this sender from sending this message to this recipient; type="method_call", sender=":1.22" (uid=0 pid=2800 comm="gdbus call --system --dest com.igalia.Cog --object" label="snap.mysnap (enforce)") interface="org.gtk.Actions" member="Activate" error name="(unset)" requested_reply="0" destination="com.igalia.Cog" (uid=0 pid=2138 comm="/snap/wpe-webkit-mir-kiosk/49/bin/cog -P fdo --bg-" label="snap.wpe-webkit-mir-kiosk.browser (enforce)")
Edit 2:
I disconnected the dbus plug/slot and reconnected it - started working after that!
I haven’t tested direct user input a lot with this snap, but things like playing a YouTube video or scrolling on a web page are running fine. There are definitely issues with animation/hardware-video decoding, but due to WPE implementation specifics. I ran this by the WPE maintainers (mostly Igalia people) and they told me that e.g. SVG animations are currently limited to software-rendering due to the Cairo backend.
Edit:
I just wrapped up a new revision of wpe-webkit-mir-kiosk for armhf, available on candidate. I had to hold off the 2.30.x release based on the gnome extension since I couldn’t resolve the segfault on armhf in time – had to return to other parts of my device stack. Rev52 drops the glib-only desktop helper in favor of @alan_g 's mir-kiosk-launch, so I can pull at least WPE 2.28.1 directly from focal repositories.
Yup, DBus is the way to go here. I had the exact same use-case/need for my device. The AppArmor error on the initial connection looks off. Did you restart WPE after connecting the snaps?
It ended up working perfectly after I disconnected the dbus slot/plug and reconnected it. No idea why it didn’t work the first time…
Awesome, thanks for putting wpe-webkit-mir-kiosk together, it’s really cool!
Reading that article about the SVG animations made my head hurt - makes you realize how much time and effort goes into these web technologies. If you want any help with wpe-webkit-mir-kiosk I could put some time into it when I’m bored. I have a raspberry pi 4 setup with an armhf ubuntu server install, so I can compile things fairly quickly and test them. I’m sure it would take me a while to be of any help though - the snapcraft.yaml looks pretty complex.
Hi Tobias and others!
Thanks for this great snap!
I’m using it on a RPI4, with Ubuntu Core 64bit, installed from the official RPI Imager (sudo apt install rpi-imager)
I had to change the config.txt (by inserting the SD card into my laptop) and added the following two lines for a fluent transition of my html slides (I’m using the materializecss slider - https://materializecss.com/fullscreen-slider-demo.html )
gpu_mem=512
hdmi_enable_4kp60=1
1 Like
@Zane470 @OeleGeirnaert and everyone else interested: I finally managed to get WPE 2.30.x running on armhf. @alan_g 's mir-kiosk-snap-launch provides just the right amount of setup needed to work without further desktop helpers or bloat. I guess something in the gnome-3-34 extension caused the segfault on armhf, but I didn’t have the time/knowledge to get to the bottom of this.
Beside the daemon service which runs cog/wpewebkit as a service like before, there’s a wpewebkit.cog on-demand application for easier testing on desktop environments – also largely courtesy of mir-kiosk-snap-launch. The snap setting debug now also sets WEBKIT_SHOW_FPS=1, so you can observe the current frame rate in the left upper corner of the screen.
2.30.5 is now available on the edge and beta channels (amd64 also on candidate). Please do provide feedback, especially regarding performance. I tested the amd64 snap on a Ubuntu 20.10 desktop machine, the armhf version on various Raspberry Pi models running Ubuntu Core with a customized core18 gadget. Videos should load and play fine now, I missed some gstreamer environment variables in the previous build.
For performance testing, I used: https://webglsamples.org/aquarium/aquarium.html
2 Likes
Hello guys!
I would like to ask for some help involving video playing. Is someone able to play videos stored locally or even remotely? Only Vimeo and youtube video work here in my setup (intel x86 with a modest J1800 processor).
I’m testing mp4 videos with h264 encode and have written very simple code with tag <video> and <picture>, but the video is not played. The screen remains blank, and I just saw the mouse cursor or player but with no indication that the video was loaded. I’ve tried a lot of sites with examples and variations of HTML code without luck.
Can someone provide information about adding this support and a piece of HTML code with a functional code with the video?
Code that I’m using:
snap set wpe-webkit-mir-kiosk url=https://aroeira.io/media/safari.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 video test </title>
</head>
<body>
<video id="video" autoplay loop muted playsinline class="video-background ">
<source src="https://aroeira.io/media/production_ID_4448888.mp4" type="video/mp4">
</video>
<script type="text/javascript">
console.log("MP4 can be played?" + video.canPlayType('video/mp4'));
</script>
</body>
</html>
Updating:
After more tests I was able to get some error from log
2021-05-24T20:51:55Z -[11246]: <https://aroeira.io/media/safari3.html> Loading...
2021-05-24T20:51:56Z -[11337]: gst_caps_get_structure: assertion 'GST_IS_CAPS (caps)' failed
2021-05-24T20:51:57Z -[11246]: Renderer process terminated, restarting (attempt 1/5).
2021-05-24T20:51:57Z -[11246]: <https://aroeira.io/media/safari3.html> Load started.
2021-05-24T20:51:57Z -[11246]: <https://aroeira.io/media/safari3.html> Loading...
2021-05-24T20:51:59Z -[11363]: gst_caps_get_structure: assertion 'GST_IS_CAPS (caps)' failed
2021-05-24T20:51:59Z -[11246]: Renderer process terminated, restarting (attempt 1/5).
2021-05-24T20:51:59Z -[11246]: <https://aroeira.io/media/safari3.html> Load started.
2021-05-24T20:51:59Z -[11246]: <https://aroeira.io/media/safari3.html> Loading...
2021-05-24T20:52:01Z -[11389]: gst_caps_get_structure: assertion 'GST_IS_CAPS (caps)' failed