webConnect.js

📶 Auto WebRTC Mesh P2P Network without signaling server.

Demo : https://nuzulul.github.io/webConnect.js/demo/

Why?

I got tired of building and maintenance signaling server for my WebRTC projects

How it works?

A direct browser to browser connection for static client side web application is normally impossible. Currently, the solution available was using WebRTC transport, which still required to setup a signaling server as a middleman. webConnect.js can create auto WebRTC mesh peer-to-peer connection without any hassle. This library works by leveraging already established public protocol, such as Torrent, MQTT and NOSTR for signaling, eliminating the need for backend servers forever. Now static client side web application can talk to each other, even hosts on static hosting such as github pages, cloudflare pages, gitlab pages, netlify or any other static hosting you name it even on local host.

Features

• ✅ Auto WebRTC mesh p2p connection.
• ✅ No need setup signaling server.
• ✅ Zero configuration for local network connection.

Ideas

• P2P Chat
• P2P File Transfer
• P2P Video Call
• P2P Media Streaming
• P2P Game
• P2P Screen Sharing
• P2P Camera

Example

• WIFIDrop - Instant transfer unlimited size of files over WIFI powered by WebRTC.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/webconnect.js"></script>

<script type="module">
	import webconnect from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/esm/webconnect.js'
</script>

Browserify / NPM

npm install webconnect

//Common JS 
const webconnect = require('webconnect')

//ES Module
import webconnect from 'webconnect'

Get Started

Initialization

const connect = webconnect({})

Listen

Listen on new connect

connect.onConnect((attribute) => console.log(`${attribute.connectId} connected`))

Listen on disconnect event

connect.onDisconnect((attribute) => console.log(`${attribute.connectId} disconnected`))

Listen on receiving data

connect.onReceive((data,attribute) => console.log(`${data} from ${attribute.connectId}`))

Listen on sending progress

connect.onSendProgress((attribute) => console.log(`Sending progress : ${attribute.percent} to ${attribute.connectId}`))

Listen on receiving progress

connect.onReceiveProgress((attribute) => console.log(`Receiving progress : ${attribute.percent} from ${attribute.connectId}`))

Listen on incoming streaming

connect.onStreaming((stream,attribute) => Elements[attribute.connectId].video.srcObject = stream )

Action

Get My Connection Id

connect.getMyId((attribute) => console.log(`${attribute.connectId}`))

Send Data

const attribute = {connectId}
connect.Send(data,attribute)

Send Binary

const attribute = {connectId,metadata:{name: 'Report', type: 'application/pdf'}}
connect.Send(buffer,attribute)

Open Streaming

const attribute = {connectId,metadata:{name:'Meeting'}}
connect.openStreaming(stream,attribute)

Close Streaming

const attribute = {connectId}
connect.closeStreaming(stream,attribute)

Ping Connection

const attribute = {connectId}
console.log(`${await connect.Ping(attribute)} ms`)

Disconnect

connect.Disconnect()

Get All Connection Id

connect.getConnection((attribute) => console.log(`${attribute.connection}`))

Example

<script type="module">
	import webconnect from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/esm/webconnect.js'
	
	const connect = webconnect({})
	connect.onConnect(async(attribute)=>{
		console.log("Connect",attribute)
		connect.Send("hello",{connectId:attribute.connectId})
		console.log(await connect.Ping({connectId:attribute.connectId}))
		connect.getConnection((attribute)=>{
			console.log("Connection",attribute)
		})
	})
	connect.onDisconnect((attribute)=>{
		console.log("Disconnect",attribute)
	})
	
	connect.onReceive((data,attribute) =>{
		console.log(data,attribute)
	})
</script>

import webconnect from 'webconnect'

void async function main() {

	const connect = webconnect({})
	connect.onConnect(async(attribute)=>{
		console.log("Connect",attribute)
		connect.Send("hello",{connectId:attribute.connectId})
		console.log(await connect.Ping({connectId:attribute.connectId}))
		connect.getConnection((attribute)=>{
			console.log("Connection",attribute)
		})
	})
	connect.onDisconnect((attribute)=>{
		console.log("Disconnect",attribute)
	})
	
	connect.onReceive((data,attribute) =>{
		console.log(data,attribute)
	})
	
}()

API

Connect to a channel

webconnect({appName,channelName,connectPassword,iceConfiguration})

options :

• appName - (String) Your app identity
• channelName - (String) Channel to connect
• connectPassword - (String) Password to encrypt connection initialization
• iceConfiguration - (Object) Custom iceConfiguration

Listen to every new connection

onConnect((attribute)=>{})

• attribute = {connectId} - connectId is origin connection identity

Listen to every disconnection

onDisconnect((attribute)=>{})

• attribute = {connectId} - connectId is origin connection identity

Send data to connection

Send(data,attribute)

• data = String or Object
• attribute = {connectId} - connectId is target connection can single connectId , multiple with array [connectId,connectId,...] or null to target all connection in the channel

Send binary data to connection

Send(ArrayBuffer,attribute)

• ArrayBuffer = Binary data
• attribute = {connectId,metadata} - connectId is target connection can single connectId , multiple with array [connectId,connectId,...] or null to target all connection in channel - metadata is optional metadata object like filename or filetype

Listen to sending progress for binary data

onSendProgress((attribute) => {})

• attribute = {percent,connectId} - percent indicating the percentage between 0 and 1, connectId is target connection

Listen to receiving data

onReceive((data,attribute) => {})

• data = String or Object or ArrayBuffer
• attribute = {connectId,metadata} - connectId is origin connection identity - metadata is object description about the ArrayBuffer

Listen to receiving progress for binary data

onReceiveProgress((attribute) => {})

• attribute = {percent,connectId} - percent indicating the percentage between 0 and 1, connectId is origin connection identity

Open streaming connection

openStreaming(stream,attribute)

• stream = MediaStream - A MediaStream with audio and/or video
• attribute = {connectId, metadata} - connectId is target connection - metadata is optional object stream description

Listen to incoming streaming connection

onStreaming((stream,attribute) => {})

• stream = MediaStream - A MediaStream with audio and/or video
• attribute = {connectId,metadata} - connectId is origin connection identity - metadata is optional stream description

Close streaming connection

closeStreaming(stream,attribute)

• stream = MediaStream - A previously opened MediaStream
• attribute = {connectId} - connectId is target connection

Get self connection identity

getMyId((attribute) => {})

• attribute = {connectId} - connectId is self connection identity

Get all connection identity in the channel

getConnection((attribute) => {})

• attribute = {connection,connections} - connection is Array of all connection identity exclude self connection identity - connections is RTCPeerConnection object

Get latency of connection which return a promise that resolve to milliseconds

Ping(attribute)

• attribute = {connectId} - connectId is target connection

Disconnect from channel

Disconnect()

Related

• WebPEER - WebPEER is a novel decentralized P2P network overlay in browser-side with a chance of working.
• RingsNetwork - Rings is a structured peer-to-peer network implementation using WebRTC, Chord DHT, and full WebAssembly (WASM) support.

License

MIT

Maintainers

Nuzulul Zulkarnain