holtwick/briefing

🔮 Secure direct video group chat

I am an enthusiastic software developer for web, mobile and desktop applications based in Germany. Currently I create and distribute free and commercial applications. Previously I have worked for large companies like Evernote and Cellular.

My goal is to develop appealing applications for communication and knowledge storage while creating the best possible privacy solution.

To get in touch follow me on Mastodon or Twitter, read my blog or write an email.

briefing's Issues

Participant names

I just discovered briefing (I was about to embark on a pretty much identical product) and really love it! One thing that would be great is the ability to set a screen name. This would be particularly helpful for group chats where people have their video turned off but still be able to identify who’s talking.

Password protection and additional E2E encryption layer

Scenario

Somebody guesses the room name and can listen or manipulate the conversation.

Solution

1. When creating a new room it has to be flagged as either public or private
2. If private the clients have to negotiate via WebRTC if they trust each other, usually by proving to know a common secret

Discussion

• What happens if the signaling server is compromised?
• Prevent brute force attacks

Killerfeatures ;)

• - Blur background #17
• - Emojis #11
• - Movie like effects, like freezing frames and titles
• - Audio transcriptions
• - 3D masks
• - Other filters like painting like etc.
• - Drag and drop media like images, audio, video; playback synchronous on all devices
• - https://giphy.com/
• - Whiteboard (ExcaliDraw)

Camera and Audio device not showing

I tried running Ionic Capacitor on your platform and for some reason, it does not show the Camera and Audio options. The buttons are working (sort of) but the names of the hardware arent shown.

It works just fine on PWA. Could you please help me out here?

Notifications on incoming calls

Use PWA notification features: https://developer.mozilla.org/de/docs/Web/API/PushManager

Extend signal server to handle these.

Setup TURN server

See #4

Zoom on face(s)

Scale and position the video in a way that the face is placed perfectly on the viewport

Custom signaling server

• Use Peer School Signaling Server.
• Introduce a custom domain like signal.brie.fi
• Add properties like #1 and creation time. Creator should also provide a secret in order to be able to change settings or identify himself.
• The server should expose some stats, like total of rooms, number of participants.

Where.by emoji & chat feature

https://medium.com/the-making-of-whereby/party-of-five-rules-for-working-from-home-a5b125078b42

Page layout / Tiles

Allow multiple ways to arrange the videos on the view port:

• Either show the full signal or fill the full container
• Center the video on the recognized face, see https://github.com/justadudewhohacks/face-api.js
• Fullscreen
• Different sizes

Video and audio not working on Firefox mobile

Sadly this is a known issue that won't be fixed any time soon:

mozilla-mobile/firefox-ios#3951

Screen sharing

Strengthen user authentication

Rachets:

• libolm Apache2
• libsignal GPL3

Present information:

• Display DTLS key info? https://webrtc-security.github.io/#4.3.

This all relates to #1 where a secure channel can be established to then try to proof the security of the WebRTC connection itself automatically.

Learn from https://github.com/yjs/y-webrtc/blob/master/src/y-webrtc.js#L294

iOS client features

• Integrate with call infrastructure like Signal does
• Notifications
• Open directly in app
• Fix layout issues
• Picture in picture

Add internal stats about bandwidth and video

See feross/simple-peer#51

Related #18 #5

PWA / Electron

Create versions for some AppStores:

Windows

An Electron build will be required, because the PWAs for the AppStore are still hooked to the old EdgeHTML missing some features and making development hard. See:

PWAs on Windows 10 (EdgeHTML): With the move to Microsoft Edge (Chromium) from EdgeHTML, the underlying web platforms used by PWAs are not the same. Edge (Chromium) PWAs are installed from and run within the browser. Edge (EdgeHTML) PWAs run as Universal Windows Platform (UWP) applications and use the older EdgeHTML web platform. If you require Windows 10 API access for your PWA, this EdgeHTML documentation is for you. If your goal is cross platform support without Windows specific API access, please head over to the Microsoft Edge (Chromium) PWA documentation. - Microsoft

macOS

Custom app or Electron

iOS

Custom app or Cordova

Android

WebAPK and the like

---

Documentation for installing PWA in general:

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Developer_guide/Installing

Serverless P2P

• https://libp2p.io from https://ipfs.io/

Mirror own video

https://christianheilmann.com/2013/07/19/flipping-the-image-when-accessing-the-laptop-camera-with-getusermedia/

https://stackoverflow.com/questions/14455844/is-that-possible-to-make-video-mirrored

Update wording and descriptions

Wording

• Consider using "private" in place of "anonymous". See this comment from cryo

Security

• Make clear where are the limits and which servers are involved
• Inform about other technologies like Tor/VPN

Can't switch between video sources

Hey!

Thanks for making your work open source. Happy to contribute to turn servers in future.

So I've noticed that on mobile I can't switch between sources as shown in the screenshot below. Only the front camera works. Phone is Huawei P20 Pro

Screenshot

Store properties for rooms on signal server

Add properties like #1 and creation time. Creator should also provide a secret in order to be able to change settings or identify himself.

See #3

Option to persist settings

It would be nice to have the same settings again when coming back. It should be sufficient to have them stored globally and not per room.

It will require some changes, as smart retrieval of camera and audio and fallbacks. Basically a reload of the page should result in the same environment.

