This package has been deprecated

Author message:

This project has been renamed. Install using @ffgflash/simple-peer instead.

ffg-simple-peer
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Simple Peer

The Goal

The goal of this library is to make writing p2p code a breeze. Simply create your peers, use the signaling server of your choice and get to making live video calls and more!

Options

  • rtc?: RTCConfiguration
    • RTC Configuration used when creating the RTCPeerConnection. See MDN.
  • answerTimeout?: number
    • How long should we wait for an answer signal, if 0 then don't timeout. (default: 5000)

Examples

Signaling

Using event based signaling makes it incredibly easy to hook into any method of signaling whether that be using websockets, api calls, etc.

In the example below we use the BroadcastChannel API to signal between two browser tabs.

const peer = new SimplePeer()

const channel = new BroadcastChannel('example-signal-server')
peer.on('signal', signal => channel.postMessage(JSON.stringify(signal)))
channel.addEventListener('message', ({ data }) =>
  peer.handleSignal(JSON.parse(data))
)

function start() {
  peer.open()
}

function stop() {
  peer.close()
}

Streaming Video

Creating and managing streams is super simple with simple peer, simply listen for when a stream is added/removed.

See Signaling Example for how to establish a p2p connection.

const peer = new SimplePeer()

const video = document.getElementById<HTMLVideoElement>('#video')

let remoteVideo: MediaStream | null = null
let localVideo: MediaStream | null = null

peer.on('add-stream', (name, stream) => {
  if (name === 'video') remoteVideo = video.srcObject = stream
})

peer.on('remove-stream', id => {
  if (remoteVideo.id === id) {
    video.pause()
    remoteVideo = video.srcObject = null
    video.removeAttribute('src')
    video.load()
  }
})

async function startVideo() {
  try {
    localVideo = await navigator.getUserMedia({ video: true, audio: true })
    peer.addStream('video', localVideo)
  } catch {}
}

function stopVideo() {
  peer.removeStream(localVideo)
  localVideo.getTracks().forEach(track => {
    track.stop()
    localVideo!.removeTrack(track)
  })
  localVideo = null
}

Sending Data

Sending data using data channels is again simplified

See Signaling Example for how to establish a p2p connection.

const peer = new SimplePeer()
const sender = crypto.randomUUID()

let messageChannel: RTCDataChannel | null = null

function setupMessageChannel(channel) {
  messageChannel?.close()
  messageChannel = channel
  channel.addEventListener('message', ({ data }) =>
    handleMessage(JSON.parse(data))
  )
}

function handleMessage(message) {
  console.log(`${message.sender}: ${message.content}`)
}

function sendMessage(content) {
  messageChannel.send(JSON.stringify({ sender, content }))
}

peer.on('data-channel', channel => {
  switch (channel.label) {
    case 'message-channel':
      setupMessageChannel(channel)
      break
    default:
      break
  }
})

function start() {
  peer.createDataChannel('message-channel')
  peer.open()
}

Putting It All Together

Click here for an interactive example where we put everything into practice.

Open the example in two tabs and press connect to try everything out.

Package Sidebar

Install

npm i ffg-simple-peer

Weekly Downloads

15

Version

3.0.0

License

MIT

Unpacked Size

64.8 kB

Total Files

8

Last publish

Collaborators

  • ffgflash