niklabh/mattermost-plugin-webrtc-video

A webrtc video call plugin for mattermost

Mattermost WebRTC video/audio call plugin

This plugin add video call and group audio channel feature to Mattermost. The plugin uses WebRTC protocol built into the browser, but you need to provide and configure your own Signalhub, STUN and TURN servers.

Features

Add ability to do webrtc video call to another user and join a group audio channel. To start the call go to direct message. On top right click video icon. Allow permission to access microphone and camera. Other user will receive a incoming call.

Usage

Configure stun/turn and signalhub servers setting as mentioned below. To start video call go to direct message and click on the video call button on channel header button on top right:

Other user will see a incoming call:

To join audio channel click on unmute icon on top left. To start listening click on speaker icon.

Installation

1. Go to https://github.com/niklabh/mattermost-plugin-webrtc-video/releases to download the latest release file in .zip or .tar.gz format.
2. Upload the file through System Console > Plugins > Management, or manually upload it to the Mattermost server under plugin directory. See documentation for more details.

Configuration

Please add turn stun and signal hub servers in settings. Go to System Console > Plugins > GitHub and add turn/stun and signalhub servers:

publicly available stun servers:

stun:stun.l.google.com:19302
stun:stun1.l.google.com:19302
stun:stun2.l.google.com:19302
stun:stun3.l.google.com:19302
stun:stun4.l.google.com:19302
stun:stun01.sipphone.com
stun:stun.ekiga.net
stun:stun.fwdnet.net
stun:stun.ideasip.com
stun:stun.iptel.org
stun:stun.rixtelecom.se
stun:stun.schlund.de
stun:stunserver.org
stun:stun.softjoys.com
stun:stun.voiparound.com
stun:stun.voipbuster.com
stun:stun.voipstunt.com
stun:stun.voxgratia.org
stun:stun.xten.com

publicly available turn servers:

turn:numb.viagenie.ca
turn:192.158.29.39:3478?transport=udp
turn:192.158.29.39:3478?transport=tcp

url: 'turn:numb.viagenie.ca'	
credential: 'muazkh'	
username: '[email protected]'	

url: 'turn:192.158.29.39:3478?transport=udp'	
credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA='	
username: '28224511:1379330808'	

url: 'turn:192.158.29.39:3478?transport=tcp'	
credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA='	
username: '28224511:1379330808'

publicly available signalhub server

https://baatcheet.herokuapp.com

Build

Build your plugin:

make

This will produce a single plugin file (with support for multiple architectures) for upload to your Mattermost server:

dist/mattermost-webrtc-video-<version>.tar.gz

Contributions

Contributions are welcome

Todo:

• Bug fixes
• Signal using mattermost redux
• turn off video
• mute audio
• end call from source works

Latest Release

https://github.com/niklabh/mattermost-plugin-webrtc-video/releases/

mattermost-plugin-webrtc-video's Issues

Add to Plugin Marketplace

Hi @niklabh and @dankeder,

You did a great work with this plugin 👍 Given that Mattermost lacks a build-in video conference feature, it's good the have the functionality in a plugin.

Would you be interested on submitting your plugin to the Plugin Marketplace? You can find the process for submitting your plugin here.

Document the best way how to install the plugin

What's the recommended way of installing the plugin with a Mattermost Docker installation?
Or do you maybe even have an example compose file or Ansible role that can be used?

Dist folder missing (no Mattermost tar.gz v1.0.1 version released!)

Hi,

