项目作者: lazorfuzz

项目描述 :
A React component library that makes it easy to add p2p communication into components via LioWebRTC.
高级语言: JavaScript
项目地址: git://github.com/lazorfuzz/react-liowebrtc.git
创建时间: 2018-09-11T23:10:10Z
项目社区:https://github.com/lazorfuzz/react-liowebrtc

开源协议:

下载


react-liowebrtc

A React component library that makes it easy to add p2p communication into components via LioWebRTC.

NPM

Install

  1. npm i react-liowebrtc --save

Or

  1. yarn add react-liowebrtc

Demo

https://react-liowebrtc.netlify.com

Usage

Example Component (Data Channels only)

  1. import React, { Component } from 'react';
  2. import { LioWebRTC } from 'react-liowebrtc'
  3. import MyComponent from './MyComponent';
  4. class Example extends Component {
  5. handlePeerData = (webrtc, type, payload, peer) => {
  6. if (type === 'event-label') {
  7. console.log(payload);
  8. }
  9. }
  10. render () {
  11. return (
  12. <LioWebRTC
  13. options={{ dataOnly: true }}
  14. onReady={this.joinRoom}
  15. onCreatedPeer={this.handleCreatedPeer}
  16. onReceivedPeerData={this.handlePeerData}
  17. onRemovedPeer={this.handlePeerLeft}
  18. >
  19. <MyComponent ></MyComponent>
  20. </LioWebRTC>
  21. )
  22. }
  23. }

MyComponent

  1. import React, { Component } from 'react';
  2. import { withWebRTC } from 'react-liowebrtc';
  3. class MyComponent extends Component {
  4. handleClick = () => this.props.webrtc.shout('event-label', 'payload');
  5. render() {
  6. return (
  7. <div>
  8. <button onClick={this.handleClick}>
  9. Click Me
  10. </button>
  11. </div>
  12. );
  13. }
  14. }
  15. export default withWebRTC(MyComponent);

Video Chat Example

  1. import React, { Component } from 'react';
  2. import { LioWebRTC, LocalVideo, RemoteVideo } from 'react-liowebrtc'
  3. class ExampleVideoChat extends Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = {
  7. peers: []
  8. };
  9. }
  10. join = (webrtc) => webrtc.joinRoom('video-chat-room-arbitrary-name');
  11. handleCreatedPeer = (webrtc, peer) => {
  12. this.setState({ peers: [...this.state.peers, peer] });
  13. }
  14. handleRemovedPeer = () => {
  15. this.setState({ peers: this.state.peers.filter(p => !p.closed) });
  16. }
  17. generateRemotes = () => this.state.peers.map((peer) => (
  18. <RemoteVideo key={`remote-video-${peer.id}`} peer={peer} ></RemoteVideo>
  19. ));
  20. render () {
  21. return (
  22. <LioWebRTC
  23. options={{ debug: true }}
  24. onReady={this.join}
  25. onCreatedPeer={this.handleCreatedPeer}
  26. onRemovedPeer={this.handleRemovedPeer}
  27. >
  28. <LocalVideo ></LocalVideo>
  29. {
  30. this.state.peers &&
  31. this.generateRemotes()
  32. }
  33. </LioWebRTC>
  34. )
  35. }
  36. }
  37. export default ExampleVideoChat;

Component Props

LioWebRTC Component

  1. LioWebRTC.propTypes = {
  2. options: PropTypes.object, // Initializing options passed into the liowebrtc library
  3. onReady: PropTypes.func, // Event listeners
  4. onJoinedRoom: PropTypes.func, // When we successfully join a room
  5. onReceivedPeerData: PropTypes.func, // When we receive a shout or whisper from a peer
  6. onChannelOpen: PropTypes.func, // When a new data channel is established with a peer
  7. onConnectionReady: PropTypes.func, // When the signaling connection is ready
  8. onCreatedPeer: PropTypes.func, // When a new peer connects
  9. onPeerStreamAdded: PropTypes.func, // When a peer media stream is added
  10. onPeerStreamRemoved: PropTypes.func, // When a peer media stream is removed
  11. onIceConnectionStateChange: PropTypes.func, // When the connection state with a peer changes
  12. onSignalingStateChange: PropTypes.func, // When the connection to the signaling server changes
  13. onLeftRoom: PropTypes.func, // When exited the room
  14. onPeerMute: PropTypes.func, // When a peer mutes themselves
  15. onReceivedSignalData: PropTypes.func, // When we get a message via the signaling server from a peer
  16. onPeerUnmute: PropTypes.func, // When a peer unmutes themselves
  17. onRemovedPeer: PropTypes.func, // When a peer disconnects from us
  18. onConnectionError: PropTypes.func // When an error occurs in connecting to a peer
  19. };

All event emitters pass a webrtc session manager object to the listener functions. For example, the onReceivedPeerData event passes the following objects: (webrtc, type, data, peer). The onCreatedPeer event passes (webrtc, peer). Take a look at the LioWebRTC docs for more information on LioWebRTC’s events and methods. All events emitted by LioWebRTC will have a preceding webrtc object when using react-liowebrtc.

LocalVideo Component

  1. LocalVideo.propTypes = {
  2. videoProps: PropTypes.object, // props passed to the inner video element
  3. };

RemoteVideo Component

  1. RemoteVideo.propTypes = {
  2. videoProps: PropTypes.object, // props passed to the inner video element
  3. peer: PropTypes.instanceOf(Peer) // the Peer instance
  4. };

These props are needed to initialize and set event listeners for the liowebrtc library. Take a look at the liowebrtc docs for more info.

For more info, please take a look at this @leontosy/building-a-p2p-web-app-with-react-and-liowebrtc-6a7e8c621085">tutorial showing how to build a chat room with react-liowebrtc.

License

MIT © lazorfuzz