https://github.com/TomasHubelbauer/webrtc-data-channel-demo

WebRTC Data Channel demo
https://github.com/TomasHubelbauer/webrtc-data-channel-demo

data-channel data-channels ice webrtc webrtc-demos

Last synced: 3 months ago
JSON representation

WebRTC Data Channel demo

• Host: GitHub
• URL: https://github.com/TomasHubelbauer/webrtc-data-channel-demo
• Owner: TomasHubelbauer
• License: mit
• Created: 2017-07-26T17:50:56.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2022-04-28T17:52:58.000Z (almost 3 years ago)
• Last Synced: 2024-08-01T21:56:48.082Z (6 months ago)
• Topics: data-channel, data-channels, ice, webrtc, webrtc-demos
• Language: JavaScript
• Homepage: https://tomashubelbauer.github.io/webrtc-data-channel-demo
• Size: 245 KB
• Stars: 125
• Watchers: 10
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-repos - TomasHubelbauer/webrtc-data-channel-demo - WebRTC Data Channel demo (JavaScript)
• awesome-webrtc - webrtc-data-channel-demo - WebRTC Data Channel demo. (Samples)

README

        
# WebRTC Data Channel Demo ![](https://github.com/TomasHubelbauer/webrtc-data-channel-demo/actions/workflows/pages/pages-build-deployment/badge.svg)

[`postMessage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

A demo of WebRTC Data Channel using [`postMessage`] for a signalling channel.

I made this because I was frustrated with the lack of good WebRTC data channel

examples and tutorials online. Most use the JavaScript context of the browser

tab as a signalling channel which I did not like.

I have implemented two modes of work explained below.

## [Offerer-Answerer](https://tomashubelbauer.github.io/webrtc-data-channel-demo/offerer-answerer)

![](offerer-answerer/screenshot.png)

In this demo, the offerer and answerer roles and implemented in separate files.

This means the implementation is not versatile, but it is much easier to follow.

## [Peer](https://tomashubelbauer.github.io/webrtc-data-channel-demo/peer)

![](peer/screenshot.png)

In this demo, each peer is capable of being either an offerer or an answerer.

The flows for both are intertwined. Less clear but more real-life.

## To-Do

### Contribute a demo where peer connections are keyed by peer name

This will enable one peer can hold multiple connections in a group chat.

### Make another demo a service worker signaling channel between two tabs