Code Monkey home page Code Monkey logo

roll-call's Introduction

Roll Call

Roll Call is a completely freeπŸŽ‰ voice chat service with podcast quality recording.

Go ahead and use it: rollcall.audio

demo gif

Features Include:

  • Multi-party realtime audio calls.
  • Drag & Drop File Sharing.
  • Podcast quality recording.
    • We record each participant locally and send you the audio via the data channel instead of recording the compressed and often low quality realtime audio.

For more information on how to use Roll Call check out the FAQ.

Roll Call is entirely Open Source and can be embedded into your own web pages and web applications.

Chrome/Brave Only

Roll Call only works in last few releases of Chrome & Brave. This is not due to lack of testing or development work but because of bugs in Safari and Firefox. Roll Call sits at the intersection of browser audio and WebRTC support, it's a minefield for finding bugs burried deep in browser implementations. Even supporting Chrome takes some hacks.

Embedding

Roll Call can easily be embedded on your own website. The easiest way is with a script include.

<script src="https://cdn.jsdelivr.net/npm/roll-call@latest/dist/rollcall.js"></script>
<my-container>
  <roll-call call="myUniqueCallIdentifier"></roll-call>
</my-container>

Roll Call uses WebComponents. This means that you can use it like any other HTML element and manipulate its state with JavaScript.

Or, if you want to build it into the JavaScript bundle for your own app you can do so easily, but you'll need to handle loading a WebComponents polyfill for most browsers on your own.

const { Call } = require('roll-call')

let elem = new Call()
elem.call = 'myUniqueCallIdentifier'
document.body.appendChild(elem)

Once you require the script the elements are registered so you could also do something like this.

require('roll-call')

document.body.innerHTML += `<roll-call call="myUniqueCallIdentifier"></roll-call>`

To Develop

Download the code and run npm install.

If you want to do development run:

npm install
npm start

Try It Out

Roll Call is built and deployed automatically:

Wu-Tang Roll Call

The Rza,
the Gza,
Inspectah Deck,
Raekwon,
U-God,
Masta Killa,
Method Man,
Ghostface Killah,
and the late great Ol Dirty Bastard.

roll-call's People

Contributors

cheeaun avatar chromakode avatar feross avatar fotoverite avatar gesslerpd avatar greggb avatar kevincoleman avatar marcl avatar mikeal avatar pertrai1 avatar vladaspasic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

roll-call's Issues

Automatically build bundle.js before checkin

I have this setup locally but there are other projects, like the Node.js website, that automatically add a pre-commit hook to build the bundle.

So far I've been having to build the bundle manually after each PR. The npm start command is a little missleading because it makes the bundle work without actually building it for use in the tree.

Use webworker to create a ZIP file

Maybe it would be a good idea to generate the ZIP file on a separate thread, using WebWorkers, so it wont effect our UI performance in the browser.

We could never know how big this audio file could get, imagine if we record a conversation for an hour, or more, and try to zip it on the UI thread.

This also raises couple of questions, what is the file size limit, is there a limit, should we split the big file in chunks, and store them somewhere (IndexDB), and zip these chunks later in a folder?

Add tests

We should consider adding in basic ui and unit tests. Probably faster then loading the site each time to bundle and see changes.

Muting another user actually mutes your audio

