neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

openvidu-insecure-react: lifecycle change for OvVideo

Browse Source
This commit is contained in:
pabloFuente 2018-09-25 17:52:13 +02:00
parent 11fa3dbc5f
commit 1013ea1ab8
5 changed files with 1418 additions and 1538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2884
openvidu-insecure-react/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
openvidu-insecure-react/package.json
View File

@ -3,11 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"openvidu-browser": "^2.4.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
"axios": "0.18.0",
"openvidu-browser": "2.4.0",
"react": "16.5.2",
"react-dom": "16.5.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",

36
openvidu-insecure-react/src/App.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import axios from 'axios';
import { OpenVidu } from 'openvidu-browser';
import React, { Component } from 'react';
import './App.css';
import {OpenVidu} from 'openvidu-browser';
import UserVideoComponent from './UserVideoComponent';
const OPENVIDU_SERVER_URL = 'https://' + window.location.hostname + ':4443';
@ -20,7 +20,7 @@ class App extends Component {
publisher: undefined,
subscribers: [],
};
this.joinSession = this.joinSession.bind(this);
this.leaveSession = this.leaveSession.bind(this);
this.handleChangeSessionId = this.handleChangeSessionId.bind(this);
@ -54,9 +54,11 @@ class App extends Component {
}
handleMainVideoStream(stream) {
this.setState({
mainStreamManager: stream,
});
if (this.state.mainStreamManager !== stream) {
this.setState({
mainStreamManager: stream
});
}
}
deleteSubscriber(streamManager) {
@ -240,16 +242,14 @@ class App extends Component {
) : null}
<div id="video-container" className="col-md-6">
{this.state.publisher !== undefined ? (
<div className="stream-container col-md-6 col-xs-6">
<div className="stream-container col-md-6 col-xs-6" onClick={() => this.handleMainVideoStream(this.state.publisher)}>
<UserVideoComponent
streamManager={this.state.publisher}
mainVideoStream={this.handleMainVideoStream}
/>
streamManager={this.state.publisher} />
</div>
) : null}
{this.state.subscribers.map((sub, i) => (
<div key={i} className="stream-container col-md-6 col-xs-6">
<UserVideoComponent streamManager={sub} mainVideoStream={this.handleMainVideoStream} />
<div key={i} className="stream-container col-md-6 col-xs-6" onClick={() => this.handleMainVideoStream(sub)}>
<UserVideoComponent streamManager={sub} />
</div>
))}
</div>
@ -297,16 +297,16 @@ class App extends Component {
console.log(error);
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' +
OPENVIDU_SERVER_URL,
OPENVIDU_SERVER_URL,
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. ' +
'If no certificate warning is shown, then check that your OpenVidu Server is up and running at "' +
OPENVIDU_SERVER_URL +
'"',
OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. ' +
'If no certificate warning is shown, then check that your OpenVidu Server is up and running at "' +
OPENVIDU_SERVER_URL +
'"',
)
) {
window.location.assign(OPENVIDU_SERVER_URL + '/accept-certificate');

9
openvidu-insecure-react/src/OvVideo.js
View File

@ -1,19 +1,17 @@
import React, { Component } from 'react';
export default class OpenViduVideoComponent extends Component {
constructor(props) {
super(props);
console.log(props);
this.videoRef = React.createRef();
}
/*componentWillReceiveProps(props) {
componentDidUpdate(props) {
if (props && !!this.videoRef) {
this.props.streamManager.addVideoElement(this.videoRef.current);
}
}*/
}
componentDidMount() {
if (this.props && !!this.videoRef) {
@ -24,4 +22,5 @@ export default class OpenViduVideoComponent extends Component {
render() {
return <video autoPlay={true} ref={this.videoRef} />;
}
}

17
openvidu-insecure-react/src/UserVideoComponent.js
View File

@ -1,12 +1,10 @@
import React, { Component } from 'react';
import './UserVideo.css';
import OpenViduVideoComponent from './OvVideo';
import './UserVideo.css';
export default class UserVideoComponent extends Component {
constructor(props) {
super(props);
this.handleVideoClicked = this.handleVideoClicked.bind(this);
}
getNicknameTag() {
@ -14,22 +12,13 @@ export default class UserVideoComponent extends Component {
return JSON.parse(this.props.streamManager.stream.connection.data).clientData;
}
handleVideoClicked(event) {
// Triggers event for the parent component to update its main video display (other UserVideoComponent)
if (this.props.mainVideoStream) {
this.props.mainVideoStream(this.props.streamManager);
}
}
render() {
return (
<div>
{this.props.streamManager !== undefined ? (
<div className="streamcomponent" onClick={this.handleVideoClicked}>
<div className="streamcomponent">
<OpenViduVideoComponent streamManager={this.props.streamManager} />
<div>
<p>{this.getNicknameTag()}</p>
</div>
<div><p>{this.getNicknameTag()}</p></div>
</div>
) : null}
</div>