Auto WebRTC peer-to-peer connection for static client side web application
MIT License
📶 Auto WebRTC peer-to-peer connection
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 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.
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'
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 :
onConnect((attribute)=>{})
attribute = {connectId}
- connectId
is origin connection identityonDisconnect((attribute)=>{})
attribute = {connectId}
- connectId
is origin connection identitySend(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 channelSend(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 filetypeonSendProgress((attribute) => {})
attribute = {percent,connectId}
- percent
indicating the percentage between 0 and 1, connectId
is target connectiononReceive((data,attribute) => {})
data = String or Object or ArrayBuffer
attribute = {connectId,metadata}
- connectId
is origin connection identity - metadata
is object description about the ArrayBufferonReceiveProgress((attribute) => {})
attribute = {percent,connectId}
- percent
indicating the percentage between 0 and 1, connectId
is origin connection identityopenStreaming(stream,attribute)
stream = MediaStream
- A MediaStream
with audio and/or videoattribute = {connectId, metadata}
- connectId
is target connection - metadata
is optional object stream descriptiononStreaming((stream,attribute) => {})
stream = MediaStream
- A MediaStream
with audio and/or videoattribute = {connectId,metadata}
- connectId
is origin connection identity - metadata
is optional stream descriptioncloseStreaming(stream,attribute)
stream = MediaStream
- A previously opened MediaStreamattribute = {connectId}
- connectId
is target connectiongetMyId((attribute) => {})
attribute = {connectId}
- connectId
is self connection identitygetConnection((attribute) => {})
attribute = {connection,connections}
- connection
is Array of all connection identity exclude self connection identity - connections
is RTCPeerConnection objectPing(attribute)
attribute = {connectId}
- connectId
is target connectionDisconnect()