When I try to upload the new version (using tar.gz, zip definitely won't work) in the admin console, yes I enabled uploading of plugins.

I do get an error message:

Unable to generate plugin webapp bundle.

Other plugins do work, but not your webrtc plugin.

I'm using Mattermost Version: 5.21.0 (shipped with GitLab).

Despite the error message. I do see the "WebRTC Video" menu-item in the menu:

Mattermost log file gives:

{"level":"error","ts":1588192715.4799285,"caller":"mlog/log.go:175","msg":"Unable to generate plugin webapp bundle.","path":"/api/v4/plugins","request_id":"crojkygactbwbjhwmnhcpw7wzr","ip_addr":"192.168.2.166","user_id":"4qff45rsefgiixufe1juf4riyh","method":"POST","err_where":"installExtractedPlugin","http_code":500,"err_details":"unable to copy webapp bundle directory: mattermost-webrtc-video: stat /var/opt/gitlab/mattermost/plugins/mattermost-webrtc-video/webapp/dist: no such file or directory"}

dist folder indeed is missing! And not created during install.

Regards,
Melroy van den Berg

Push-to-talk

A push-to-talk feature, where voice is only transmitted when holding down a key, stopped when released would be useful.

The ability further to enforce the usage of it in certain voice chats created if wanted would also be a great permission scheme.

Make mute and turn off video button work

Mute and toggle video buttons are not working. Please make them work,

Does not work at all

OS: Mac and Linux (Fedora)
Browser: Chrome

• Does not ask for camera or microphone permissions
• Does not send any packets to defined stun and turn address (wireshark).
• Call window shows connecting, but nothing pops up on the other side.
  Would you like to help me to debug this issue?
  

When making a repeated call, video is`n displayed and audio is`n played

Steps to reproduce:

1. Start a video call from user A to user B;
2. End the video call between users A and B;
3. Repeat the call from user A to user B;
   Result: Video is not displayed and audio is not played.

p.s. Sorry for Lang

Disable voice channel

Hi thanks for this amazing plugin.
Is it possible to disable voice channel?

Add user profile picture on call popup

User should be able to see user profile picture when call is coming

Plugin Channel Header Component Changes

Mattermost recently made an update to the Plugin component location changing from the channel header to the new App Bar.

If your plugin registers an icon in the channel header, you will need to make some minor changes to your plugin to smoothly transition to this new UI. We’ve made it simple to register both a channel header icon and add the new App Bar registration simultaneously. This way, your plugin will work on older servers without the App Bar (using the channel header), and when the App Bar is enabled on a server. The App Bar component will automatically be used instead. You can use this PR as an example of a plugin implementing an App Bar icon.

Please see this forum post for more details on this change and reach out to us on our Integrations and Apps channel with any questions.

Fix call to navigator.mediaDevices.getUserMedia() not work

I use the new release (0.3.0) but i still get
"Uncaught TypeError: Cannot read property 'getUserMedia' of undefined." error
I install it on Mattermost EC2. and I use the webrtc version 0.2.0 in local it works with out any error.
So I change the version on EC2 to 0.2.0 but it still get the same error.
I see the code it should not cause this error so i don't know how to make it work
Helpppppp!!!

my config

error screen shot

error code

Don't fallback to default stun/turn servers if they are configured

If you configure stun and turn server the hardcoded fallbacks are still used the configured settings only added to the iceServers array see:

mattermost-plugin-webrtc-video/webapp/src/actions/index.js

Lines 123 to 135 in e3513a3

	if (stunServer) {
	iceServers.push({
	url: stunServer,
	});
	}
	if (turnServer && turnServerUsername && turnServerCredential) {
	iceServers.push({
	url: turnServer,
	username: turnServerUsername,
	credential: turnServerCredential,
	});
	}

and

mattermost-plugin-webrtc-video/webapp/src/components/modals/audio_group_call/audio_group_call.jsx

Lines 150 to 162 in e3513a3

	if (stunServer) {
	iceServers.push({
	url: stunServer,
	});
	}
	if (turnServer && turnServerUsername && turnServerCredential) {
	iceServers.push({
	url: turnServer,
	username: turnServerUsername,
	credential: turnServerCredential,
	});
	}

I have set up stun and turn server for this and don't want to use any external services. Do you prefer an extra config option for this or just drop the default config if any stun/turn server is configured?

Not working

This is not working in any mattermost version i had 5.1.7 5.1.8

Unable to install

Mattermost Version: 5.21.0
Database Schema Version: 5.21.0
Database: postgres

Either via UI or command line install :

/opt/mattermost/bin/mmctl plugin add mattermost-webrtc-video-1.0.3.tar.gz mattermost-webrtc-video-1.0.3.tar.gz
Unable to add plugin: mattermost-webrtc-video-1.0.3.tar.gz. Error: AppErrorFromJson: model.utils.decode_json.app_error, body: <html>
<head><title>413 Request Entity Too Large</title></head>
<body bgcolor="white">
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx/1.14.0 (Ubuntu)</center>
</body>
</html>

Unable to add plugin: mattermost-webrtc-video-1.0.3.tar.gz. Error: AppErrorFromJson: model.utils.decode_json.app_error, body: <html>
<head><title>413 Request Entity Too Large</title></head>
<body bgcolor="white">
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx/1.14.0 (Ubuntu)</center>
</body>
</html>

Ability to add multiple turn and stun servers in settings

Currently we can add 1 turn and 1 stun server. Provide ability to add multiple turn and stun servers

Can this project still update ?

Hello, there,

Voice channel in mattermost is really missing

can u tell me if this plugin still alive ??

Shows current user in group call

The list of users on the LHS doesn't show the current user, if (s)he is connected. This is confusing as it unclear to a user if the successfully connected or not.

Use mattermost for signalling rather than signalhub

• For webrtc connection signalling is required from one user to another.
• mattermost can be used to send this data. Need to investigate if mattermost can be used to send data between plugins.
• signalhub can be removed.

Better Styling.

• Add Better style to video player.
• Add better frame to UI
• Control buttons should be styled good.

Screen Sharing without video?

Hi,

Is it possible to have screen sharing without video (camera or without starting a video session?)

Thank you.

Please detail build steps.

Really like idea of vendor free video call from mattermost, but pity that plugin is not working, tried to checkout and build it my self to see whats up, but

make clean all

is failing. Could you detail, how to build this project. I'm getting this error :

vincentas$ make clean all
go: github.com/mattermost/[email protected]+incompatible requires
	willnorris.com/go/[email protected]: invalid pseudo-version: does not match version-control timestamp (2019-04-22T23:49:45Z)
make: build/bin/manifest: Command not found
build/setup.mk:13: *** "Cannot parse id from plugin.json".  Stop.

Building plugin version 1.0.1 in docker-make fails

Hi,

I cannot build the current version using the provided dockerfile and the docker-make script.
Here's the output I'm getting:

cd webapp && /usr/bin/npm install
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=lodash&version=4.17.11 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN tar write after end
npm WARN notice [SECURITY] set-value has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=set-value&version=0.4.3 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] set-value has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=set-value&version=2.0.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] serialize-javascript has the following vulnerability: 1 moderate. Go here for more details: https://www.npmjs.com/advisories?search=serialize-javascript&version=1.7.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-05-07T19_02_02_968Z-debug.log
make: *** [Makefile:95: webapp/.npminstall] Error 1

