<div dir="ltr">Hi all,<div><br></div><div>Some time ago I mentioned project Westfield and how it could be used to create an html5 wayland compositor.</div><div><br></div><div>Today I'm proving I was not lying :)</div><div><br></div><div>I've recorded a short clip to demonstrate what it looks like:</div><div><br></div><div><a href="https://www.youtube.com/watch?v=2lyihdFK7EE">https://www.youtube.com/watch?v=2lyihdFK7EE</a><br></div><div><br></div><div><br></div><div>From the description:</div><div><br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">Html5 Wayland Javascript compositor running in the browser.</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">
</span><a class="gmail-yt-simple-endpoint gmail-style-scope gmail-yt-formatted-string" href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Fudevbe%2Fgreenfield&v=2lyihdFK7EE&redir_token=iJXBVRRztaaoy5zr-75tiyOKckx8MTUxMTUzMTUzOUAxNTExNDQ1MTM5&event=video_description" style="display:inline-block;text-decoration-line:none;font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">https://github.com/udevbe/greenfield</a><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">
</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">What you see are native linux applications that are rendered inside the browser using WebGL. This is done by encoding each application in real-time to a h264 video stream. Each video frame is sent using UDP (webrtc) to the browser where it is decoded and composited on the screen.</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">
</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">Each individual application is rendered inside an html5 canvas, which allows for extra special effects to be added (css styling, layout, ...)</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">
</span><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">The wayland protocol is used to directly talk to the applications. This is implemented using a custom wayland protocol  library (</span><a class="gmail-yt-simple-endpoint gmail-style-scope gmail-yt-formatted-string" href="https://www.youtube.com/redirect?q=https%3A%2F%2Fgithub.com%2Fudevbe%2Fwestfield&v=2lyihdFK7EE&redir_token=iJXBVRRztaaoy5zr-75tiyOKckx8MTUxMTUzMTUzOUAxNTExNDQ1MTM5&event=video_description" style="display:inline-block;text-decoration-line:none;font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">https://github.com/udevbe/westfield</a><span style="color:rgb(17,17,17);font-family:Roboto,Arial,sans-serif;font-size:14px;white-space:pre-wrap">) and an intermediate server side 'delegate'.</span></blockquote><div><br></div><div><br></div><div>Other perhaps noteworthy things:</div><div>- Alpha channel support is provided by using a separate h264 stream where the alpha channel is first converted to gray-scale and then applied to the alpha channel on the browser side using a webgl shader.</div><div>- pixman & libxkbcommon are used browser side by compilation to wasm (web assembly).</div><div>- Each browser tab forks a separate isolated process on the server side</div><div>- gstreamer is used to encode to h264</div><div><br></div><div><br></div><div>cheers,</div><div><br></div><div>Erik</div><div><br></div><div><br></div></div>