Clarifying the legal situation

• Bundesnetzagentur
• BSI

Chat

It would be really cool to see a chat feature in this platform.

The way to do it whilst maintaining anonymity is by allowing a user to set a nickname thereby allowing everyone to know who texted what.

Safari video

Video on Safari cannot be resized like in other browsers i.e. aspect ratio is always kept and only the height can be modified. Therefore it is required to either keep the aspect ratio or clip the rest of the video.

Move settings into config.js

Make it simpler to install own instance by moving configurable stuff into config.js

• iceServers
• peerSettings

Install how to

Very nice work. Clean and simple.

Im trying to build the client and get it working but experiencing problems. Built and run as
serve dist, but cannot get to the web folder neither a room with direct /roomname. If i run from web folder then only the home page comes up.

Is there any simple how to install guide. If i have succeeded would hv done one.

thanks again for the very nice project.

Audio quality

Find optimal settings for audio quality.

• https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints
• https://mdn.mozillademos.org/en-US/docs/Web/API/Media_Streams_API/Constraints$samples/Example_Constraint_exerciser?revision=1588638

See #8

E2E encrypted SFU

https://jitsi.org/news/e2ee/

https://webrtchacks.com/true-end-to-end-encryption-with-webrtc-insertable-streams/

Switching between video and screenshare

Hello buddy. first of all congrats about yout project.
im testing it in https://brie.fi/ng in computer (windows + chrome) and its ok with video and audio. but when i switch from camera to screenshare my audio deaseper and then when i return to camera then the audio goes back..

by the way when we in computer, and the screen is sharing then the screen is cropped..

Adjust the streaming and bandwidth quality on the fly

https://webrtc.github.io/samples/src/content/peerconnection/bandwidth/

Server security

• Prevent DoS attacks
• Prevent brute force
• Prevent large payload

Sources:

• https://stackoverflow.com/questions/20435553/how-to-protect-against-distributed-denial-of-service-attacks-in-node-js-with-soc
• https://www.freecodecamp.org/news/how-to-secure-your-websocket-connections-d0be0996c556/

how to build in nginx?

Make PWA only for better install

https://web.dev/progressive-web-apps/

https://www.pwabuilder.com/

blue screen in firefox

just opened brie.fi/ng with firefox and ended up in a blue screen. but this has nothing to do with brie.fi/ng but witt my damn firefox installation. maybe someone knows why...

Debugging infos

Give users the possibility to send in error logs when something is not working correctly.

Custom made or Sentry? To be decided...

PWA - Camera still in use after disconnecting from the room

In PWA (/ngs) after disconnecting from the room, camera shown as still active and been used until the page is manually reloaded.

On /ng this doesnt happen since http re-writes reload it to a new page.

Attached screenshot shows the camera is still active after disconnected.

PWA IOS compatibility

PWA looks perfectly fine on android, and also perfectly fine in IOS safari. But when added to home screen in IOS, media access seems unavailable.

Can this be IOS restriction at this moment ?

Loosing connections

• When switching between apps on iOS audio gets lost
• After a while seeing destroyed peers

Record session video

https://webrtc.github.io/samples/src/content/getusermedia/record/
https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/record/js/main.js

Competition

WhereBy former apper.in

Resources

Module Docs

• npm simple-peer is used in Briefing

WebRTC

• Samples and code
• Video Channel

Bandwidth

• SDP modifications
• Example Code
• npm sdp-transform
• Stackoverflow ^1

Media

• Contraints and quality
• Example to test settings
• Stackoverflow ^1

General

• Simple Samples

Similar Projects

• Meething
• PeerCalls
• ZipCall.io

Blur person background

https://github.com/tensorflow/tfjs-models/tree/master/body-pix#bodypixdrawbokeheffect

Integrate with Calendar

briefing: scheme/protocol

For native apps: #35

briefing:///room/<roomID>

• Windows
• Apple
• Electron

Custom coturn installation

Avoid using public services

• Install coturn server
• Activate STUN
• Activate TURN only on demand

Moderated Conference

In certain scenarios like virtual classes, it is useful to have a moderator that manages when participants should talk or not.

First of all it would be useful to give a hand sign, when somebody wants to speak but not disturb others that are still speaking like raising the hand in the class. See Jitsi or #11

Then the moderator should be able to mute everybody but the speaker and himself. See Jitsi "Mute everybody else". But the moderator should also be able to unmute people. Every participant that has been muted by somebody else should receive a message like "Person A moved on stage by Person B" and should be able to unmute himself any time.

For common questions it should be possible to do a quick poll as well, the simplest would be "thumb up" or "down". Or undecided. Or starring between 1 to 5 stars. Or multiple choice. Lend some inspirations by BigBlueButton

Transcription / Speech Recognition - offline only!

Waiting for https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

Tested Mozilla's Deep Speech. It is very promising, but not accurate enough yet. It also misses inter punctuation and is only available in English. The big Speech-to-Text provider do a better job, but aren't an option due to privacy concerns.

Configure video and audio

• Allow changing media streams
• Select or switch video and audio sources
• When setting camera or microphone to mute do note stream any more
• Adjust the streaming and bandwidth quality on the fly

PWA join-in url

PWA joinin url still gives as https://brie.fi/ng/roomname

Is there a way to send it in /ngs/ format