I just spotted a bug when looking at the mute all issue (#38) and noticed that you can click another users's mute button and it mutes your own.

We should probably ghost (or remove?) other users mute icons and not allow them to be clickable. Perhaps better to just ghost them if the plan is to show whether remote users are muted or not.

Operation is not supported error when about to record audio

On my version of Mozilla browser, I get an error when trying to record a conversation. After a bit of digging, I found out that the problem is in the mimeType property we pass to the MediaRecorder, as audio/webm;codecs=opus is not supported by my browser.

We should maybe have a list of fallback types, that we support, and check if they are supported by using the MediaRecorder.isTypeSupported method. In my browser case, it has has support for audio/ogg.

Landing Page

Would a landing page for Roll Call be great?
I made one for my fork here, would love to contribute if needed πŸ˜„

Presentations

This was a feature I thought of a long time ago but never got around to.

Instead of screen sharing, which I've never seen work 100% reliably in any product, why not just drag-and-drop presentation files into the UI and present them.

The file could easily be shared with all the peers so they are looking at their own high-res copy and the presenter would just send RPC calls to change the position in the presentation files.

We could add video recording pretty easily on top of that using MediaRecorder as well.

License

Hi guys,
Is this based on MIT license? Can someone reuse the audio recording tech you guys are using?

Cheers~

Move to React js ?

As we start adding more features, and UI , I think it would be great if we move to React js + Redux ?

Distrortion / Bad sound

While testing rollcall I get distortions and bad sound. I like the simplicity, but the sound reliability needs to change for me to adopt it. Anybody know why this issue emerged and how to fix it?

Persistent settings

We need a UI for application level settings that persists them (into localStorage is the easiest).

  • Default name
  • Input device
  • Avatar image??

Custom room names and administration.

It'd be great if I could create my own room with a custom slug like rollcall.audio/myteam and protect it with a password.
If databases are going to be a problem, something can be done with tools like http://horizon.io/ i'm hoping.
Personally, one of the best things I like about roll call is the ability to run out of GitHub Pages and would love for it to remain that way.

Way to mute all sound from the webpage

Sometimes you need to do other things and you want to mute the sound on the page but not the entire computer/phone. What needs to be done to accomplish this?

Separate code concerns and add tests

Are you planning on fleshing out the app code structure a bit more? I'd like to see some separation of the UI and recording code into different modules from index.js. I appreciate it's early days but just thought it was probably worth doing early while the codebase is small.

Any thoughts on adding tests too? Feels weird raising a PR without any corresponding test code! πŸ˜„

ability to listen in without an input device

My computer has problems with line in:

Object {name: "DevicesNotFoundError", message: "", constraint: ""}

It would be good if this app could gracefully disable transmit for this case. This might also be useful for bots.

error at index page

hi below error appears on index page :

Error: Cannot find module 'filestream/write' from 'C:\Users\KingSlayer\Desktop\roll-call-master'
    at C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:46:17
    at process (C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:173:43)
    at ondir (C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:188:17)
    at load (C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
    at onex (C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
    at C:\Users\KingSlayer\Desktop\roll-call-master\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Allow people to set their own name

Right now the names are content-editable for each person, so every person on the call can say whatever they like about each person's name and it is only viewable to that person.

It would be nice if when I set my own name it shared that with the swarm and no longer made it content-editable.

The tricky part is have a storage system for this kind of data that gets shared with new participants as well as people who are already on the call.

Download/Export all channels from recording.

Default gain for remote callers to 0.10 or 0.20

The default gain for remote callers you are listening to is too high, it should definitely come down.

This should not apply to the person's own mic, only the remote callers.

The volume slider and the underlying waudio setting need to both default to this.

Text Chat

A simple text based chat interface would be great!

Maybe this should use something like hypercore https://github.com/mafintosh/hypercore for simple append-only synchronization. We could use simple signing (already implemented in the crypto underneath killa-beez) to verify that each message was from each person in the swarm.

Add visual instructions

It's not entirely obvious that what you should be doing in order to share the current room and have others call in is to copy/paste the url around.

Optionally, we could also have a "share" button.

Good First Fixes

Hey guys!

I am new to the world of open source and this project seems to be the one I am narrowing my focus on. Is there any nitty gritty stuff anyone knows needs to be done but just has not got around to it? I would like to help out in any way I can. Though, my JS knowledge is limited, but I hope to learn as much as possible by traversing through this projects source code.

Workflow: Live streaming call recording for many listeners.

I've actually done a fair amount of work on this already so apologies in advance if this seems like too much of a brain dump.

At scale, the only way to have a lot of listeners on a live stream is to not merge all of them into the same swarm network but to have a service provide the audio for streaming. This turns out to not be all that difficult.

  1. Send you own audio as well as all the remote audio streams to a single MediaRecorder instance.
  2. Stream the audio to a service that parses the .webm format.
    2.1 Service provides a resource GET /live/audiofile.webm.
    2.2 Every GET to this resource will be served the parsed header of the .webm file and then the latest parsed chunk as well as all subsequent chunks.

Because this requires a centralized service, and that service will need to handle considerable load, it should be something of an "add on" to the Roll Call recording experience. The workflow should be something like:

  1. User opens settings and sets "Enable Live Streaming"
  2. User inputs the URL of the service as well as their "token" so the services can control who is using them.

Just because this is an "add on" doesn't mean we can't build an amazing experience around it. Once we know what this "live audio file" URL is we can build a great experience. For instance, the "listen" page could have features like:

  • Record an audio question and send it to the call moderator.
  • Ask to be "Let in" to the call, allowing the call moderator to add people into the call dynamically and remove them.
  • Participate in live chat with the entire call or possibly just the moderator.

I'm curious what other people think about this feature and workflow. I can get up the service to this pretty quickly, I've already written all the code.

Mobile apps/support

I get it's a bit too early to think about this, but I hope its sure on the roadmap πŸ’―

File sharing

The underlying code is already there to easily share arbitrary files with everyone we just need to figure out what the UX should be around exposing newly shared files and downloading them.

Move to webpack

The way that we are using browserify and beefy seems like a case that webpack would be pretty good at. It could definitely speed up development mode, builds are starting to take a little too long.

Expose "hidden" features.

We have a variety of hidden features that need to be exposed explicitly or be made more discoverable.

Customized room names

You can use any string as a room name. This makes the urls nicer and more human readable. Additionally, if you are recording the call the name of the .zip file is set to the name of the room.

Recording delay is encoded into the file names.

The individual tracks produced by recording have the time in milliseconds they are delayed from the beginning of the recording. This is useful if a connection is slow or if someone connects into the call late.

Drag and drop files into the call.

Right now if you drop audio files into the call you can play them into the call.

A future version will also integrate file sharing as well.

Audio input source selection

I use an external microphone, having an option of this is very helpful.

I may be willing to do this but probably will not get to it within the next two weeks at least.

"Closed" calls.

The current workflow is that a room is open to whoever knows the name of the room.

This proposal would add another type of call, a "closed" call, where each new caller has to be "let in" by the person who created the room.

My initial thoughts on workflow would be:

  • Create a swarm instance and pull the publicKey.
  • Create an url ?call=${publicKey}.
  • When the swarm instance gets new connections they send either a text or voice message identifying them and the moderator decides whether or not to connect their audio and forward their signals into the swarm.

This will require some changes in killa-beez to be able to control when the swarm forwarding is enabled.

The URL will be pretty huge since it'll have the entire public key in it.

Unless we store the keyPair these rooms will only last as long as the person keeps the window open. This is ideal if the user wants privacy/security. In fact, this method of room creation doesn't require a room-exchange so it's even more private than the current default case.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.