From e4f284f60ad292bcbe12e80da4445f3a5272e15c Mon Sep 17 00:00:00 2001 From: CSantos <4a.santos@gmail.com> Date: Tue, 9 Jul 2019 16:32:27 +0200 Subject: [PATCH] openvidu-react-native: Added mute/unmute camera funcionality --- openvidu-react-native/App.js | 206 +++++++++++------- .../openvidu_grey_bg_transp_cropped.png | Bin 0 -> 39532 bytes 2 files changed, 128 insertions(+), 78 deletions(-) create mode 100644 openvidu-react-native/resources/images/openvidu_grey_bg_transp_cropped.png diff --git a/openvidu-react-native/App.js b/openvidu-react-native/App.js index 8b726e07..d831d8d8 100644 --- a/openvidu-react-native/App.js +++ b/openvidu-react-native/App.js @@ -7,7 +7,19 @@ */ import React, { Component } from 'react'; -import { Platform,TextInput, ScrollView, Button, Alert, Linking, StyleSheet, Text, View, PermissionsAndroid } from 'react-native'; +import { + Platform, + TextInput, + ScrollView, + Button, + Alert, + Linking, + StyleSheet, + Text, + View, + Image, + PermissionsAndroid, +} from 'react-native'; import { OpenVidu } from 'openvidu-browser'; import { RTCView } from './node_modules/openvidu-browser/node_modules/react-native-webrtc'; @@ -16,6 +28,7 @@ import axios from 'axios'; const OPENVIDU_SERVER_URL = 'https://demos.openvidu.io:4443'; const OPENVIDU_SERVER_SECRET = 'MY_SECRET'; + type Props = {}; export default class App extends Component { constructor(props) { @@ -30,11 +43,11 @@ export default class App extends Component { role: 'PUBLISHER', mirror: true, videoSource: undefined, + camera: true, }; } - componentDidMount() { - } + componentDidMount() {} componentWillUnmount() { this.leaveSession(); @@ -85,7 +98,7 @@ export default class App extends Component { joinSession() { // --- 1) Get an OpenVidu object --- - + this.OV = new OpenVidu(); // --- 2) Init a session --- @@ -130,14 +143,12 @@ export default class App extends Component { mySession .connect(token, { clientData: this.state.myUserName }) .then(() => { - if (Platform.OS == 'android') { this.checkAndroidPermissions(); } - + // --- 5) Get your own camera stream --- if (this.state.role !== 'SUBSCRIBER') { - const properties = { audioSource: undefined, // The source of audio. If undefined default microphone videoSource: undefined, // The source of video. If undefined default webcam @@ -146,7 +157,7 @@ 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' - } + }; // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video // element: we will manage it on our own) and with the desired properties let publisher = this.OV.initPublisher(undefined, properties); @@ -156,11 +167,10 @@ export default class App extends Component { // Set the main video in the page to display our webcam and store our Publisher this.setState({ mainStreamManager: publisher, - videoSource: !properties.videoSource ? '1' : properties.videoSource // 0: back camera | 1: user camera | + videoSource: !properties.videoSource ? '1' : properties.videoSource, // 0: back camera | 1: user camera | }); mySession.publish(publisher); } - }) .catch((error) => { console.log('There was an error connecting to the session:', error.code, error.message); @@ -173,7 +183,7 @@ export default class App extends Component { getNicknameTag(stream) { // Gets the nickName of the user - if(stream.connection && JSON.parse(stream.connection.data) && JSON.parse(stream.connection.data).clientData) { + if (stream.connection && JSON.parse(stream.connection.data) && JSON.parse(stream.connection.data).clientData) { return JSON.parse(stream.connection.data).clientData; } return ''; @@ -212,18 +222,20 @@ export default class App extends Component { mainStreamManager: undefined, publisher: undefined, }); - }) + }); } - toggleCamera(){ - + toggleCamera() { /** * _switchCamera() Method provided by react-native-webrtc: * This function allows to switch the front / back cameras in a video track on the fly, without the need for adding / removing tracks or renegotiating */ - - this.state.mainStreamManager.stream.getMediaStream().getVideoTracks()[0]._switchCamera(); - this.setState({mirror: !this.state.mirror}); + + this.state.mainStreamManager.stream + .getMediaStream() + .getVideoTracks()[0] + ._switchCamera(); + this.setState({ mirror: !this.state.mirror }); /** * Traditional way: @@ -257,76 +269,105 @@ export default class App extends Component { */ } - render() { + muteUnmuteCamera() { + this.state.mainStreamManager.publishVideo(!this.state.camera); + this.setState({ camera: !this.state.camera }); + } + render() { return ( {this.state.mainStreamManager ? ( - - Session: {this.state.mySessionId} - {this.getNicknameTag(this.state.mainStreamManager.stream)} - { - if (!!rtcVideo) { - this.state.mainStreamManager.addVideoElement(rtcVideo); - } - }} - style={styles.selfView} - /> - - -