Webconnect NPM

webConnect.js

📶 Auto WebRTC peer-to-peer connection

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. 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 even on local host.

Features

✅ Auto p2p WebRTC connection
✅ Zero configuration for local network connection

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/webconnect@0.0.10/dist/umd/webconnect.js"></script>

<script type="module">
	import webconnect from 'https://cdn.jsdelivr.net/npm/webconnect@0.0.10/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/webconnect@0.0.10/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>

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