streamwall/streamwall

Display a mosaic of livestreams. Built for streaming.

Streamwall

🚧 Early WIP release! 🚧

Streamwall makes it easy to compose multiple livestreams into a mosaic, with source attributions and audio control.

How it works

Under the hood, think of Streamwall as a specialized web browser for mosaicing video streams. It uses Electron to create a grid of web browser views, loading the specified webpages into them. Once the page loads, Streamwall finds the <video> tag and reformats the page so that the video fills the space. This works for a wide variety of web pages without specialized scrapers.

Prerequisites

1. Node.js and npm. Download the LTS release from here - https://nodejs.org/en/

Setup

1. Download streamwall. You can use git, or download and unzip https://github.com/chromakode/streamwall/archive/main.zip
2. Open the streamwall directory in a console
   • In Windows, the LTS install from nodejs.org will install a program called "Node.js command prompt." Open this program; Command Prompt and Powershell may not have the correct environment variables. Once it's open, change directories to where you extracted the file, e.g., > cd c:\Users\<myname>\Downloads\streamwall\
   • On MacOS, you should be able to use the default system terminal or other terminals like iTerm2 as long as a sufficient version of Node is installed. With that open, change directories to where you extracted the file, e.g., > cd ~/Downloads/streamwall
3. Run the following command: npm install

To Start Streamwall

1. Using a terminal/console window as described above, go to the streamwall directory, and run npm run start-local
2. This will open a black stream window and a browser window. The default username is "streamwall" and the default password is "local-dev".
3. Use the browser window to load or control streams. The initial list will be populated from https://woke.net/#streams
4. If you enter the same stream code in multiple cells, it will merge them together for a larger stream.

Configuration

Streamwall has a growing number of configuration options. To get a summary run:

npm start -- --help

For long-term installations, it's recommended to put your options into a configuration file. To use a config file, run:

npm start -- --config="../streamwall.toml"

See example.config.toml for an example.

Data sources

Streamwall can load stream data from both JSON APIs and TOML files. Data sources can be specified in a config file (see example.config.toml for an example) or the command line:

npm start -- --data.json-url="https://your-site/api/streams.json" --data.toml-file="./streams.toml"

Twitch bot

Streamwall can announce the name and URL of streams to your Twitch channel as you focus their audio. Use twitchtokengenerator.com to generate an OAuth token. See example.config.toml for all available options.

Hotkeys

The following hotkeys are available with the "control" webpage focused:

• alt+[1...9]: Listen to the numbered stream
• alt+shift+[1...9]: Toggle blur on the numbered stream
• alt+s: Select the currently focused stream box to be swapped
• alt+c: Activate Streamdelay censor mode
• alt+shift+c: Deactivate Streamdelay censor mode

Troubleshooting

Unexpected token errors during npm install

We've observed this occur in cases where file corruption is an issue. The fix has been to clear the npm cache, remove the streamwall directory, and start from scratch.

The Streamwall Electron window only fits 2.5 tiles wide

Streamwall in its default settings needs enough screen space to display a 1920x1080 (1080p) window, with room for the titlebar. You can configure Streamwall to open a smaller window:

npm start -- --window.width=1024 --window.height=768

Credits

SVG Icons are from Font Awesome by Dave Gandy - http://fontawesome.io

streamwall's Issues

the refresh button

the stream refresh button goes away when a stream either freezes or ends it didnt use to do that

Feature request: Indicate in the list which streams are live

Problem
Seeing streams that look interesting that you would want to add and then only when you scroll back to the top realizing it's already there.

Potential solutions:

