A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

Overview

Calla

A wrapper library for Jitsi Meet that adds audio spatialization, to be able to create virtual meeting rooms.

PROBLEM

Even when it works, teleconferencing still kind of sucks. Only one person can realistically talk at any one time. This is fine for people giving presentations, but in real meetings, people speak over and around each other, or pair off into smaller subgroups, still being able to overhear the larger group.

SOLUTION

Calla adds a small, RPG-style map to the Jitsi meeting view. It gives you an avatar to walk around the room. Users choose where to sit in relation to other users. Users very close to you are set to full volume. Users a little far away have their volume scaled down accordingly. Users too far away to care about are rendered with zero volume.

  • Visit the current installation at www.calla.chat.
  • Enter a room name and user name. Suggest "Calla" for the roomname to meet other people linking from this repo (maybe).
    • Be careful in picking your room name, if you don't want randos to join. Traffic is low right now, but you never know.
    • Try to pick a unique user name. A lot of people use "Test" and then there are a bunch of people with the same name running around.
  • Click "Connect" and wait for the connection to go through.
  • Movement:
    • Click on the map to move your avatar to wherever you want. Movement is instantaneous, with a smooth animation over the transition. Your avatar will stop at walls.
    • Or, use the arrow keys on your keyboard to move.
    • Click on yourself or Hit the E key to spam emoji into the space as emote reactions.
    • You can roll your mouse wheel or pinch your touchscreen to zoom in and out of the map view. This is useful for groups of people standing close to each other to see the detail in ther Avatar.
  • Options:
    • You can change your Microphone and Speaker device in the Options view. Click the Gear icon ( ⚙️ ) in the toolbar.

INSTALLATION

NOTE: This project is currently going through an overhaul in how it is setup. In the future, Calla will be just the library for interfacing with Jitsi Meet and spatializing its audio. The application currently visible on calla.chat will become a separate project.

  • First, setup Jitsi Meet on a server of your choice: Jitsi quick-start instructions.
  • Install the Calla front-end (basically the rest of this repository) onto another server of your choice .
    • Modify "JITSI_HOST" in index.html scripts to point to your Jitsi Meet server .
  • You may also want to edit index.html to change/remove the link(s) to this repository and/or my Twitter profile .
  • new setup instructions TBD

Make sure you keep the distinction between your Jitsi installation and your Calla installation clear. You can conceivably run them on the same server, but I won't be digging into customizing a Jitsi installation enough to figure that out, so my setup has them on separate servers.

Docker-compose installation

  • Set up Jitsi Meet using docker-compose: Jitsi Self-Hosting Guide - Docker.

  • Allow CORS access by adding the following two lines to the top of ${CONFIG}/prosody/config/conf.d/jitsi-meet.cfg.lua (you may need to start jitsi once to generate the file):

      consider_bosh_secure = true
      cross_domain_bosh = true
    
  • git clone this repository into the Calla folder under the same ${CONFIG} directory as jitsi.

  • Edit the jitsi docker-compose.yml to add the following service section:

      services:
          # Calla
          calla:
              image: nginx:alpine
              volumes:
                  - ${CONFIG}/Calla/js:/usr/share/nginx/html
              command: sh /usr/share/nginx/html/entrypoint.sh
    
  • Add additional environment variables as necessary:

              environment:
                  - JITSI_HOST=jitsi.example.com
                  - JVB_HOST=jitsi.meet
                  - JVB_MUC=muc.jitsi.meet
    
    • The default JITSI_HOST will be jitsi., where calla is served at
    • The default JVB_HOST will be jitsi.meet; this should be the name of the internal docker network you used in your docker-compose.yml
    • Set JVB_MUC to be the value of muc.${JVB_HOST}
  • Add any additional reverse proxy configurations.

  • Start Jitsi and Calla: $ docker-compose up -d

CONTRIBUTING

Conduct

First, please read the Conduct Policy.

Contributions

If you think you can be a polite person in accordance with the Conduct Policy, I'd be more than happy to add anyone who asks as a contributor. Just email me your profile info and a brief description of what you'd like to work on.

Artwork

Oh man, let's go nuts! I would love to see a wide variety of tilesets for rooms and avatars. Maybe customizable clothing and character features.

  • You can use Tiled to create a tilemap.
  • You can do multiple layers.
  • You can set blocks as non-walkable by opening your Tile Set, selecting the unwalkable block, and adding a custom property to it. Create a boolean value named "Collision", and set its value to "true". All instances of that tile will now be solid on your map.
  • Save your .tmx file to \data\tilemaps\.tmx.
  • Save your .tsx file to \data\tilesets\\.tsx.
  • And that's it! Calla reads Tiled files directly.

