https://github.com/itsuki-hayashi/rtcdc

A modernized wrapper for WebRTC data channels.
https://github.com/itsuki-hayashi/rtcdc

browser datachannel messaging realtime realtime-messaging typescript web webrtc

Last synced: 29 days ago
JSON representation

A modernized wrapper for WebRTC data channels.

• Host: GitHub
• URL: https://github.com/itsuki-hayashi/rtcdc
• Owner: itsuki-hayashi
• License: mit
• Created: 2019-02-15T11:27:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-25T03:55:35.000Z (about 1 year ago)
• Last Synced: 2024-06-06T20:16:13.502Z (7 months ago)
• Topics: browser, datachannel, messaging, realtime, realtime-messaging, typescript, web, webrtc
• Language: TypeScript
• Homepage:
• Size: 126 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rtcdc

A modernized wrapper for WebRTC data channels.

# Features

* Simple API for creating WebRTC data channel.

* Works in Chrome & Firefox, some workarounds are required for Safari support (Due to buggy data channel implementation in Safari 12).

* Binary & text data.

* RxJs-based messaging interface.

* Native TypeScript support.

* Use vanilla ICE for signalling.

* Native Promise-based interface.

# Install

npm install rtcdc --save

# Usage

You might need a web bundler (e.g. Rollup, Webpack, Browserify) for it to work.

```javascript

import { Offerer, Answerer } from 'rtcdc';

async function main() {

    const offerer = new Offerer();

    const offer = await Offerer.createOffer(); // Create WebRTC offer.

    

    // Now send your offer to another peer (answerer).

    const answerer = new Answerer();

    const answer = await answerer.createAnswer(offer); // Get WebRTC answer based on the offer we got.

    

    // Send answer back to the offerer.

    await offerer.setAnswer(answer);

    // Get data channels.

    const answererDataChannel = await answerer.getDataChannel();

    const offererDataChannel = await offerer.getDataChannel();

    // Test the data channel.

    answererDataChannel.messages.subscribe((message) => console.log(`Answerer got: ${message}.`))

    offererDataChannel.messages.subscribe((message) => console.log(`Offerer got: ${message}.`))

    await answererDataChannel.send('ping'); // Offerer got: ping.

    await offererDataChannel.send('pong'); // Answerer got: pong.

}

main().then();

```

You can also override the configuration to suit your needs, e.g. you will need to configure TURN server to connect peers behind symmetric NAT.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/RTCConfiguration

```javascript

const config = {

    iceServers: [{

        urls: "stun:stun.services.mozilla.com",

        username: "[email protected]", 

        credential: "webrtcdemo"

    }, {

        urls: ["stun:stun.example.com", "stun:stun-1.example.com"]

    }]

};

const offerer = new Offerer(config);

```