react-peer-data
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    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 { 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

    Install

    npm i react-peer-data

    DownloadsWeekly Downloads

    100

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    45.2 kB

    Total Files

    14

    Last publish

    Collaborators

    • vardius