Testing

The QA team is the software development team's best friend. Testing releases and filing issues is a huge amount of important work.

Documentation

IDK, I planned on just hacking this together as I went, but I will probaby write some notes on whatever I've done along they way. Let me know if anything is particularly unclear and I'll write something about it.

Client

I'm pretty happy with how the client is working right now, but anyone is free to self-service add features. But check the Issues nonetheless.

Server

I'm currently running a VM on Azure with 2 virtual CPUs and 4 GiB of RAM. Operating System is Ubuntu 18.04. This will cost me about $100/mo.

I set the server up using the Jitsi quick-start instructions (Actually, I followed This video on YouTube, but the directions are largely the same, I just found the video nice to see what to expect for results from each command).

There's no backend for Calla. All communication goes through Jitsi, even the data specific to the "game" is serialized through Jitsi. Eventually, I'd like to setup a backend, but for the basics of spatializing Jitsi, it's not necessary.

Comments
  • Speaker volume (Whisper - Shout)

    Speaker volume (Whisper - Shout)

    It should be possible to set how loud you're speaking. The most quiet non-mute setting would make you audible only to users in squares adjacent to yours. The loudest setting would make you audible to all users within a given max radius which could be set by room administrators.

    enhancement 
    opened by DRich222 17
  • Potential audio optimizations

    Potential audio optimizations

    Love this project!

    Seems there may be ways to tweak the noise cancellation features of Jitsi Meet that are causing issue: https://community.jitsi.org/t/higher-audio-quality/31441/6

    Have any of these been attempted yet?

    enhancement 
    opened by patcon 12
  • One server or two?

    One server or two?

    I'm trying to install Calla and am running into issues, so I'm re-reading the instructions and am having trouble figuring out whether I need to two servers (one for Jitsi and one for Calla) or just one server? Based on this...

    Make sure you keep the distinction between your Jitsi installation and your Calla installation clear. You can conceivably run them on the same server, but I won't be digging into customizing a Jitsi installation enough to figure that out, so my setup has them on separate servers.
    

    ...I'd say it was two servers, but then when I read the instructions it looks like they're living on the same server, e.g.

    
    Edit the jitsi docker-compose.yml to add the following service section:
    
      services:
          # Calla
          calla:
              image: nginx:alpine
              volumes:
                  - ${CONFIG}/Calla/js:/usr/share/nginx/html
              command: sh /usr/share/nginx/html/entrypoint.sh
    

    Should I have them on the same server or separate servers? Also is there a way to install Calla other than using Docker?

    opened by gbob81 11
  • No

    No "<" visible to get to "raw" jitsi interface

    README says

    If you need to change your microphone settings, click the < arrow in the menu in the upper right corner of the window to hide the map view and give you full access to the Jitsi Meet interface.

    and IIRC it was there. But now for me I just have a menu bar on top and I found no way to hide away Calla interface and get into "raw" jitsi.

    Here is how it looks for me: DeepinScreenshot_select-area_20200430122559

    using chromium Version 79.0.3945.130 (Developer Build) built on Debian bullseye/sid, running on Debian bullseye/sid (64-bit)

    bug documentation 
    opened by yarikoptic 11
  • Possibility of pure client-side implementation (i.e. no ASP.NET)?

    Possibility of pure client-side implementation (i.e. no ASP.NET)?

    Sean,

    So glad to have found this. I was going to try to implement something like this myself, but I think it will be easier to work with Calla to build what I want instead of starting from scratch.

    However, I'd love to run this without any back-end. In the read-me, you say "There's no backend for Calla." However, it does seem to have some middleware C# code running in ASP.NET. Any idea how easy it would be to re-implement this using pure client-side JS for the entire front-end? Any tips you can give for such getting started with this kind of modification?

    This would allow zero-cost installations for low-traffic sites that use meet.jit.si plus free hosting (such as the free tier of Firebase).

    opened by nathankopp 9
  • Determine max concurrent users

    Determine max concurrent users

    The limiting factors on the number of users that can be present in the system:

    • Jitsi Meets limits
    • Avatar/map rendering.
    • Spatialization parameter calculation.

    Once the nominal max is determined, display it as a subscript on the User List button.

    enhancement 
    opened by capnmidnight 9
  • Variables not declared

    Variables not declared

    Hi, in a lot of files there are variables not declared. I found 3 variables in CallaClient.js https://github.com/capnmidnight/Calla/blob/2a6d97025810355a1a5d7324174226d3fb42f423/Calla/src/CallaClient.js#L917

    maybe it is a typo.

    what is the solution on this case?

    other varaibles are in jquery.js lib: https://github.com/capnmidnight/Calla/blob/2a6d97025810355a1a5d7324174226d3fb42f423/Calla/lib/jquery.js#L10832 my solution is:

    const define = typeof(define) == 'undefined' ? null : define;
    if ( typeof define === "function" && define.amd ) {
    	define( "jquery", [], function() {
    		return jQuery;
    	} );
    }
    
    

    I found other variables not declared: ambisonicOrder: https://github.com/capnmidnight/omnitone/blob/7a459630fce52797ff5b9d8725b1e71977d5d5a7/src/hoa-rotator.js#L350

    mode: https://github.com/capnmidnight/omnitone/blob/7a459630fce52797ff5b9d8725b1e71977d5d5a7/src/foa-renderer.js#L127 https://github.com/capnmidnight/omnitone/blob/7a459630fce52797ff5b9d8725b1e71977d5d5a7/src/hoa-renderer.js#L125

    options: https://github.com/capnmidnight/resonance-audio-web-sdk/blob/8a666fadf4209ea6d524ac6af0cdfcf1f86a4dd0/src/encoder.js#L213

    can you tell me how I can solve this list of errors? in this way it is possible to import the lib inside a reactjs project, without disabling the errors in package.json thank you very much

    opened by manang 8
  • suitable tilesets

    suitable tilesets

    Hi, I have gathered some suitable tilesets from itch.io:

    • https://pipoya.itch.io/pipoya-rpg-tileset-32x32
    • https://stealthix.itch.io/rpg-nature-tileset
    • https://guttykreum.itch.io/field-of-green
    • https://beast-pixels.itch.io/overworld-tileset-grass-biome (this is 16x16, but I really like it)

    There are also some avatars available:

    • https://pipoya.itch.io/pipoya-free-rpg-character-sprites-32x32

    these are enemies, but seems to be usable too:

    • https://pixel-frog.itch.io/pixel-adventure-1
    • https://pixel-frog.itch.io/pixel-adventure-2

    There is definitely lot of stuff to take from itch.io.

    I think I can volunteer to add code which will make these live, but I am not sure how to test it without my own jitsi meet instance. It's possible to test it somehow from localhost?

    enhancement 
    opened by severak 8
  • wrong MIME type for js scripts on meet.primrosevr.com

    wrong MIME type for js scripts on meet.primrosevr.com

    When I visit the example installation, I get a couple of errors in the JS console and it won't load the game.

    Loading module from “https://meet.primrosevr.com/scripts/game.js” was blocked because of a disallowed MIME type (“text/plain”).

    $ curl -I https://meet.primrosevr.com/scripts/game.js  | grep content-type
    content-type: text/plain; charset=utf-8
    
    opened by jvns 6
  • build calla lib

    build calla lib

    Hi, I'm trying to compile the calla lib on my pc (mac os x)

    my steps:

    git clone https://github.com/capnmidnight/Calla.git cd Calla git submodule init git submodule update cd Calla npm install npm run build

    Inside package.package I corrected: "build": "copy README.md .. && rollup -c --environment BUILD:production", to "build": "cp README.md .. && rollup -c --environment BUILD:production",

    but I obtain the following error:

    `npm run build

    [email protected] build /Users/manangel/collab/calla/node_modules/calla_lib/Calla cp README.md .. && rollup -c --environment BUILD:production

    src/index.js → dist/calla.js, ../Calla-Site/scripts/lib/calla.js, dist/calla.cjs.js... [!] Error: Could not resolve '../omnitone/src/omnitone.js' from lib/resonance-audio/src/listener.js Error: Could not resolve '../omnitone/src/omnitone.js' from lib/resonance-audio/src/listener.js at error (/Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:5211:30) at ModuleLoader.handleResolveId (/Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:18258:24) at /Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:18250:22 at async Promise.all (index 0) at ModuleLoader.fetchStaticDependencies (/Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:18248:34) at async Promise.all (index 0) at ModuleLoader.fetchModule (/Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:18225:9) at async Promise.all (index 0) at ModuleLoader.fetchStaticDependencies (/Users/manangel/collab/calla/node_modules/calla_lib/Calla/node_modules/rollup/dist/shared/rollup.js:18248:34) at async Promise.all (index 0)

    npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: cp README.md .. && rollup -c --environment BUILD:production npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. `

    How can I solve this issue? Thanks Angelo

    opened by manang 5
  • Installation instructions

    Installation instructions

    I appreciate the warning: "NOTE: This project is currently going through an overhaul in how it is setup." But I'm wondering if the setup instructions could need an intermediate update:

      services:
          # Calla
          calla:
              image: nginx:alpine
              volumes:
                  - ${CONFIG}/Calla/js:/usr/share/nginx/html
              command: sh /usr/share/nginx/html/entrypoint.sh
    

    I don't think that entrypoint.sh file exists in that position.

    PS: Super cool project!

    opened by malb 5
