Skip to content

Latest commit

 

History

History
123 lines (98 loc) · 3.65 KB

README.md

File metadata and controls

123 lines (98 loc) · 3.65 KB

React WebRTC - PeerData

Build Status npm version npm downloads license codecov

Table of Content

ABOUT

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

Contributors:

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

  1. 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 { EventDispatcher } from "peer-data";
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 }}
        signaling={{ dispatcher: new EventDispatcher() }}
    >
        <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