📶 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.
CDN
<script src="https://cdn.jsdelivr.net/npm/webconnect@0.0.3/dist/umd/webconnect.js"></script>
<script type="module">
import webconnect from 'https://cdn.jsdelivr.net/npm/webconnect@0.0.3/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/webconnect@0.0.3/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 identity
getConnection((attribute) => {})
attribute = {connection}
- connection
is Array of all connection identity exclude self connection identityPing(attribute)
attribute = {connectId}
- connectId
is target connectionDisconnect()