Owner
Sean T. McBeth
He who is named Destroyer of Bug Lists, Holder of The Accursed Scepter of JavaScript, Lord of The Desk, First of His Name.
Sean T. McBeth
Shikimori.ts - JavaScript & TypeScript wrapper for shikimori.one

shikimori.ts shikimori.ts - JavaScript & TypeScript wrapper for shikimori.one Features Full TypeScript support Support all platforms Easy to use Table

null 5 Sep 15, 2022
Create explorable explanations and interactive essays.

Tutorials | Examples | Docs | Chatroom | Mailing list | Twitter What is Idyll? For an introduction to Idyll, API reference, examples, and tutorials, p

Idyll 1.9k Dec 27, 2022
Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Travel Lovers Table of Contents Description Tools Used Installation Instructions Usage License Tests Questions Description Travel Lovers is an applica

Nicholas Nolen 5 Aug 31, 2022
A platform detection library.

Platform.js v1.3.6 A platform detection library that works on nearly all JavaScript platforms. Disclaimer Platform.js is for informational purposes on

BestieJS Modules 3.1k Dec 31, 2022
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

List.js Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on

Jonny Strömberg 10.9k Jan 1, 2023
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

MixItUp 3 MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove D

Patrick Kunka 4.5k Dec 24, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar

