Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vardius/react-peer-data
React wrapper for PeerData library for files, media streaming/sharing using WebRTC.
https://github.com/vardius/react-peer-data
Last synced: about 2 months ago
JSON representation
React wrapper for PeerData library for files, media streaming/sharing using WebRTC.
- Host: GitHub
- URL: https://github.com/vardius/react-peer-data
- Owner: vardius
- License: mit
- Created: 2019-05-20T02:53:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T15:21:12.000Z (about 2 years ago)
- Last Synced: 2024-05-02T04:36:18.627Z (7 months ago)
- Language: TypeScript
- Size: 951 KB
- Stars: 20
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-peer-data`
- awesome-react-hooks-cn - `react-peer-data`
- awesome-react-hooks - `react-peer-data`
- awesome-react-hooks - `react-peer-data`
README
React WebRTC - PeerData
================
[](https://travis-ci.org/vardius/react-peer-data)
[](https://www.npmjs.com/package/react-peer-data)
[](https://www.npmjs.com/package/react-peer-data)
[](LICENSE)
[](https://codecov.io/gh/vardius/react-peer-data)
Table of Content
- [About](#about)
- [How to use](#how-to-use)
- [Installation](#installation)
- [Examples](#examples)
- [Hook](#hook)
- [HOC](#hoc)
- [License](#license)
ABOUT
==================================================
React wrapper for PeerData library for files, media streaming/sharing using WebRTC.
Contributors:
* [Rafał Lorenz](http://rafallorenz.com)
Want to contribute ? Feel free to send pull requests!
Have problems, bugs, feature ideas?
We are using the github [issue tracker](https://github.com/vardius/react-peer-data/issues) to manage them.
HOW TO USE
==================================================
1. [Chat Example](https://github.com/vardius/react-webrtc-chat)
## Getting started
### Installation
```bash
npm install react-peer-data
```
### Examples
Use `PeerDataProvider` to instantiate and pass peerData object down the component tree
```javascript
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(
,
document.getElementById("root")
);
```
You can access peerData context value in two ways:
#### Hook
```javascript
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
```javascript
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](LICENSE.md)