loading...

Neat-RTC: WebRTC wrapper for React and Vue

tamasszoke profile image Tamas Szoke ・1 min read

Welcome, this is my recently created module, it makes WebRTC easier to use with features like:

  • Built-in signaling
  • Simplified mediastream, datachannel usage
  • Ready to use React, Vue examples
  • Detailed description

Try the package at NPM
Check browser compatibility

What is WebRTC?

WebRTC is an HTML5 specification that you can use to add encrypted, real-time media/data communications directly between browsers or devices.

Have a nice day!

GitHub logo tamasszoke / neat-rtc

WebRTC wrapper for peer-to-peer (P2P) communication with built-in signaling for React and Vue.

Neat-RTC

Build Status npm version

WebRTC wrapper with built-in signaling for React and Vue.

Support the project

Roadmap

These are the planned updates of the project.

  • Choose device option
  • File sharing example

Overview

1. Install the package
2. Import, configure, create an instance
3. Wire up signaling on client-side
4. Setup signaling on server-side
5. Using mediastream, datachannel

Install

npm install neat-rtc

Usage

Import

import NeatRTC from 'neat-rtc'

Configure

const config = {
  devMode: true
  videoIdLocal: 'localVideo'
  videoIdRemote: 'remoteVideo',
  connected: connected,
  mediaStreamConnected: mediaStreamConnected,
  mediaStreamRemoved: mediaStreamRemoved,
  mediaStreamRemoteRemoved: mediaStreamRemoteRemoved,
  datachannels: [
    {
      name: 'text',
      callbacks: {
        open: datachannelOpen,
        message: datachannelMessage,
        error: datachannelError,
        close: datachannelClose
      }
    }
  ]
};

Important: you have to set up all of the callback functions above.

RTCPeerConnection configuration (optional)

Add the following properties to the above config object.

connectionConfig: set the STUN/TURN servers and other connection options, for more information check the RTCConfiguration dictionary. Default value:

{
  iceServers: [
    {

Discussion

pic
Editor guide