0

Antes que nada muy buenas, es la primera vez que realizo una pregunta en Stack, espero poder brindar toda la información que necesiten para poder dar una mano.

Comencé un proyecto React Native Pero al implementar react-native-nodemediaclient no funciona obtengo el error mencionado en el titulo. Ya revisé muchas publicaciones pero en ninguna encontre la solución: Dejo el código y el package.json por si es un tema de la version de React, estaba en la 0.64.1 y pase a la 0.62.2 porque decían que esa era la solución, pero nada.

package.json

"dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "react": "17.0.1",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-nodemediaclient": "^0.2.17",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.14.3",
    "@babel/runtime": "7.14.0",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }

App.js

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  createBottomTabNavigator,
} from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';
import CameraScreen from './screens/CameraScreen';

const Tab = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const CameraStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Inicio"
        component={HomeScreen}
        options={{tabBarLabel: 'Inicio'}}
      />
    </HomeStack.Navigator>
  );
}

function CameraStackScreen() {
  return (
    <CameraStack.Navigator>
      <CameraStack.Screen
        name="Camera"
        component={CameraScreen}
        options={{tabBarLabel: 'WebCam'}}
      />
    </CameraStack.Navigator>
  );
}

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeStackScreen} />
          <Tab.Screen name="Settings" component={CameraStackScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}

screens/HomeScreen.js

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  Text,
  View,
  StatusBar,
  Platform,
  PermissionsAndroid,
} from 'react-native';
import {NodeMediaClient} from 'react-native-nodemediaclient';

const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.requestMultiple(
      [
        PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      ],
      {
        title: 'Lynx WebCam Camera And Microphone Permission',
        message:
          'Lynx WebCam needs access to your camera ' +
          'so you can take awesome pictures.',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('You can use the camera');
    } else {
      console.log('Camera permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
};

class HomeScreen extends React.Component() {
  constructor() {
    super();
  }

  componentWillMount() {
    if (Platform.OS === 'android') {
      requestCameraPermission();
      NodeMediaClient.setLicense(
        'ZjJhNTIzODAtNGU0ZDUzMjEtY24ubm9kZW1lZGlhLmlTaG93Uk4=-syY8+2t7utLZAKLDs1SaD0EOPC9ft3Zq2SncV7gvMg1vnuEGf6QYMDpiSWj0A7xLhbn62BJHJvi1sGLPKgRflHnT6ysuUfQM7W8fgMA75gbqSCMu4vVqssX+yWCeEIbb5uJ/WHYjSvjSOa0W69TwHB5OSxf0bgAMFo8oJjiSCG16CKRuCHeNQBF8KRh+PYuRDnd3pBmnvE8QyWMDpvtEJd1fSYrGLdwgeO8F4gBKoeXyk2/rpEHKDmm/MKAlHli0/mpz8ejlL6ifAw6rB0TqXfpUMuo6vXpx0bjV7G5wxnOMB5pubn91UWrpRoUhPjadOFiket1DmqPsZFiQGnv0iA==',
      );
    } else if (Platform.OS === 'ios') {
      NodeMediaClient.setLicense(
        'ZjJhNTIzODAtNGU0ZDUzMjEtY24ubm9kZW1lZGlhLmlTaG93Uk4=-CQ2OZOwxN8PmjPnqCO5jINgwytHewwXJgZ4OhYL0Hnh6TDjQJDL/ebvCV34cuN/LPn42+vEbKxVAhqv492V3RmNu2aPKL6+AlYtPNf1eWkFLYa9Q/5GwU22s98fKA6YB5IMQyG30VptasVRctQeIee/lhmGClkvo9Ib+C8rLai6HHzWst/WpfWJeJs9OYgosNcuS+VmydGAy/CkUkT4G2ew80q239GRSJ7g7KREcwgiPrGqPNiDFqtG1T08JD9SXELerQqIp71qaPRMjCDSk26L0Tg22z4/EKcp713bZGs2AnE3ye3RbsLdMfNNUU0j0Qc/PQFNpczkilbHwMDoRaA==',
      );
    }
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          padding: 24,
          backgroundColor: '#333',
        }}>
        <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
        <Text
          style={{
            color: '#fff',
            fontSize: 48,
            marginTop: 36,
            marginBottom: 36,
          }}>
          iShow
        </Text>
        <Text style={{color: '#fff', fontSize: 18}}>
          Please enter a stream name.
        </Text>
      </View>
    );
  }
}

export default HomeScreen;

screens/CameraScreen.js

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {NodeCameraView} from 'react-native-nodemediaclient';
import {View, StatusBar} from 'react-native';

class CameraScreen extends React.Component {
  static navigationOptions = {
    title: 'WebCam',
  };

  constructor() {
    super();
    this.state = {flashenable: false};
  }

  componentWillUnmount() {
    this.vb.stop();
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#333'}}>
        <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
        <NodeCameraView
          style={{flex: 1}}
          ref={vb => {
            this.vb = vb;
          }}
          outputUrl={'Vemos como se resuelve'}
          camera={{cameraId: 1, cameraFrontMirror: true}}
          audio={{bitrate: 32000, profile: 1, samplerate: 44100}}
          video={{
            preset: 12,
            bitrate: 400000,
            profile: 1,
            fps: 15,
            videoFrontMirror: false,
          }}
          smoothSkinLevel={3}
          autopreview={true}
          onStatus={(code, msg) => {
            console.log('onStatus=' + code + ' msg=' + msg);
          }}
        />
      </View>
    );
  }
}

export default CameraScreen;

Pero al corre esto, instala correctamente la Aplicación de muestra pero me figura el error:

TypeError: Super expression must either be null or a function

Desde ya muchas gracias a todos aquellos que ayuden y cualquier consulta estoy a su entera disposición.

5
  • en que linea sale ese error?
    – Pipe
    el 26 may. 2021 a las 18:42
  • Hola, no especifica la linea solo informa el error
    – PatoJAD
    el 27 may. 2021 a las 15:35
  • Pues la única que se me ocurre es esta línea: class HomeScreen extends React.Component() { esta línea debería ir sin los paréntesis al final de React.Component, depronto eso causa extender una clase que no existe y por eso el error de "super"
    – Pipe
    el 27 may. 2021 a las 18:32
  • Sos un genio, No me deja marcar tu respuesta como la correcta pero eso me soluciono el error... No entiendo como no lo vi, muchas gracias!
    – PatoJAD
    el 27 may. 2021 a las 22:49
  • Ahi te la puse como respuesta... me alegra haberte podido ayudar
    – Pipe
    el 27 may. 2021 a las 23:02

1 respuesta 1

0

Pues la única que se me ocurre es esta línea:

class HomeScreen extends React.Component() { 

debería ir sin los paréntesis al final de React.Component, depronto eso causa extender una clase que no existe y por eso el error de "super"

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.