importReact,{Component}from'react';import{LioWebRTC}from'react-liowebrtc'importMyComponentfrom'./MyComponent';classExampleextendsComponent{handlePeerData=(webrtc,type,payload,peer)=>{if(type==='event-label'){console.log(payload);}}render(){return(<LioWebRTCoptions={{dataOnly: true}}onReady={this.joinRoom}onCreatedPeer={this.handleCreatedPeer}onReceivedPeerData={this.handlePeerData}onRemovedPeer={this.handlePeerLeft}><MyComponent/></LioWebRTC>)}}

importReact,{Component}from'react';import{withWebRTC}from'react-liowebrtc';classMyComponentextendsComponent{handleClick=()=>this.props.webrtc.shout('event-label','payload');render(){return(<div><buttononClick={this.handleClick}> Click Me </button></div>);}}exportdefaultwithWebRTC(MyComponent);

importReact,{Component}from'react';import{LioWebRTC,LocalVideo,RemoteVideo}from'react-liowebrtc'classExampleVideoChatextendsComponent{constructor(props){super(props);this.state={peers: []};}join=(webrtc)=>webrtc.joinRoom('video-chat-room-arbitrary-name');handleCreatedPeer=(webrtc,peer)=>{this.setState({peers: [...this.state.peers,peer]});}handleRemovedPeer=()=>{this.setState({peers: this.state.peers.filter(p=>!p.closed)});}generateRemotes=()=>this.state.peers.map((peer)=>(<RemoteVideokey={`remote-video-${peer.id}`}peer={peer}/>));render(){return(<LioWebRTCoptions={{debug: true}}onReady={this.join}onCreatedPeer={this.handleCreatedPeer}onRemovedPeer={this.handleRemovedPeer}><LocalVideo/>{this.state.peers&&this.generateRemotes()}</LioWebRTC>)}}exportdefaultExampleVideoChat;

LioWebRTC.propTypes={options: PropTypes.object,// Initializing options passed into the liowebrtc libraryonReady: PropTypes.func,// Event listenersonJoinedRoom: PropTypes.func,// When we successfully join a roomonReceivedPeerData: PropTypes.func,// When we receive a shout or whisper from a peeronChannelOpen: PropTypes.func,// When a new data channel is established with a peeronConnectionReady: PropTypes.func,// When the signaling connection is readyonCreatedPeer: PropTypes.func,// When a new peer connectsonPeerStreamAdded: PropTypes.func,// When a peer media stream is addedonPeerStreamRemoved: PropTypes.func,// When a peer media stream is removedonIceConnectionStateChange: PropTypes.func,// When the connection state with a peer changesonSignalingStateChange: PropTypes.func,// When the connection to the signaling server changesonLeftRoom: PropTypes.func,// When exited the roomonPeerMute: PropTypes.func,// When a peer mutes themselvesonReceivedSignalData: PropTypes.func,// When we get a message via the signaling server from a peeronPeerUnmute: PropTypes.func,// When a peer unmutes themselvesonRemovedPeer: PropTypes.func,// When a peer disconnects from usonConnectionError: PropTypes.func// When an error occurs in connecting to a peer};

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

RemoteVideo.propTypes={videoProps: PropTypes.object,// props passed to the inner video elementpeer: PropTypes.instanceOf(Peer)// the Peer instance};