Signalhub config sometimes ignored

Hi

Sometimes users get the DEFAULT_SIGNAL_HUB_URL instead of the URL from the config. This leads to connection problems.

[feature request] WebRTC Screen sharing

Hi,

After the features to close the call again, one of the missing features would definitely be screen sharing by using this plugin. Other alternatives like BigBlueButton or Jitsi for example has the ability to share the screen to others.

I know it would be technically possible, eg by using a browser plugin if required (ideally no plugin requirement).

References:

• https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-sharing
• https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing
• https://flashphoner.com/how-to-test-screen-sharing-in-a-webrtc-browser/

Thanks in advance!

Regards,
Melroy van den Berg

404 not found at mattermost-webrtc-video_0356e478411fcf3b_bundle.js

Hello.
My plugin doesn't work due to 404 error with problem-webrtc-video_0356e478411fcf3b_bundle.js
I'm not familiar with plugins yet, so I need your help.

this.connectToSwarm() could get called before this.setState() updated the state

as this.setState() only requests an state change(0) the following this.connectToSwarm()(1) could be called before this.state is updated, this will lead to problems if the assumtion here is that this.state is updated in this.connectToSwarm()

0: https://reactjs.org/docs/react-component.html#setstate
1:

mattermost-plugin-webrtc-video/webapp/src/components/modals/audio_group_call/audio_group_call.jsx

Line 97 in e3513a3

this.connectToSwarm(userId);

Create a full screen button.

Add a full screen button which can make video full screen.

Make it work on mattermost desktop client.

• Plugin ask for permission to enable video and audio on browser.
• Mattermost desktop client built on electron doest not ask this permission hence the screen remains blank.
• Check if there is a way to make this work with web view not only on browser.

Audio configuration like Discord

Hello all,

something missing in mattermost is the audio chat like we can see on discord

can we use u plugin like the audio of discord, for sure, million of user will using it, no video just audio like discord do it.

create some channel audi, and talk on it id user want join the channel audio

exemple :

thanks all

Play a sound when call is coming.

• Play sound when there is a call.