@formoe/use-webrtc-offer

use-webrtc-offer

The useWebRTCOffer hook provides the logic to create WebRTC offers and handle answers for the corresponding peer connection. It takes care of the async processes in the background and translates them to usable react state.

It can be used together with the @formoe/use-webrtc-connection hook. However you are free to provide any RTCPeerConnection to work with.

import useWebRTCOffer from "@formoe/use-webrtc-offer"

…

const { offer, createOfferError, setRemoteAnswer, setAnswerError } = useWebRTCOffer({ rtcPeerConnection, offerConfig })

Hook configuration

The hook takes a configuration object providing an optional rtcPeerConnection. While the connection is optional, nothing will happen as long as it's undefined.

offerConfig are the RTCOfferOptions used to create a connection offer.

Returned WebRTC interface

The hook returns some objects and various functions to control the offer and answer negotiation process.

Making an offer

The offer is a RTCSessionDescriptionInit or undefined if no offer was yet created by the connection. Creating an offer takes place when the connection triggers the onnegotiationneeded event listener. There should be no need to manually create an offer with a connection, so you only need to react to the offer beeing created:

useEffect(() => {
  if (offer) {
    // send offer to peer
  }
}, [offer])

If WebRTC encounters any trouble creating an offer, the error result of the latest try is provided via createOfferError. The error will vanish if an offer could be created successfully.

useEffect(() => {
  if (createOfferError) {
    // you may want to notify the user that something went wrong or just wait if the connection can be established somewhen
    console.error("Could not create offer for connection.", createOfferError)
  }
}, [createOfferError])

And the answer is…

You can provide the answer of a peer to the connection. The function takes an RTCSessionDescriptionInit object.

setRemoteAnswer(answer)

If WebRTC encounters any trouble accepting the answer, the error result of the latest try is provided via setAnswerError. The error will vanish if an answer is accepted.

useEffect(() => {
  if (setAnswerError) {
    // you may want to notify the user that something went wrong or just wait if the connection can be established somewhen
    console.error("Could not set answer for connection.", setAnswerError)
  }
}, [setAnswerError])