📶 WebRTC peer-to-peer connection without signaling server for static web

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

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

A direct browser to browser connection for static client side web pages is normally impossible. Previously, the solution available was using WebRTC transport, which still required to setup a signaling server as a middleman. This library works by leveraging already established P2P networks, such as IPFS Network or Torrent Network for signaling, eliminating the need for backend servers forever. Now static web pages can talk to each other, even hosts on static hosting such as github pages, cloudflare pages, gitlab pages, netlify or localhost.

• ✅ Bypass NAT
• ✅ Bypass VPN

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 install webconnect

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

//ES Module
import webconnect from 'webconnect'

const connect = webconnect({})

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 )

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}`))

<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>

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

onConnect((attribute)=>{})

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

onDisconnect((attribute)=>{})

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

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(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

onSendProgress((attribute) => {})

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

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

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

onReceiveProgress((attribute) => {})

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

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

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

closeStreaming(stream,attribute)

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

getMyId((attribute) => {})

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

getConnection((attribute) => {})

• attribute = {connection} - connection is Array of all connection identity exclude self connection identity

Ping(attribute)

• attribute = {connectId} - connectId is target connection

Disconnect()

MIT