@formoe/use-webrtc-answer

use-webrtc-answer

The useWebRTCAnswer hook provides the logic to create WebRTC answers after receiving an offer 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 useWebRTCAnswer from "@formoe/use-webrtc-answer"

…

const {
  answer,
  createAnswerError,
  isOfferSet,
  setRemoteOffer,
  setOfferError,
} = useWebRTCAnswer({ rtcPeerConnection })

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.

Returned WebRTC interface

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

Getting an offer

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

setRemoteOffer(offer)

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

useEffect(() => {
  if (setOfferError) {
    // you may want to notify the user that something went wrong or retry setting an offer to establish the connection
    console.error("Could not set offer for connection.", setOfferError)
  }
}, [setOfferError])

YES I do

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

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

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

useEffect(() => {
  if (createAnswerError) {
    // 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 answer for connection.", createAnswerError)
  }
}, [createAnswerError])