Hacknight Vibes on HighFidelity

--- GA: UA-36906123-3 tags: CivicTechTO --- # Hacknight Vibes on HighFidelity :::info Welcome! If you're reading this, you're welcome to contribute! :tada: ::: The purpose of this resource is to document how High Fidelity's "2D spatialized audio chat" might support reproducing a [civic hacknight](https://www.codeforamerica.org/blog/2013/07/24/brigade-101-how-to-hack-night/)'s breakout-group-style events in digital space. tl;dr - [DEMO of HiFi](https://map.highfidelity.com/1dQ1CyK6MD/?mapJSON=https%3A%2F%2Fhifi-json.s3.amazonaws.com%2FmapJSONExample_hifi_demo.json) :wave: **Contributors:** - @patcon [:bird:](https://twitter.com/patconnolly) [:globe_with_meridians:](https://nodescription.net/notes) (maintainer) - @lizbarry (ran meeting with YouTube presentation) - @ael (ran multi-linguistic bday party) - @CivicTechTO (experimentation) - YOU? ## Rough Notes - terminology - **space:** a shared area like a chat room, represented by a unique URL. - e.g., `https://map.highfidelity.com/1dQ1CyK6MD/` - **map:** an image or configuration that is set via URL parameters, that controls what users will see as a background and annotation layer in the space - e.g., `https://map.highfidelity.com/1dQ1CyK6MD/?map=https://hifi-content.s3.us-west-1.amazonaws.com/Background_Images/Stage-BG.jpg` - **annotation layer:** a set of landmark overlays configured in `mapJSON`. These shapes and text elements appear above the background map, and can be hyperlinked to websites or YouTube embeds (including livestreams). - The map background can also be set in the `mapJSON` - e.g., `https://map.highfidelity.com/1dQ1CyK6MD/?mapJSON=https://hifi-json.s3.amazonaws.com/mapJSONExample_hifi_demo.json` - Meta thoughts by patcon - human interaction in physical reality is "highly recursive" - e.g., I can host an event, someone can run a session in that space, 4 people in that event can sit together and whisper, two of those people can make eye contact and communicateia micro-expressions amongst just themselves without speaking. - Most tools, if they offer anything at all, presuppose the level of recursion that participants need. E.g., 2 levels: (1) a shared zoom call where everyone is "making eye contact with everyone all the time" and (2) breakout groups that are created on-demand at moderator's discretion. - A spatialized 2D chat tool like HighFidelity allows people to be near or far, to slowly wander away, to visibly redirect "attention" cone, and move "in front of" a communication partners attention cone when very engaged. It's less nuanced than realspace, but way closer than other tools. - "Attention" is a tool of skilled community organizers to guide and shape a space, so it's incredibly important for them to be able to wield their own attention in a complex way. - events designed for emergence are all about not "collapsing the possibility space". organizers of open space should reject linear time as a pillar of human collaboration - linear time is for telling _established_ narratives, not for birthing/discovering them - [Register for a space](https://www.highfidelity.com/#hs_cos_wrapper_widget_1588780265609) - Current cost: Free - :-1: will eventually cost, which is a risk - :+1: "downgrading" back to old methods seems low-barrier - :+1: still benefit from learning what dynamics are _possible_ in digital spaces. - Current capacity: 50 people ([upgrade to 150 on request](https://www.highfidelity.com/knowledge/can-i-upgrade-my-server-capacity)) - Custom Maps (via url parameters) 1. via [simple image url set in `map`](https://www.highfidelity.com/knowledge/how-do-i-change-my-background-image) - recommendation: _2048 by 2048_ px - format: PNG or JPG - best map for hacknights = [Speakeasy](https://hifi-json.s3.amazonaws.com/Speakeasy-BG-default-70m.jpg) (see others below) 3. via [more complex `mapJSON` configuration]() - Maps - Official - [Graduation Field](https://hifi-content.s3.amazonaws.com/Background_Images/BG-Grad-field-2k.jpg) - [Poolside](https://hifi-content.s3.amazonaws.com/Background_Images/pool1.jpg) - [World Map](https://hifi-content.s3.amazonaws.com/Background_Images/BG-world-Map-2k.jpg) - [Fountain Garden](https://hifi-content.s3.amazonaws.com/Background_Images/garden5.jpg) - [Seaside Stage](https://hifi-content.s3.us-west-1.amazonaws.com/Background_Images/Stage-BG.jpg) - [Speakeasy](https://hifi-json.s3.amazonaws.com/Speakeasy-BG-default-70m.jpg) - [City Park](https://hifi-json.s3.amazonaws.com/city-park-map-70m.jpg) - [Outdoor Wedding](https://hifi-content.s3.amazonaws.com/Background_Images/Wedding-Final_HIFi2k.jpg) - [Outdoor Speed-Dating](https://hifi-content.s3-us-west-1.amazonaws.com/Background_Images/Speed-Dating-Generic.jpg) - [Beach Party](https://hifi-json.s3.amazonaws.com/MayanWarrior_Beach2-70m.jpg) - Community: [#hifimap tweets](https://twitter.com/hashtag/hifimap) - [Topic Circles 1](https://pbs.twimg.com/media/EdkOeK9UMAAuN6R?format=png&name=4096x4096), PNG (c/o [@kentbye tweet](https://twitter.com/kentbye/status/1286076278940999680)) - [Topic Circles 2](http://webjournalist.org/highfidelity/maps/NAHJ-HighFidelity.svg), SVG (c/o [@webjournalist tweet](https://twitter.com/webjournalist/status/1286088832027250688)) - [Custom Open Space 1 (voting)](https://pbs.twimg.com/media/EZEAnM1XgAI66bj?format=jpg) (c/o [@FullyCroisened tweet](https://twitter.com/FullyCroisened/status/1265793820148535297)) - DIY Map supplies - https://www.contemporist.com/bb-italia-introduces-the-new-dock-seating-system-by-piero-lissoni/ - Custom "Annotation" layers via `mapJSON` config file - Making Annotation Layers - Store plaintext config file somewhere. - Possible services for hosting files - GitHub [Gists](http://gist.github.com/) - Edit config in the web interface - Use "raw" file URL for setting `mapJSON` in HiFi - Etherpad: [Public Lab's server](https://pad.publiclab.org/) - Edit config in the web interface - e.g. [`pad.publiclab.org/p/unused-hifi-example`](https://pad.publiclab.org/p/unused-hifi-example) - Use plaintext url by appending `/export/txt` to the editor url - e.g., `pad.publiclab.org/p/unused-hifi-example/export/txt` - we'll need to use this url for configuring and updating our High Fidelity map - e.g., https://map.highfidelity.com/1dQ1CyK6MD/?mapJSON=https://pad.publiclab.org/p/unused-hifi-example/export/txt (uses simulated event space, mentioned below) - Be aware of "caching" `#todo` - To add a new landmark, you'll need the intended `xy` coordinates on your map. Here's how: 1. Wander directly on top of intended placement of your marker. 2. Click `☰ (top-left) > Invite` 3. Copy the url 4. Find the `&x=0.00&y=0.00` portion, and note the `x` and `y` values. - [Simulated event space](https://map.highfidelity.com/1dQ1CyK6MD/?mapJSON=https%3A%2F%2Fhifi-json.s3.amazonaws.com%2FmapJSONExample_hifi_demo.json) ([`mapJSON` config](https://hifi-json.s3.amazonaws.com/mapJSONExample_hifi_demo.json)) - This is provided by High Fidelity itself. - Anyone can use their own `mapJSON` or other map config set in the URL. This allows your custom map to have a simulated crowd. - Experiment: [`patcon/hifi-fake-users`: Scripts to generate fake speakers](https://github.com/patcon/hifi-fake-users) - Run a software script in the cloud that places a fake user at specific coordinates within a HiFi space, and plays an audio file on loop. - :bulb: Ideas: hire a DJ, have a forest make forest-sounds, have digital exhibits talk about themselves, etc. - Experiment: [`patcon/hifi-map-editor`](https://github.com/patcon/hifi-map-editor) - Small WIP app to help people generate mapJSON annotation layer files. - Experiment: Skeumorphic, clickable objects linking to web tools, positioned around breakout areas: https://map.highfidelity.com/DfFq8zih057Z3qe3/?mapJSON=https://pad.publiclab.org/p/2020-09-19-civictechto-hacknight-test/export/txt - Official HiFi Documentation - [Designing Custom Maps for High Fidelity](https://www.highfidelity.com/knowledge/designing-custom-maps-for-high-fidelity) - [How to Stream Audio into High Fidelity](https://www.highfidelity.com/knowledge/streaming-audio-in) - [How to Stream Media into High Fidelity](https://www.highfidelity.com/knowledge/best-practices-for-streaming-media-in-high-fidelity) - [Sample Invitation Text](https://www.highfidelity.com/knowledge/sample-invitation-text) - Browser Requirements: Chrome (exception: Safari on iOS) - Audio settings - Click `☰ (top-left) > Audio` - Echo Cancellation - When to enable? When not using headphones, esp when computer speakers are loud. - Noise Suppression - When to enable? When persistent background hums, like computer fans or AC. - Automatic Gain Control - When to enable? When the room is otherwise silent, esp if you speak either quietly, loudly, or with a lot of variable speech voume. - Warning: If there are other speakers or noises nearby, it will amplify any quiet sounds when you're not speaking. - Livestreaming - Creating configured YouTube Event - Go to youtube.com and click profile in top-right > Your Channel - `/livestreaming/manage` - Create new scheduled livestream - Start time doesn't matter (past, future, whatever). Only affects countdown people see when visiting video in advance of start. - To edit, click the title of your new video in the list - Stream Settings - Set `ultra low-latency` (for 1-2 second delay) - Enable "Auto-start" (you won't have to revisit this page) - Disable "Auto-stop" (you can stop and restart without stream being archived) - Disable "DVR" (you only want realtime viewers) - Setting up a livestream device (Streamlabs) - Android: [Streamlabs Livestreaming app](https://play.google.com/store/apps/details?id=com.streamlabs&hl=en_US) #todo - Desktop: [Streamlabs OBS](https://streamlabs.com/streamlabs-obs) + [Streamlabs Deck app (remote control)](https://play.google.com/store/apps/details?id=com.streamlabs.slobsrc&hl=en_US) #todo - Example mapJSON files - https://pad.publiclab.org/p/2020-09-19-civictechto-hacknight-test - hacknight. breakout areas. adding skeuomorphic images (TV, laptop, notepad) for linking out to various services (YouTube, Jitsi Meet, Etherpad) - Misc Tips - It's possible to set up a pretty neat breakout group experience ([demo video](https://recordit.co/c53Mr34Myt)) with: - Jitsi Meet (for optional video-only presence, and streaming) - YouTube (for viewing video feed within HiFi) - Etherpad (for note-taking) - High Fidelity (for audio, and stitching it all together) - sample mapJSON: https://pad.publiclab.org/p/2020-09-19-civictechto-hacknight-test - You can use the annotation layer to provide links to separate breakout group video chatrooms. E.g., https://meet.jit.si/civictechto-breakout-1 - For video chat tool, favour a one that allows any member to mute another. Ex: Jitsi Meet. This helps avoid audio feedback between the tabs for video call and HiFi map. - You'll probably want to mute everyone in the video call, and rely on audio from HiFi. That way, if someone wander away in HiFi, they won't be stuck hearing sounds from the video chat, with those people speaking in omnipresent booming voices. - Jitsi Meet alos allows streaming to YouTube, so in theory you could set that up to stream faces the live video. That way, the video itself can be embedded in HiFi, so people can see one another within the map, instead of only when looking at the video call tab. (There will be some video delay, ~1-2 sec, but audio will be through HiFi and so no delay) - Use invite links to invite people to specific locations and - dimensions - according to docs, each unit is called a Speakeasy Unit (SU) in the docs - 1 SU = 1 meter - increasing from 0,0 in NW corner - `x`: increasing West:arrow_right:East - `y`: increasing North:arrow_right:South - `z`: depth. Not currently used. - `o` = orientation, in radians - 0 rad is with due North facing up - turning clockwise increases - [Unit Converter: degrees-to-radians](https://www.google.com/search?q=Unit+converter+90+deg+rad) - So if you want to turn 90º counter-clockwise from North, then 360-90 = 270, and 270º is `o=4.71` - Readings - [How to Host a Cocktail Party on Zoom (and have better classes, conferences and meetings, too)](https://archive.is/Azt5l)