# Fullscreen webkit browser with HW accelerated CSS, WebGL, and HTML5 video on the RaspberryPi 3 **URL:** \ **Category:** Project help\ **Tags:** raspberrypi3, javascript, browser, signage, hardware-accelerated\ **Created:** [April 6, 2017, 12:25am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741 "2017-04-06T00:25:34Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![petrosagg](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/petrosagg/32/84_2.png) [@petrosagg](https://forums.balena.io/u/petrosagg)\ **Post date:** [April 6, 2017, 12:25am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/1 "2017-04-06T00:25:34Z")
Hey guys! I created a project that allows you to run a fullscreen Webkit browser on your RaspberryPi. It can do GPU accelerated HD video decoding, WebGL and CSS. This is made possible by the amazing work of [Web Platform for Embedded](https://www.igalia.com/wpe/) ### Here are some cool facts about it: - The docker image is tiny since it’s built with Yocto. It’s **less than 80MB** or 35MB compressed! - It renders directly to the framebuffer, without running on X11 or Wayland - I’ve added support for the PiTFT screen so that you can display things there and use the touchscreen > **[balenalabs/balena-wpe](https://github.com/balenalabs/balena-wpe)** > > Fullscreen WebKit browser with hardware accelerated CSS, WebGL, and HTML5 video for the RaspberryPi 3. - balenalabs/balena-wpe ### Here are some cool things you can do with it: - Rendering WebGL [abstract shapes](https://mrdoob.neocities.org/023/) ![](https://global.discourse-cdn.com/balena/original/1X/5b74f7f8c990d857ad217db44bd9f1fe4645b226.gif) - Playing [HTML5 flappy bird](http://hyspace.io/flappy/) ![](https://global.discourse-cdn.com/balena/original/1X/38631347e5aa1845172421763359d531e3df6414.gif) - Playing HD video with [YoutubeTV](https://youtube.com/tv) ![](https://global.discourse-cdn.com/balena/original/1X/d2d4903a68e82f0b43113cc324267ef2cb87d49b.gif) Let me know what you think 🙂 ---
**Author:** ![bgauthie](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/bgauthie/32/471_2.png) [@bgauthie](https://forums.balena.io/u/bgauthie)\ **Post date:** [June 25, 2017, 3:15pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/2 "2017-06-25T15:15:06Z")
Hi Petros, I tried this yesterday. The outcomes are really impressive. My company is working on a cloud-based digital signage solution and we need high GPU performances to run HD videos on a web browser. It was impossible on a RB Pi with Raspbian. It seems to work really good with this project on an horizontal display. But, we tried on a vertical displays and the performances are significantly low regarding to the horizontal mode. After some search, I found out that the RB Pi needs more GPU in vertical mode. Do you think you still can improve performance on the vertical mode ? Best, Benjamin. ---
**Author:** ![petrosagg](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/petrosagg/32/84_2.png) [@petrosagg](https://forums.balena.io/u/petrosagg)\ **Post date:** [June 30, 2017, 5:44am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/3 "2017-06-30T05:44:11Z")
Hi @bgauthie. What mechanism did you use to rotate the screen? It sounds weird that it would need more GPU memory. ---
**Author:** ![Michael](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/michael/32/521_2.png) [@Michael](https://forums.balena.io/u/Michael)\ **Post date:** [August 16, 2017, 6:23am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/4 "2017-08-16T06:23:37Z")
@petrosagg Sounds great, but for me `ENV WPE_URL="file:///var/lib/public_html/index.html"` doesn’t render html, instead it literally shows the `index.html`'s code. Here are the steps to reproduce: ```auto git clone https://github.com/resin-io-playground/resin-wpe cd resin-wpe mkdir public_html wget https://github.com/h5bp/html5-boilerplate/releases/download/5.3.0/html5-boilerplate_v5.3.0.zip unzip html5-boilerplate_v5.3.0.zip -d public_html rm html5-boilerplate_v5.3.0.zip ``` then add ```auto COPY public_html /var/lib/public_html ENV WPE_URL="file:///var/lib/public_html/index.html" ``` to `Dockerfile` before `CMD` and push to resin. ![IMG_1261](https://global.discourse-cdn.com/balena/original/1X/73463556ca454305ad0eaead2e7444aeb9c66bc9.JPG) ---
**Author:** ![fellowgeek](https://avatars.discourse-cdn.com/v4/letter/f/4da419/32.png) [@fellowgeek](https://forums.balena.io/u/fellowgeek)\ **Post date:** [December 23, 2017, 1:01am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/5 "2017-12-23T01:01:04Z")
Hi, thanks for the awesome work, is there a way to run this on a raspberry pi 3 without the [resin.io](http://resin.io)? ---
**Author:** ![petrosagg](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/petrosagg/32/84_2.png) [@petrosagg](https://forums.balena.io/u/petrosagg)\ **Post date:** [January 7, 2018, 6:15pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/6 "2018-01-07T18:15:03Z")
@fellowgeek I think it should run fine if you run the docker image on a pi with the appropriate privileges and the correct config.txt. Have you tried and hit some issue? ---
**Author:** ![dsk2070](https://avatars.discourse-cdn.com/v4/letter/d/6f9a4e/32.png) [@dsk2070](https://forums.balena.io/u/dsk2070)\ **Post date:** [January 17, 2018, 4:32pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/7 "2018-01-17T16:32:56Z")
Hi Petros, I tried this on my RPi3 and it seems awesome! Now I’d like to display WebGL on an addressable LED array but am a little lost on grabbing video data from the framebuffer. One way to get the image headlessly is to use Xvfb like [texttop](https://github.com/tombh/texttop) does, and I think it could also work using [fbdump](http://freshmeat.sourceforge.net/projects/fbdump). So far I’ve tried installing them in the dockerfile and in > /resin-wpe/base-image/meta-resin-wpe/recipes-core/images/resin-wpe-image.bb Is installing extra software possible on this minimal container? ---
**Author:** ![petrosagg](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/petrosagg/32/84_2.png) [@petrosagg](https://forums.balena.io/u/petrosagg)\ **Post date:** [January 24, 2018, 5:39am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/8 "2018-01-24T05:39:55Z")
Hey @dsk2070🙂 WebGL on an addressable LED array sounds awesome, please post pictures when you’re done! It is possible to install extra software on the wpe container but it’s a bit cumbersome. Basically you have to create a Yocto recipe, drop it in the base-image folder (check this [fbcp recipe](https://github.com/resin-io-projects/resin-wpe/blob/master/base-image/meta-resin-wpe/recipes-graphics/fbcp/fbcp_git.bb) I made as a guide) and then include it in the [list of installed packages](https://github.com/resin-io-projects/resin-wpe/blob/master/base-image/meta-resin-wpe/recipes-core/images/resin-wpe-image.bb#L6). Alternatively you can try statically compiling your program, committing to git, and `COPY`ing it in your Dockerfile. That’s a lot messier but saves you the lengthy yocto build. As a side note, it might be worth checking out or even modifying fbcp to output the framebuffer to your LED array. It sounds like it does a very similar function to what you want and you have the yocto recipe ready. ---
**Author:** ![MiluchOK](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@MiluchOK](https://forums.balena.io/u/MiluchOK)\ **Post date:** [February 4, 2018, 5:31am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/9 "2018-02-04T05:31:12Z")
I am trying to run install python and completely lost with all the Yocto stuff. Is there a way to make the WPE browser work on something like alpine? Not that hardcore, but small enough. ---
**Author:** ![dsk2070](https://avatars.discourse-cdn.com/v4/letter/d/6f9a4e/32.png) [@dsk2070](https://forums.balena.io/u/dsk2070)\ **Post date:** [February 15, 2018, 6:58pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/10 "2018-02-15T18:58:44Z")
Thanks for your reply a few weeks ago @petrosagg I’ll be sure to share photos of my LED stuff here when it’s done! With resin-wpe I looked into installing extra software but didn’t get far - Yocto feels almost like a different operating system compared to regular Linux 😮 @MiluchOK if your question is still open then maybe try this: [https://www.npmjs.com/package/wpe-webgl](https://www.npmjs.com/package/wpe-webgl) I haven’t tested it yet but it looks like a WPE WebGL viewer that could work on a RPi running Debian? Not really sure ---
**Author:** ![vincentphan](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/vincentphan/32/915_2.png) [@vincentphan](https://forums.balena.io/u/vincentphan)\ **Post date:** [May 14, 2018, 5:22am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/11 "2018-05-14T05:22:01Z")
Hi @petrosagg, It’s awesome, the performance is really good. I can play HD videos smoothly. But I face a challenge that I want to capture a screenshot of the display. I tried to convert raw file from `/dev/fb0` but only see the black screen. I also search it but seem no luck with WPE run on top. So how can I take a screenshot of the display screen while WPE is running? Thanks, ---
**Author:** ![satheesh](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@satheesh](https://forums.balena.io/u/satheesh)\ **Post date:** [May 18, 2018, 4:21pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/12 "2018-05-18T16:21:44Z")
@petrosagg I am also looking to run it in rasberry pi 3 without resin. I tried running it, but initially it failed saying missing vchiq. So while starting docker I added the device as follows: docker run --rm --device=/dev/vchiq --name pi resin. Here resin, is the name of the image build. The WPELancher seems to run fine, but nothing is showing up in the display. I have set hdmi\_group=1 and hdmi\_mode=4, gpu\_mem\_256=128 and gpu\_mem\_512=196 in the config.txt file. Can you please tell me what might be that I am doing wrong? ---
**Author:** ![satheesh](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@satheesh](https://forums.balena.io/u/satheesh)\ **Post date:** [May 20, 2018, 5:07pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/13 "2018-05-20T17:07:11Z")
Where you able to run without resin? ---
**Author:** ![gil0109](https://avatars.discourse-cdn.com/v4/letter/g/4bbf92/32.png) [@gil0109](https://forums.balena.io/u/gil0109)\ **Post date:** [May 24, 2018, 2:59am UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/14 "2018-05-24T02:59:59Z")
Very nice. 1. Do you have to rebuild to get patches to webkit? Or is there an easier way to patch? 2. Can you make this read-only as well? I have a raspbian stretch lite image that I have read-only using overlayfs. Maybe adding this? [https://github.com/cmhe/meta-readonly-rootfs-overlay](https://github.com/cmhe/meta-readonly-rootfs-overlay) ---
**Author:** ![leonardoneris](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/leonardoneris/32/1057_2.png) [@leonardoneris](https://forums.balena.io/u/leonardoneris)\ **Post date:** [July 18, 2018, 1:10pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/16 "2018-07-18T13:10:01Z")
Hi everyone I need some help with this implementation… i’m trying to build a car dashboard based on CAN BUS data, with some low level eletronics integration, serial com with an Arduino and so on… I rly loved the performance of WPE but I’m feeling very restricted with the use of resinOS, I can not get an easy SSH access to the service running on docker and i’m having to adapt to this architecture is delaying the project a lot… The first version of project was based on an arch linux, all integration with the CAN BUS was done and everything worked, but the fullscreen browser performance was not as smooth as this one with WPE (I tried chromium and gtk + with webkit) Well, I’m lost and confused as to continue the project, I do not know if it is easier to try to implement WPE in a pure arch linux or to better understand the operation of the resinOS… I need some help from you guys Tks a lot ---
**Author:** ![blackjid](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/blackjid/32/1114_2.png) [@blackjid](https://forums.balena.io/u/blackjid)\ **Post date:** [September 21, 2018, 3:52pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/17 "2018-09-21T15:52:56Z")
hey @vincentphan, were you able to capture the screenshot from the buffer while running wpe?? thanks ---
**Author:** ![wwalker](https://sea2.discourse-cdn.com/balena/user_avatar/forums.balena.io/wwalker/32/1225_2.png) [@wwalker](https://forums.balena.io/u/wwalker)\ **Post date:** [September 27, 2018, 9:25pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/18 "2018-09-27T21:25:18Z")
I’ve found a good solution using Electron JS and the following: // Screenshot thru SSH // DISPLAY=":0.0" import -window root beta.png curl --upload-file ./beta.png [https://transfer.sh/beta.png](https://transfer.sh/beta.png) transfer.sh returns a url to download the screen grab ---
**Author:** ![seb](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@seb](https://forums.balena.io/u/seb)\ **Post date:** [October 10, 2018, 1:42pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/19 "2018-10-10T13:42:22Z")
very nice. can you do inertial/momentum scrolling with one finger (like iOS/Android) ---
**Author:** ![srlevitt](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@srlevitt](https://forums.balena.io/u/srlevitt)\ **Post date:** [August 23, 2019, 1:26pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/20 "2019-08-23T13:26:59Z")
Very impressive, I like it a lot. Unfortuantely it has a problem with clip-paths: > ---
**Author:** ![zvin](https://avatars.discourse-cdn.com/v4/letter/z/a5b964/32.png) [@zvin](https://forums.balena.io/u/zvin)\ **Post date:** [August 23, 2019, 5:14pm UTC](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741/28 "2019-08-23T17:14:08Z")
@srlevitt I guess this is not supported in the `wpewebkit` version used in `balena-wpe`. You’ll need to wait until it’s updated (I don’t have any estimate for that). We have an experimental version that you can test: docker image `imrehg/balena-wpe:raspberrypi3-6925588` but it does not update `wpewebkit` so I don’t think it will make any difference. [Next page](https://forums.balena.io/t/fullscreen-webkit-browser-with-hw-accelerated-css-webgl-and-html5-video-on-the-raspberrypi-3/741.md?page=2)