jsmpeg SDL Video Driver
Not logged in

jsmpeg SDL Video Driver

An experimental SDL video driver named jsmpeg is provided since Valentine's Day 2019. It uses the technique described in https://github.com/phoboslab/jsmpeg and https://github.com/phoboslab/jsmpeg-vnc in combination with HTML5 and WebGL in a modern browser to provide display, mouse, and keyboard to a normal undroidwish.

This means, that the rendering is performed into a memory buffer, which is encoded into a modified MPEG-1 transport stream, sent over a Websocket to a web browser, which performs MPEG-1 decoding and rendering into a HTML5 canvas optionally using WebGL. Likewise, mouse and keyboard events are sent on the same Websocket from the browser back to the jsmpeg driver, transformed to SDL mouse and keyboard events and further processed by the undroidwish application.

Frame rate and required bandwidth are moderate. Currently, 25 frames per seconds are sent at most, which require some few hundred kilobits per second. Since April 2019 limited support for OpenGL is available for the Canvas3D and tkZinc widgets. It requires a working EGL/OpenGL infrastructure (Linux etc.) or Windows OpenGL. On Linux this normally requires an X11 display connection except for very recent versions of Mesa and GPU drivers, i.e. on Debian 10 and Fedora 30 the environment variable EGL_DISPLAY can be set to surfaceless in order to turn on headless GPU mode.

For the adventurous, there is a test version for Linux x86_64 (Debian 9, Fedora 30, CentOS 7), Windows 32 bit (XP or newer), Windows 64 bit (XP or newer), and MacOSX (tested on High Sierra). All can be run using the jsmpeg video driver when the environment variable SDL_VIDEODRIVER has the value jsmpeg and the required FFMpeg DLLs/shared libraries are available on the system, e.g.

    # POSIX
    export SDL_VIDEODRIVER=jsmpeg 
    ./undroidwish-x86_64-deb9 builtin:widget -sdlwidth 800 -sdlheight 600
    REM Windows
    SET SDL_VIDEODRIVER=jsmpeg
    undroidwish-win32.exe builtin:widget -sdlwidth 800 -sdlheight 600
    # Mac OSX
    export SDL_VIDEODRIVER=jsmpeg
    /Applications/undroidwish.app/Contents/MacOS/undroidwish builtin:widget -sdlwidth 800 -sdlheight 600

For Windows, the required DLLs are avutil-56.dll, avcodec-58.dll, swresample-3.dll, and swscale-5.dll which are available from https://www.ffmpeg.org/download.html and preferably loaded from %PROGRAMFILES%\ffmpeg\bin. For Linux, the shared libraries are available per installing the distribution's ffmpeg package(s). For MacOSX, the homebrew ffmpeg package provides the necessary shared libraries.

By default, the HTTP/Websockets port is 8080 which can be overridden with the environment variable SDL_VIDEO_JSMPEG_PORT. Thus, the URL

    http://localhost:8080

connects the browser with the jsmpeg enabled undroidwish. If the browser's WebGL implementation isn't suitable for proper displaying the undroidwish root window, the alternate URL

    http://localhost:8080/?use2d

turns off WebGL usage.

Note that all local TCP/IP addresses are bound, not just localhost. Thus, if your local TCP/IP address is 192.168.1.9, then http://192.168.1.9:8080 will work, and provides access to your app via non-localhost devices.

HTTP AUTH

You can optionally password-protect the http port serving your app, by defining the SDL_VIDEO_JSMPEG_AUTH variable like so:

export SDL_VIDEO_JSMPEG_AUTH=$(echo -n user:pass | base64)

This will cause your web browser to require a username/password combination in order to display the page. For more info about HTTP AUTH see the Wikipedia article Basic_access_authentication.

Screen recording

You can optionally save your entire Tk app's running to a MPEG1 file, by defining the SDL_VIDEO_JSMPEG_OUTFILE like so:

export SDL_VIDEO_JSMPEG_OUTFILE=data.mpg

HTML Page Title

The HTML generated to support the jsmpeg driver will automatically use the Tk window manager title to define your web page's web title. Thus, this command in your Tcl/Tk program:

wm title . "Hello World \U1F601"

will result in your web browser titling this page tab as "Hello World 😁". Only the application's toplevel window (the "." in Tk parlance) will set the browser title.

A note about colors

Due to RGB->YCbCr->RGB color conversions taking place when using the jsmpeg driver, the output colors of your app (when viewed in a web browser) are never exactly what they would be in Tk.

For example, white #FFFFFF will render as #FEFEFE. This difference is very slight.



Screenshot widget demo
Screenshot taken in a GNOME Wayland session