• Something inline, or a modification of the colored box by the code
• Bring them up to the top in their own section, so they're not even in the full list with everything else
• Bring them to the top in the existing list (would conflict with solution to #51)

Streams not populating

When the viewers add more streeams to the list they dont show up from when you look at the website they have them, like its not grabbing from the google doc.

Periscope streams with rotation applied do not get scaled to cover space

SVG errors?

win 7 64bit
npm -v 6.4.1

2020.06.23-cmd.txt

2020-06-23T17_35_51_599Z-debug.log

help for 16 windows

could someone edit the config file for me toget 16 walls? its years since i dabbled with editing files, ill screw it up if i attempt to do it lol

remove deafult streams, add own, change user name password etc

hi, where are the default streams located, how to remove them and only add my own, how to change user name and password etc

Only getting a black unresizable windows after installing and starting.

Example screenshot, I'm assuming there should be a second window as demonstrated in the screenshots:

❯ git clone https://github.com/chromakode/streamwall.git && cd streamwall && npm install && npm start
Cloning into 'streamwall'...
remote: Enumerating objects: 396, done.
remote: Counting objects: 100% (396/396), done.
remote: Compressing objects: 100% (177/177), done.

remote: Total 396 (delta 278), reused 332 (delta 216), pack-reused 0
Receiving objects: 100% (396/396), 1.94 MiB | 1.52 MiB/s, done.
Resolving deltas: 100% (278/278), done.

> [email protected] postinstall /home/<user>/git/streamwall/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /home/<user>/git/streamwall/node_modules/ejs
> node --harmony ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> [email protected] postinstall /home/<user>/git/streamwall/node_modules/electron
> node install.js

npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1391 packages from 614 contributors and audited 1397 packages in 21.67s

63 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

I have no experience with nodejs/npm itself. But those optional dependencies being skipped are probably the reason it's not working as expected.

Info about my setup:
npm --version 6.14.4
OS: Fedora 32
Thanks.

Size video to contain (instead of cover) grid space

It would be nice to have the option (not on by default) to have a source fit into a cell of the grid w/o cropping (when using multiple cells for a single source). This would cause some extra black space for oddly shaped sources but would at least allow you to show the whole source

StreamWindow cut off if monitor resolution 1920x1080

A relatively easy fix is to start StreamWindow with frame: false. It makes it a little awkward to exit the program so I think there would need to be a way to trigger app.quit() from the UI/keypress events.

diff --git a/src/node/StreamWindow.js b/src/node/StreamWindow.js
index ebaf9f4..49850a8 100644
--- a/src/node/StreamWindow.js
+++ b/src/node/StreamWindow.js
@@ -34,6 +34,7 @@ export default class StreamWindow extends EventEmitter {
       backgroundColor: this.backgroundColor,
       useContentSize: true,
       show: false,
+      frame: false,
     })
     win.removeMenu()
     win.loadURL('about:blank')

Feature Request: "New stream added/removed" popup or log

Problem:
When there's a lot going on, you might not notice that someone has added a new feed. (Or you know someone has tried to add a new stream, but you aren't sure if it's going to be a duplicate of something you already have seen and/or put on the channel.) Or you might not notice that one of the feeds has stopped broadcasting.

