React-360: VideoModule Error - TypeError: Cannot read property 'createPlayer' of undefined

Created on 22 Jan 2019  路  3Comments  路  Source: facebookarchive/react-360

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 (
onClick={this._incrementCount}
style={styles.greetingBox}>
{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

  • 'react-360' package version: [FILL THIS OUT: get this by running npm list react-360]
  • 'react-360-web' package version: [FILL THIS OUT: get this by running npm list react-360-web]
  • Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
  • Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]
  • VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]

Most helpful comment

@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.

All 3 comments

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.

@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.

@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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stu60610 picture stu60610  路  4Comments

tlakomy picture tlakomy  路  3Comments

meta-meta picture meta-meta  路  3Comments

danbugs picture danbugs  路  3Comments

devsatish picture devsatish  路  3Comments