From 44e5a83975f6bd9de61f40fe0c23c2bd5ae6314b Mon Sep 17 00:00:00 2001 From: CSantos <4a.santos@gmail.com> Date: Mon, 20 May 2019 16:44:41 +0200 Subject: [PATCH] Updated openvidu-react-native --- openvidu-react-native/App.js | 136 +- openvidu-react-native/package-lock.json | 16166 ++++++++++++++++++++++ openvidu-react-native/package.json | 1 + 3 files changed, 16235 insertions(+), 68 deletions(-) create mode 100644 openvidu-react-native/package-lock.json diff --git a/openvidu-react-native/App.js b/openvidu-react-native/App.js index 26f7ffb0..3e3b3d22 100644 --- a/openvidu-react-native/App.js +++ b/openvidu-react-native/App.js @@ -7,10 +7,11 @@ */ import React, { Component } from 'react'; -import { ScrollView, Button, Alert, Linking, StyleSheet, Text, View, PermissionsAndroid } from 'react-native'; +import { Platform, ScrollView, Button, Alert, Linking, StyleSheet, Text, View, PermissionsAndroid } from 'react-native'; import { OpenVidu } from 'openvidu-browser'; import { RTCView } from './node_modules/openvidu-browser/node_modules/react-native-webrtc'; +import axios from 'axios'; const OPENVIDU_SERVER_URL = 'https://demos.openvidu.io:4443'; const OPENVIDU_SERVER_SECRET = 'MY_SECRET'; @@ -21,18 +22,16 @@ export default class App extends Component { super(props); this.state = { - mySessionId: '5552200', + mySessionId: 'SessionA', myUserName: 'Participant' + Math.floor(Math.random() * 100), session: undefined, mainStreamManager: undefined, - publisher: undefined, subscribers: [], role: 'PUBLISHER', }; } componentDidMount() { - this.requestCameraPermission(); this.joinSession(); } @@ -40,7 +39,7 @@ export default class App extends Component { this.leaveSession(); } - async requestCameraPermission() { + async checkAndroidPermissions() { try { const camera = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, { title: 'Camera Permission', @@ -85,7 +84,7 @@ export default class App extends Component { joinSession() { // --- 1) Get an OpenVidu object --- - + this.OV = new OpenVidu(); // --- 2) Init a session --- @@ -103,8 +102,9 @@ export default class App extends Component { // Subscribe to the Stream to receive it. Second parameter is undefined // so OpenVidu doesn't create an HTML video by its own const subscriber = mySession.subscribe(event.stream, undefined); - console.log('streamCreated EVENT', event.stream); + var subscribers = this.state.subscribers; + subscribers.push(subscriber); // Update the state with the new subscribers this.setState({ @@ -114,6 +114,7 @@ export default class App extends Component { // On every Stream destroyed... mySession.on('streamDestroyed', (event) => { + event.preventDefault(); // Remove the stream from 'subscribers' array this.deleteSubscriber(event.stream.streamManager); }); @@ -128,7 +129,11 @@ export default class App extends Component { mySession .connect(token, { clientData: this.state.myUserName }) .then(() => { - console.log('SESSION CONECTADA'); + console.log('SESSION CONNECTED'); + if (Platform.OS === 'android'); { + this.checkAndroidPermissions(); + } + // --- 5) Get your own camera stream --- if (this.state.role !== 'SUBSCRIBER') { // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video @@ -141,17 +146,13 @@ export default class App extends Component { resolution: '640x480', // The resolution of your video frameRate: 30, // The frame rate of your video insertMode: 'APPEND', // How the video is inserted in the target element 'video-container' - mirror: false, // Whether to mirror your local video or not }); - console.log('init publisher OK ', publisher); - // --- 6) Publish your stream --- // Set the main video in the page to display our webcam and store our Publisher this.setState({ - mainStreamManager: publisher, - publisher: publisher, + mainStreamManager: publisher }); mySession.publish(publisher); } @@ -166,6 +167,14 @@ export default class App extends Component { ); } + getNicknameTag(stream) { + // Gets the nickName of the user + if(JSON.parse(stream.connection.data) && JSON.parse(stream.connection.data).clientData) { + return JSON.parse(stream.connection.data).clientData; + } + return ''; + } + deleteSubscriber(streamManager) { setTimeout(() => { let subscribers = this.state.subscribers; @@ -193,17 +202,13 @@ export default class App extends Component { this.setState({ session: undefined, subscribers: [], - mySessionId: '5552200', + mySessionId: 'SessionA', myUserName: 'Participant' + Math.floor(Math.random() * 100), mainStreamManager: undefined, publisher: undefined, }); } - addVideoElement(video) { - this.state.mainStreamManager.addVideoElement(video); - } - toggleCamera(){ this.state.mainStreamManager.stream.getMediaStream().getVideoTracks()[0]._switchCamera(); } @@ -214,15 +219,18 @@ export default class App extends Component { {this.state.mainStreamManager ? ( + Local Stream { if (!!rtcVideo) { - this.addVideoElement(rtcVideo); + this.state.mainStreamManager.addVideoElement(rtcVideo); } }} style={styles.selfView} /> + +