webrtc-analyzer

WebRTC-Analyzer

This tool helps you to debug WebRTC connections.

Current features:

• Able to display any info about the PC track
• Able to display PC statuses (signalingState, iceGatheringState, connectionState, iceGatheringState)
• Able to display any info from PC.getStats
• Support for multiple RTCPeerConnection instances
• The debuggers position could be changed by the user. (left, right)
• Reactive component

Desired features:

• Able to display offer and answer
• Able to display the generated ICE Candidates
• User is able to customize what he/she wants to see

How to use

Install with yarn.

yarn add webrtc-analyzer

Install with npm.

npm i webrtc-analyzer

Example code

Reactive way

import { Analyzer } from "webrtc-analyzer";
<Analyzer peerConnections={[pc1, pc2]} isVisible={true} position="right" />

Vanilla JS way

import { renderWebRTCAnalyzer } from "webrtc-analyzer";
renderWebRTCAnalyzer({
    peerConnections: [pc1, pc2], //Array - containing RTCPeerConnection instances
    isVisible: true, //Boolean - true by default
    position: 'right' //String - right by default (left | right)
}, '#wa-app') //Select where the component gets rendered to

Example page

Example

Show & Hide

CTRL + H to toggle

Move position

CTRL + W to toggle

Version

3.1.1

Contact

• Gabriel Mičko on Twitter, GitHub