Introduction to AdapterJS

AdapterJS is a powerful JavaScript library that helps developers integrate WebRTC across different browsers by unifying the WebRTC API differences. This enhances compatibility and simplifies the development process.

Getting Started with AdapterJS

npm install adapterjs

Example: Initializing AdapterJS

import AdapterJS from 'adapterjs';

API Examples

1. Get User Media

This API is used to capture audio, video, or both from the user’s device.

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // Use the stream
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

2. Create RTCPeerConnection

This API creates an RTCPeerConnection instance which represents a WebRTC connection.

const pc = new RTCPeerConnection(configuration);
pc.onicecandidate = event => {
  if (event.candidate) {
    // Send the candidate to the remote peer
  }
};

3. Add Media Stream to RTCPeerConnection

This API adds a media stream to the RTCPeerConnection instance.

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
stream.getTracks().forEach(track => pc.addTrack(track, stream));

4. Create an Offer

This API creates an SDP offer which initiates the WebRTC session.

pc.createOffer().then(offer => {
  pc.setLocalDescription(offer);
  // Send the offer to the remote peer
});

5. Handle Incoming Offer

This code snippet demonstrates how to handle an SDP offer received from a remote peer.

const offer = /* received offer */;
pc.setRemoteDescription(new RTCSessionDescription(offer));
pc.createAnswer().then(answer => {
  pc.setLocalDescription(answer);
  // Send the answer to the remote peer
});

6. Data Channels

Data channels allow the exchange of arbitrary data with low latency between peers.

const dataChannel = pc.createDataChannel('myDataChannel');
dataChannel.onopen = () => {
  console.log('Data Channel Opened');
};
dataChannel.onmessage = event => {
  console.log('Received Message:', event.data);
};

Full App Example

Here’s a complete example to illustrate how the above APIs can be used to create a simple WebRTC application:

import AdapterJS from 'adapterjs';

const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const localPC = new RTCPeerConnection(configuration);
const remotePC = new RTCPeerConnection(configuration);

localPC.onicecandidate = event => {
  if (event.candidate) {
    remotePC.addIceCandidate(event.candidate);
  }
};
remotePC.onicecandidate = event => {
  if (event.candidate) {
    localPC.addIceCandidate(event.candidate);
  }
};

remotePC.ontrack = event => {
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = event.streams[0];
};

const startCall = async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  const localVideo = document.getElementById('localVideo');
  localVideo.srcObject = localStream;

  localStream.getTracks().forEach(track => localPC.addTrack(track, localStream));

  const offer = await localPC.createOffer();
  await localPC.setLocalDescription(offer);
  await remotePC.setRemoteDescription(offer);

  const answer = await remotePC.createAnswer();
  await remotePC.setLocalDescription(answer);
  await localPC.setRemoteDescription(answer);
};

document.querySelector('#startButton').addEventListener('click', startCall);

In this example, we set up two RTCPeerConnection instances to simulate a WebRTC call between two peers. Media streams are captured and added to one peer, and SDP offers/answers are exchanged to establish the connection.

Hash: 766142ae45d9b4bf5e189216d048f5b0ad9469e20e0b8ec708d112b14c80801e