react-peer-data

React WebRTC - PeerData

Table of Content

• About
• How to use
  • Installation
  • Examples
    • Hook
    • HOC
• License

ABOUT

React wrapper for PeerData library for files, media streaming/sharing using WebRTC.

Contributors:

• Rafał Lorenz

Want to contribute ? Feel free to send pull requests!

Have problems, bugs, feature ideas? We are using the github issue tracker to manage them.

HOW TO USE

• Chat Example

Getting started

Installation

npm install react-peer-data

Examples

Use PeerDataProvider to instantiate and pass peerData object down the component tree

import React from 'react';
import ReactDOM from 'react-dom';
import { PeerDataProvider } from 'react-peer-data';

import App from './App';

ReactDOM.render(
    <PeerDataProvider
        servers={{ iceServers: [{ url: "stun:stun.1.google.com:19302" }] }}
        constraints={{ ordered: true }}
    >
        <App />
    </PeerDataProvider>,
    document.getElementById("root")
);

You can access peerData context value in two ways:

Hook

import React, { useEffect } from 'react';
import { usePeerData } from 'react-peer-data';

function App() {
  const peerData = usePeerData();

  useEffect(() => {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      const room = peerData.connect('my-room', stream);
      room
        .on("participant", participant => {
            participant
                .on("disconnected", () => { console.log('disconnected', participant.id); })
                .on("track", event => { console.log('stream', participant.id, event.streams[0]); })
                .on("message", payload => { console.log(participant.id, payload); })
                .on("error", event => {
                    console.error('peer', participant.id, event);
                    participant.renegotiate();
                });
        })
        .on("error", event => { console.error('room', name, event); });

      return () => room.disconnect()
  }, [peerData]);

  return null; // @TODO: render participants
}

export default App;

HOC

import React from 'react';
import { withPeerData } from 'react-peer-data';

function App({ peerData }) {
  // follow example from above

  return null; // @TODO: render participants
}

export default withPeerData(App);

License

This package is released under the MIT license. See the complete license in the package:

LICENSE