Hootsuite 3.6k Dec 14, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 1, 2023
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
Browser fingerprinting library with the highest accuracy and stability.

FingerprintJS is a browser fingerprinting library that queries browser attributes and computes a hashed visitor identifier from them. Unlike cookies a

FingerprintJS 18.1k Dec 31, 2022
A benchmarking library. As used on jsPerf.com.

Benchmark.js v2.1.4 A robust benchmarking library that supports high-resolution timers & returns statistically significant results. As seen on jsPerf.

BestieJS Modules 5.3k Dec 28, 2022
autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.

What is autoNumeric? autoNumeric is a standalone Javascript library that provides live as-you-type formatting for international numbers and currencies

AutoNumeric 1.7k Dec 16, 2022
Solid.js library adding signaling to built-in non-primitives

This package provides signaled versions of Javascript's built-in objects. Thanks to it, all theirs properties will be automatically tracked while using standard API.

Maciej Kwaśniak 40 Dec 29, 2022
This library was designed to be used in SPA framework wrappers for the FingerprintJS Pro Javascript Agent

Framework-agnostic SPA service wrapper. Use it to build a FingerprintJS Pro wrapper for your favorite framework.

FingerprintJS 12 Sep 3, 2022
ChelseaJS - a Javascript library for creative, generative Coding

ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)

Prakrisht Dahiya 26 Oct 6, 2022
Estrela - a JavaScript library for building reactive web components inspired by lit

Estrela ⭐ Full Reactive Web Components Estrela is a JavaScript library for building reactive web components inspired by lit. Just like Lit, Estrela is

null 50 Oct 31, 2022
In this project, you can create optional rooms and people can talk in the rooms

CodeTalk In this project, you can create optional rooms and people can talk in the rooms. Login and Registration page Login page welcomes us. If you d

Nazlı 3 Mar 12, 2022
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

Austin Michaud λ 497 Dec 21, 2022
Meet Pompom, the Proof of Meeting Dapp 🍭 (ETHGlobal x Polygon)

POMPOM - Proof of Meeting Meet PomPom, a Proof of Meeting Dapp cooking for ETHGlobal Polygon Hackaton. Contracts are created in separated repo. Find t

WebX DAO 11 Oct 22, 2022
A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.

SoundJS SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, inclu

CreateJS 4.3k Dec 31, 2022