search

facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.22k forks source link

VideoModule Error - TypeError: Cannot read property 'createPlayer' of undefined #653

Open nafiou opened 5 years ago

nafiou commented 5 years ago

We use GitHub Issues for bugs and feature requests Hello, I got "Cannot read property createPlayer of undifned" When trying to use VideoModule here is my index.js `import React from 'react'; import { VideoModule, staticResourceURL, AppRegistry, StyleSheet, Text, View, VrButton, Environment, asset, } from 'react-360';

export default class weflyVr extends React.Component {

state = { count: 0, background:'360_world.jpg', };

// This method increments our count, triggering a re-render _incrementCount = () => { const player = VideoModule.createPlayer('myplayer'); // Play a specific video player.play({ source: {url: staticResourceURL('path/to/video.mp4')}, // provide the path to the video stereo: '3DTB', // optionally, supply the format of the video });

  Environment.setBackgroundVideo('myplayer'); // or you can use player._player which is same value

  Environment.setScreen(
    'default', /* screen name */
    'myplayer', /* player unique id */
    'default', /* surface name */
    0, 0, 600, 400 /* relative position on the surface */
  );

};

render() { return (

{`Count: ${this.state.count}`} 
);

}

};

const styles = StyleSheet.create({ panel: { // Fill the entire surface width: 1000, height: 600, backgroundColor: 'rgba(255, 255, 255, 0.4)', justifyContent: 'center', alignItems: 'center', }, greetingBox: { padding: 20, backgroundColor: '#000000', borderColor: '#639dda', borderWidth: 2, }, greeting: { fontSize: 30, }, });

AppRegistry.registerComponent('weflyVr', () => weflyVr); `

Additional Information

andrewimm commented 5 years ago

Please list which versions of npm packages you are using, I can't give an answer without it. That is why we provide that field at the bottom.

drubio1989 commented 5 years ago

@andrewimm I'll provide the information as I am also having a problem creating a video player. I also get undefined for const player = VideoModule.createPlayer('myplayer');

react-360": "~1.0.0" "react-360-web": "~1.0.0" "react-native": "~0.49.5" "react": "16.0.0"

I get this error with a fresh install from the npm package.

drubio1989 commented 5 years ago

@nafiou After having some time to look around on this, the packages are being imported improperly to start off with. The documentation is wrong. Import VideoModule like so:

import { NativeModules } from 'react-360';

const {VideoModule} = NativeModules;

This will resolve the const player = VideoModule.createPlayer('myplayer'); part of the code. However, you'll run into another problem saying that the variable player is undefined. I'm going to open up another issue seperately.