Proposed solution:
A "toast" mechanism of some kind that says with a timestamp, either:
-- "New stream", its name and code, and a clickable link to it (so that you can preview it before adding it, if you're unfamiliar with it).
-- "Stream ended", its name and code

Possible alternatives:

• A running log to the right of the wall

Acceptance criteria:

• Doesn't block you from taking other actions on the page (typing/removing a stream, moving a stream, scrolling the page)
• Should be able to see notifications for streams that went live or ended while the streamwall browser tab didn't have focus
• The notification shouldn't disappear automatically; it should persist in a non-intrusive way and/or be dismissable
• Notifications should "stack" in some way so that you can see multiple streams going live/ending

Add ability to manually remove or exclude a source

Overview
Sometimes, the livesheet or custom source list contains sources that the streamwall user is not interested in using, and they become noise to filter through when running streamwall. We should add the ability to remove or exclude sources.

Acceptance Criteria

• Sources from the livesheet can be hidden
• Hidden livesheet sources can be unhidden (perhaps there's a second "tab" or out-of-sight area that lists hidden sources)
• Custom sources can be removed entirely
• Removing or hiding a source also removes instances of that source from the streamwall grid

Feature Request: Enable "Annotation" with comments

Problem:
While watching the stream, you may notice something that would be helpful/interesting to posterity (acts of violence, speeches, etc.). It would be really helpful for folks who are archiving and/or trying to find particular footage to have somewhere to start.

Potential Solutions:
I'm describing a number of potential solutions, which could easily be mixed/matched based on complexity and feedback. Ideally, you'd be able to add the note to only the stream(s) that is/are relevant to the note, but for MVP it could just get added to every stream that's live at that moment.

• A "Capture" button on the page that stores the timestamp, which streams are live, and opens up a text box for you to write a note. That note then gets added to the notes section of the livesheet for every stream that's currently live
• A "Capture" button on one of the stream boxes that stores the time stamp, that stream, and opens a text box for you to write a note
• A text box that's just always on the page, where you type in the code of which stream you're annotating and the note you want. When you hit "save" or whatever, it captures that timestamp and uses the code to find which stream it is to then add the note to the livesheet.
• A section that's always on the page where it shows which streams are live with a multi-check box next to each, and a text box and "save" button next to that. Using the multi-check box, you'd select which stream(s) to apply it to, write your note, and then it'd get saved with a timestamp when you click the button. This section could work well with #54 depending on how that is implemented.

Potential problem with all my potential solutions???
For streams that have the same URL every time (twitch, IG), does the notes tab then just get infinity long if you append it in the Livesheet??? Another option is to put all the notes in a yet-different sheet. There, you'd want to store timestamp, link to the livestream(s), and the note.

Twitch bot failures may be able to crash streamwall

TODO: simulate a twitch bot connection failure

Feature Request: Be able to "annotate" location

Problem:
After the fact, it can be hard to find particular footage because you don't know which streamers went to which parts of a protest/action.

Potential Solution, capturing data:
Annotation mechanism would be an extension (or precursor) of whatever we do here: #56

Potential Solution, retrieving data:

• Any plain-text solution (e.g., in the Notes section of past streams on the Livesheet) is going to be cumbersome to use, but we could probably brainstorm something.

Ideal solution:

• A map associated with each stream. You'd have time-stamped pins with lines between them so you could know where to jump to in the archived footage.
• Another part of an ideal solution would be if you could have a map for each day across streams. Pins would be time-stamped and linked to individual streams.

Add support for Pig.Observer traffic cameras

Overview
Traffic cameras in major cities can be valuable sources of video and are (usually?) free of copyright issues. It would be nice to include these in the wall without having to use overlayed browser sources in OBS

Pig.observer is a site that includes both live video and images that update every 60 seconds, depending on what each specific traffic camera supports.

For example, the following URL shows one video source and one image source:
https://pig.observer/seattle/#CMR-0091,I5DennyWay

Acceptance criteria

• pig.observer sources can be added as a custom streamwall source
• Either: all currently visible cameras are made available as individual sources, i.e. (pig1, pig2, pig3, etc) OR only the first visible camera is shown (streamwall users can customize pig.observer urls to show specific cameras)
• Video sources can be shown as a cell in streamwall and are live
• Image sources can be shown as a cell in streamwall and update when the image in pig.observer updates

obs audio

guys hope you can help, im picking the streamwall audio upvia desktop audio in obs, is there anyway streamwall can get its own audio so obs can pick it up seperatly?? i can now not talk in discord as the disocrd audio goes out to my twitch streams

when i was using only obs to manage the streams, i could talk in disocrd without the audio going out to the stream, have i missed something or does this need a fix?

also sent you money for a coffee, would love a soloution for sound fix, so if poss for obs to detect the streamwalls audio seperatly and notthourgh desktop audio??

Stream window wrong size on Macs with multiple displays and different DPIs

We should try this workaround: https://github.com/steveseguin/electroncapture/blob/5e7d1cdacecbaf84d06744ff2795b38a8d68d80a/main.js#L9

custom stream text inputs jump around (autosort?) when typing in them

Is there a way around this behavior that you could point me to? I'm good with html & css but pretty weak with javascript.

https://files.catbox.moe/1kdrjt.mp4

The fix i have in mind would be to keep the custom streams input list order static and add a button to sort them after the user has finished typing in the title/name of a stream.

Another idea that i probably don't have the skills to make happen would be to pull the title from the URL of the first text input and autofill the second text input - still allowing the user to change it of course.

FR: Rotate sources

Overview:
Sometimes streamers' video appears in an incorrect orientation due to their phone/video settings. We can correct this orientation by allowing streamwall users to rotate the source in 90 degree increments

Acceptance criteria

• Streamwall provides a button or feature to rotate a video source

Deleting custom rows can leave a stream with id "0"

It's likely that the custom streams list isn't being filtered in some case. Needs investigation.

Feature Request: Sorting Mechanisms

Problem:
You know a new stream has been added, but you're not sure what its 3-letter code is going to be. Finding it in the list is a pain.

Be able to choose sorting mechanism:

• Alphabetical
• Most recently added
• BONUS: Location

Facebook streams freezing

I add a facebook stream as video type. For example: https://www.facebook.com/DigitalSmokeSignals/videos/549684245701739/

In the electron window the video freezes after less than a second. Audio continues playing after the video freezes, but the audio stops after 5-10 seconds also.

Commit e794ad9 - Windows 10 - 64 bit

Add "fill tool" to populate a contiguous rectangular area within the grid

Overview
It can be tedious and slow to manually fill a rectangular, blank area within the streamwall grid. To address this, we can add a feature that fills a contiguous rectangular area with a selected source

Acceptance criteria

• Users can select a source, choose to "fill" an area" and select any blank cell in the streamwall grid to fill the largest contiguous rectangle within that portion of the grid with the selected source

normalize audio - streams with low levels might not need a manual volume control

I never know how much i should show or explain, made video to show and tell, hopefully it makes sense to someone not familiar with this stuff.
https://youtu.be/jc0cx-OQPRg

github page:
https://github.com/est31/js-audio-normalizer

normalizing the audio could negate the need for individual stream audio controls per this item in the roadmap:
https://github.com/chromakode/streamwall/projects/1#card-40562327

I didn't look further than the first thing i found for audio compression/normalization in this context so no idea if there's something better out there.

I also think it would be cool to have a VU meter on the controls page so the user can see visually if the levels are low. A toggle for normalize on/off might be useful as well because depending on how this works in practice it can get annoying if it pumps up the audio gain so much that you end up hearing static or other annoying noise.

Add ability to remove all instances of a source in the grid

Overview
When a stream is over, or a streamwall user wants to change the source for a set of cells in the grid, they must manually edit each cell that comprises the viewable area in the grid. When this occurs, streamwall attempts to merge/update the grid while it's being edited. It's also somewhat tedious for the streamwall user.

It may be important to consider that users may still want to only remove part of a source instance in the grid, i.e., reducing the size of the viewable area rather than removing the source altogether

Also consider that there may be multiple contiguous areas for a particular source

Acceptance criteria

• Users can remove all contiguous instances of a particular source from the grid with a single action (e.g., click an "X" icon in a grid cell
• Only contiguous cells are depopulated
• There is some way to distinguish between removing the entire contiguous area and removing a single cell from a contiguous area

Limit updates during input

Overview
When adding custom sources or typing into streamwall cells, it appears that streamwall attempts to update on each keydown/keyup or similar. This causes streamwall to experience temporary performance issues as the user types. Instead of updating the streamwall cells on keydown/keyup, it may be more performant to change only when the user is finished with their input, i.e., on "change" or focus-lost events

Acceptance criteria

• When adding or editing the URL or Name for a custom source, the changes are only committed when input is complete
• When setting the source identifier for a streamwall cell in the grid, the changes are only committed when input is complete

Feature request: Have a "toggle" to turn captions on/off

Problem:
Right now, only a couple of people can turn captions on/off. They are not always available, but there are times when captions would be newly helpful -- or newly a PITA because they don't do well with crowd noise.

Ended Streams

When a stream ends it just removed the 3 letter text and you have to restart the program to be able to use that square again, If its already fixed can we be told how to fix it.

Ability to pop out and interact with views being streamed

love your response!! a urgent thing that is needed, is to have a feature like obs interact - we really need to be able to change the bit rate of feeds, i had so many pushing full 1080p high bit rate which is not really needed at all times, please work on something that will allow us to lower bit rates of each feed, i love stream wall

so need to interact with youtube facebook etc, to lower or raises the bit rate on the cog wheel of each site

This page isn’t workingIf the problem continues, contact the site owner. HTTP ERROR 426

getting this error all of a sudden, happnes when i press refresh on streawall control window, and at random times, can only fix it by restarting pc

Add ability to save/store custom sources from the streamwall interface

Overview
Users can store custom sources in a configuration file right now, however it's difficult to remember to update this file in addition to working with streamwall's interface - it's yet another step. It would be nice to have a save/export feature to update the list of custom sources and store it locally

Acceptance criteria

• Users can save their list of custom sources
• Streamwall reads the saved list of custom sources either on demand (i.e., "load" or "open" feature) or at boot time
• Extra credit: Streamwall automatically reads and writes from/to the custom source list without user intervention

Ellipsize long stream titles in the control page stream list

Crashes when trying to add or adjust stream windows.

Goes back to command line, and have restart program randomly when adjusting windows or adding more streams.

Change size of grid (4x4, 8x8, etc)

It would be really nice to be able to change the size of the grid, 4x4, 8x8, etc. It would allow for much more flexibility for oddly shaped and sized sources.

Stop / mute other videos in page than the selected one

In rare situations, news sites can embed multiple videos on the same page. This can cause confusing, overlapped audio. We should stop and mute any videos on the page other than the one being viewed.

Add ability to swap sources between two viewable areas

Overview
During times of high activity, it can be difficult to know which source to focus on, and it may change rapidly. To make it easier to make sources larger and smaller, it would be helpful to be able to swap the sources in two contiguous, populated areas of the grid.

For example, assume the grid includes a 2x2 area with Source A, and a 1x1 area with Source B. If something happens in Source B that should be focused on, the user should be able to swap the sources for those 2x2 and 1x1 areas such that Source A takes the place of the 1x1 area and Source B takes the place of the 2x2 area

Acceptance Criteria

• Users have access to a "swap sources" feature that allows them to select two contiguous areas in the grid and swap their sources

Add configuration for spreadsheet URL

Overview
Streamwall currently reads from a hardcoded URL to pull livesheet data from that is specific to WOKE. Other users of streamwall and sheets2json host their livesheet data at different URLs. It would be nice to be able to configure the URL of the livesheet data instead of updating the hardcoded string

Acceptance criteria

• Streamwall reads the livesheet URL from configuration/options rather than using a hardcoded URL

rtsp

out of interest, would it take much work for streamwall to take rtsp feeds from cctv cameras? (ip)

Set volume level for individual sources

Overview
Some streamwall users like to use focused audio from one source and ambient audio from one or more secondary sources. It would be nice to set a volume level for each source within the streamwall grid

Acceptance criteria

• Users can set a volume level for each source within the streamwall grid
• The "active audio" highlight in the output video has some indication of the volume level for each audio source in the grid (e.g., change opacity, size, color, or something else based on volume)

Bug: Sometimes, streamwall generates the same source id for multiple sources

Overview
I am unsure how to reproduce this yet, but it seems to occur most often when sources have a name that includes the same prefix. For example, adding "Converge Media" will generate a con1 id. However, occasionally adding a "Concrete Reporting" source will also generate a con1 id. When this occurs, the only way to choose between these sources when populating the streamwall grid is to click the button to add them - typing the name will cause a collision

Acceptance Criteria

• Sources are always given a unique identifier that is distinct from all other sources

Add configurable username/password for read-only access to the control page

This should be configurable via command line arguments, or the config.toml file. The websocket should connect, but reject any commands. This will probably require matching username to a "role" and associating that role with each websocket connection.

Feature Request: Be able to tag streams

Problem:
Our streams have a lot of different characteristics that influence how we interact with them on the wall. E.g., a lot of streams don't have any audio -- or some streams are likely to have choppy audio that influence whether we want captions on

Potential solutions for viewing categories:

1. Show the tag labels in-line
2. Add a filter mechanism where you can multi-select tags. You should show streams that match all the selected tags

Acceptance criteria:

• There's a clear way to add, remove, or edit tags on a stream (either on the streamwall or in LiveSheet)
• Streams can have multiple tags
• Default filtering is none (i.e., show all streams)
• In the list of streams, you can see what tags each stream has

Add ability to sort sources

Overview
When the livesheet data or custom sources are long, it can be difficult to figure out which sources are new or live. It would be nice to be able to sort the list of streamwall sources by different attributes, such as "last live", "added", "status", "name", "platform", etc.

Acceptance Criteria

• Users can sort the list of streamwall sources by different attributes

Feature request: "Popular streams"

Problem:
When you're first starting to curate, you don't know which feeds are "good" / known / reliable / interesting

Potential solutions:

• If #51 is implemented, you could sort by number of streaming times desc
• Some sort of indicator in-line, if they've been streamed at least ... 3? times in the last two weeks (both numbers are just guesses at what would be good).

Add ability to crop sources

Overview
Some sources add overlays or multiple views to their videos, and the streamwall user may want to either zoom in on an area or otherwise crop the source. Let's add a way to do this on either a per-source or per-instance level

Acceptance Criteria

• At some level (source or streamwall-grid instance), users can specify the following crop settings:
  • X offset
  • Y offset
  • Width
  • Height
• Streamwall uses the crop settings to choose which part of the video to show within the cell inside the video output

Some periscope streams are rotated 90 degrees

The div.BaseVideo element has a transformation matrix on it that indicates the correct way to orient the video. This needs to also be applied to the streamwall video.

<div class="BaseVideo" style="transform-style: preserve-3d;overflow: hidden;position: absolute;width: 323.944px;height: 575px;left: 50%;top: calc(50% - 118.014px);transform: translate(-50%, -50%) matrix(0, -1, 1, 0, 0, 0);">

Include the stream state field in the control page stream list

the streams just end randomly

So you pull up a stream and the stream didnt end but ends randomly and you have to reload the stream into the boxes

Sort stream list in control window

First by "Live" / "Offline" status, then by streamId A-Z