[ 🆕 ] P2P Video Conference plugin

Showcase Plugins
1

Designed for Bubble, with one-click setup, without code or hundreds workflows and actions, yet providing useful states and events.
Free from third-party fees and constraints, offering a direct peer-to-peer connection where NO data passes through any servers whatsoever.

Features:

  • Video call for up to 10 users
  • Decentralized, no extra fees
  • Unlimited call time
  • Efficient Smart Compress
  • User-friendly integrated UI
  • Customizable
  • Responsive
  • Highlights noise (speaking) source
  • Screen Sharing

Coming Soon:

  • Blur Background
  • Full screen
  • Record & Save
  • Admin can Mute/Unmute anyone

Screenshot_2024-01-03_at_19.42.08
Screenshot_2024-01-03_at_19.42.081920Ă—950 56.8 KB

Demo: https://p2p-demo.bubbleapps.io/version-test/p2p_conference

Marketplace: P2P Video Conference Plugin | Bubble

Documentation

2 Likes
2

Here I am, with the risk of making a fool out of myself.
The plugin seems really awesome!
It’s just that even if I use your editor, or connect through my app.
I just cannot see anyone on video except for the connected user.
Is it me or is it a temporary bug?

1 Like
3

Can you please take a look into browser console logs, see if there are any errors? Because on my end everything seems to work.
You can answer with a screenshot in PM and we can continue debugging it there

4

@gochain Hi!
I would like to purchase this plugin, but is it possible to record it now?

5

Hi, we are working on improving the current features before adding new ones.
So recording will be added a bit later.
If you don’t have time to wait, you can combine it with our Universal Video Recorder plugin.

6

@gochain We’re looking forward to using this plugin. Does it relay on third party SDKs or services? or it natively using webRTC capabilities?

7

OK, thank you. I look forward to your update soon.

8

Actually, when we open this demo page (https://p2p-demo.bubbleapps.io/version-test/p2p_conference), one person creates a conference ID with the start button, the other person enters that conference ID and presses the connect button, but cannot start. Is there a reason for this?

9

It uses peerjs, it is an open source SDK that just makes it easier to work with webRTC features.

The demo was made as simple as possible to make it easier to understand how it works from the app editor.
It doesn’t have any limitations regarding who can start a conference, and you can integrate it into your app up to your needs.

10

Update v.1.1

  • New feature: Select Audio Input Source
    Try it here
    Documentation
  • Bugs with incorrect states fixed
1 Like
11

@gochain thanks for clarifying. is it possible to build our own UI and just use the webRTC capabilities?

12

In the current version you can customize the control buttons (The integrated ones can be disabled).
Additionally, you can set the background color, border radius and aspect ratio of video elements.
We will add more customizable UI settings eventually.

1 Like
13

Update v.1.2

:new: UI Settings:

  • Paddings between video elements
  • Nickname position

:new: Features:

  • Event - Frame Expanded
    (When expanding a video element on bigger screen)
  • State - Expanded User ID
    (If the ID was indicated in the optional User ID field when starting or connecting to a stream)
14

Update v.1.3

More UI Settings:

  • Videos Column location (Right,Left,Top,Bottom)
  • Mirror video checkbox
  • Fixed bugs with audio source selector

Here is a list of all UI settings

Screenshot 2024-04-26 at 20.06.49
Screenshot 2024-04-26 at 20.06.49333Ă—569 28.1 KB

15

Big update!

You can now become fully independent by using your own server for peer connection!

TLDR:
A server is required for peers initial connection, to “find” each other.
Control the server power to your needs, and pay only for hosting without third-party fees.
Easy to install and monitor

Setup from plugin element

Screenshot 2024-05-08 at 17.23.15
Screenshot 2024-05-08 at 17.23.15318Ă—572 19.5 KB

Details:

Why?

This is optional.
We handle this with our own servers that has a backup to default peerjs servers in case ours are down, sou the plugin won’t stop working.

This is more than enough for a relative small app. However, if you want to scale up to a bigger user base with many conference rooms, you may have delays in connection time or even server unavailability.

Adding your own servers provides full control on availability and control the power for servers as much as your app needs and, most important, you are paying only for the server hosting costs, no third party fees in between.

How?

To cover all possible use cases, 2 servers are required

  • Signaling: connecting peers

  • TURN server: Relays streams for users behind Firewalls or NAT

How much it will cost you?
The base total monthly cost for hosting both will be 12$/month on Digitalocean provider, where you will be able to see server usage in real time.

For a small fixed price, we can help you build the servers, no maintenance needed after deployment since the servers are relative simple and are based on open source peerjs-server code.

Contact us via email or in PM if interested, we will answer any questions.

dev.gochain@gmail.com

16

@gochain
Hi, we are considering using this plugin and have two questions.

(1) let’s say we have 10,000 users and each user makes 60 one-on-one video calls per month, each 30 minutes long. That is, 300,000 video calls per month (10,000 users x 60 calls / 2), or 9 million minutes of video calls per month (10,000 users x 60 calls / 2 x 30 minutes).
Will your private server work without any problems even if the data exchange is very large like this? And even in that case, will the plugin fee remain the same as it is now?

(2) I understand that a unique ID is generated for each video call, but is it possible to generate an ID in advance of making a video call connection?
For example, we assume two users making a promise to video call one week later, and at the time of the promise, a video call room ID is generated, and one week later, both users enter the room with that ID to start the video call.

Thank you in advance.
Best,

17

Hi @sksk
(1) From given numbers, to maintain a stable connection, a private server will be required.
If you expect 10k+ active users, then definitely worth a relatively small investment in private servers that you can scale up as your app grows.
If you will add your private servers, you can get the plugin with a onetime fee and pay only for your servers after that.
We can discuss the details in PM.

(2) It will be possible in the next update that we will push. You will be able to start a call with your given ID.
I will post here when the update is done.

18

@gochain
Thank you for your kind and quick reply.
I got all of them.

Let us contact you when we proceed with further consideration.

Best,

1 Like
19

Update v.1.5

  • New feature: Send text messages
  • New state: Messages (text list)
  • New event: New Message
Details

The messages are in a list of objects that includes more information about the message, like sent time and from whom.

A message looks like this:

{
    "fromUser": {
        "username": "John",
        "userId": null,
        "other_data": null,
        "isHost": true
    },
    "time": "16:57:24",
    "message": "Hello"
}

Since some fields like other data and user id are optional, they can be null (empty).

To extract any data, use the default Bubble’s feature :extract with Regex
And use a pattern like this:
"message":\s*("[^"]*"|\d+|true|false|null|\{.*?\}|\[.*?\])

Find an example of text chat integration on demo page

1 Like