Multiscreen Browser

[jdbelo]

Hi everyone,

Does anyone know if it is possible to launch multiple instances of the browser block? I mean, my ultimate goal is to use a single device with two screens attached to launch two different URLs (each screen displays a different URL).

Many Thanks

[ngmartins]

This wold be interesting :)

[phil-d-wilson]

Hey there.

I think to achieve this, you will need to add two instances of the block to your docker-compose, and configure them to use separate X11 displays. The blocks will have the same image, so won't take up much space on the device, or have to be downloaded twice. However, the block has a whole X11 stack as well as chromium, so that will take quite a lot of memory to run. Chromium works by grabbing as much memory as it wants in order to display pages quickly, and only release some when another process requests memory. There's a chance you'll see the two Chromium processes competing for the device resources.

There is also another issue, in that we currently default the display number to 0:
https://github.com/balenablocks/browser/blob/ba2261c2454a8bab28b2838b6e137a18ef0dd18d/src/start.sh#L51
This will need to be turned into a variable, passed in from the enVars, so that users can choose the display the block uses.

If someone could PR the change, it would be super helpful. :)

[terehov]

@phil-d-wilson I tried changing DISPLAY=:1 (1 instead of 0) but it does not have any impact. I am using a Raspberry Pi 4 with two display connected on HDMI0 and HDMI1. Do you maybe have another idea?

[matt-veit]

Has anyone gotten this to work? I'm also interested in using multiple displays.

[matt-veit]

I have not been able to figure out how to run two instances of the browser block with one on each screen, but I did find another possible workaround without any modification to the browser block. This actually works better in my case.

Here's my Configuration:
Define DT overlays: vc4-fkms-v3d
Define device GPU memory in megabytes.: 512
Force the HDMI hotplug signal: 1
Define the HDMI output group: 2
Define the HDMI output format: 82
Force the HDMI hotplug signal on HDMI port 2 Only supported by supervisor versions >= v14.6.0.: 1
Define the HDMI output group on HDMI port 2 Only supported by supervisor versions >= v14.6.0.: 2
Define the HDMI output format on HDMI port 2 Only supported by supervisor versions >= v14.6.0.: 82

BALENA_HOST_CONFIG_disable_overscan: 1
BALENA_HOST_CONFIG_max_framebuffers: 2

Variables:
WINDOW_SIZE: 3840,1080

This allows me to have one browser window that spans 2 1920x1080 screens. My web app displays content in two 1920x1080 regions side by side. The result is different content on each screen.
If you want to show two different websites, I suppose you could point it to a webpage with two 1920x1080 iframes.

I'm still doing some testing and I'm actually using a fork of this block for my application, but I thought I'd share in case anyone else wants to try it out.

[22chrs]

@matt-veit Sounds great! May I ask if you could share your project?

[taro-ishihara]

I am considering migrating to Balena from another platform, and dual-display support is essential for me. Ideally, I would like to launch two browser instances and display different URLs on each instance.

[22chrs]

I also looking forward on using multiple screens with one device. Each screen calls a unique url and displays diffrent content.
Any update here? :)

[taro-ishihara]

@22chrs

I eventually have made that by myself that forked from this.

https://github.com/taro-ishihara/balena-display

Tested on Raspberry Pi 4 only.

[22chrs]

@taro-ishihara
Thanks a lot! Looks great. I will try your code in the next days. I have only to change the browser for display in my docker-compose.yml? I am a bit unsure what to do with the ports inside the display docker. Should this look like that?

services:
display:
image: balenablocks/browsercontrol
restart: always
network_mode: host
privileged: true
environment:
- LAUNCH_URL_1=http://app:8081?display=1
- LAUNCH_URL_2=http://app:8081?display=2
- SHOW_CURSOR=1
ports:
- 80:80

app:
build: ./app
restart: always
privileged: true
hostname: app
ports:
- "8081:8081"
environment:
- PORT=8081