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.
class HomeScreen extends React.Component() {
esta línea debería ir sin los paréntesis al final deReact.Component
, depronto eso causa extender una clase que no existe y por eso el error de "super"