WHIP-WHAP-JS: WebRTC WHIP and WHAP using Perfect Negotiation

Features

• Does NOT encapsulate RTCPeerConnection
• Small, simple code base
• Auto-retries WHIP/WHAP on WebRTC failure, or when iceConnectionState is "disconnected"
• Uses Perfect Negotiation for WHIP and WHAP as from the Jan-Ivar Bruaroey article here

WHIP

WHIP stands for WebRTC-HTTP ingestion protocol It's an IETF draft, and you can learn more here: https://github.com/wish-wg/webrtc-http-ingest-protocol

WHAP

WHIP stands for WebRTC-HTTP access protocol And this is the only place to learn about it for now. It's similar to WHIP, but intended for receiving audio/video from WebRTC servers. See the example below.

WHIP Example

WHIP example: send camera to WHIP server.

let url = '/pub'
let whipwhap = await import('https://cdn.jsdelivr.net/npm/whip-whap-js')
document.write('<video id="video1" autoplay controls muted width="1024" allowfullscreen/>')
let pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] })
pc.addEventListener('iceconnectionstatechange', whipwhap.handleIceStateChange)
pc.addEventListener('negotiationneeded', ev => whipwhap.handleNegotiationNeeded(ev, url))
let gum = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
pc.addTransceiver(gum.getVideoTracks()[0], { 'direction': 'sendonly' })
pc.addTransceiver(gum.getAudioTracks()[0], { 'direction': 'sendonly' })
let video1 = document.getElementById('video1')
video1.srcObject = gum
video1.play()

WHAP Example

WHAP example: receive video/audio from WebRTC server to HTML video element.

let url = '/sub'
let whipwhap = await import('https://cdn.jsdelivr.net/npm/whip-whap-js')
document.write('<video id="video1" autoplay controls muted width="1024" allowfullscreen/>')
let pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] })
pc.addTransceiver('video', { 'direction': 'recvonly' }) // build sdp
pc.addTransceiver('audio', { 'direction': 'recvonly' }) // build sdp
pc.addEventListener('iceconnectionstatechange', whipwhap.handleIceStateChange)
pc.addEventListener('negotiationneeded', ev => whipwhap.handleNegotiationNeeded(ev, url))
let video1 = document.getElementById('video1')
pc.ontrack = ev => video1.srcObject = ev.streams[0]

Functions

whip-whap-js

WHIP WHAP module.

• whip-whap-js
  • ~handleNegotiationNeeded(event, url)
  • ~handleIceStateChange(event)
  • ~helperGetRxTxRate(pc)

whip-whap-js~handleNegotiationNeeded(event, url)

Event handler for 'negotiationneeded' event.

Kind: inner method of whip-whap-js

| Param | Type | | --- | --- | | event | Event | | url | string |

Example

WHIP example
// pc.onnegotiationneeded = ev => whipwhap.handleNegotiationNeeded(ev, '/pub')

Example

WHAP example
// pc.onnegotiationneeded = ev => whipwhap.handleNegotiationNeeded(ev, '/sub')

whip-whap-js~handleIceStateChange(event)

Event handler for 'iceconnectionstatechange' event.

Kind: inner method of whip-whap-js

| Param | Type | | --- | --- | | event | Event |

Example

// pc.addEventListener('iceconnectionstatechange', whipwhap.handleIceStateChange)

whip-whap-js~helperGetRxTxRate(pc)

This is a helper function, which is not required to make WHIP or WHAP connections. It will return the current rx/tx bitrates the next time a getStats() event is available.

Kind: inner method of whip-whap-js

| Param | Type | | --- | --- | | pc | RTCPeerConnection |