React-360: VideoModule from React side (Cannot read property 'play' of undefined)

[drubio1989]

Description

I am encountering a bug regarding the VideoModule on a clean install of react-360. According to the docs, I can use this piece of code to render video from the React component side:

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
}); 

// Display the background video on the Environment
Environment.setBackgroundVideo('myplayer'); // or you can use player._player which is same value

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

Expected behavior

Video should play depending on what I choose.

Actual behavior

I experience the error Cannot read property 'play' of undefined

Reproduction

Get a clean install of the code, use any video and attempt to create a player variable. The variable will return undefined.

An example of your code that reliably reproduces the issue is ideal.

See the above code. Or refer to the documentation on 360 Photos and Video

Additional Information

• 'react-360' package version: 1.0.0
• 'react-360-web' package version: 1.0.0
• Operating System: MacOS
• Browser: All Browsers
• VR Device: Desktop Mode and mobile

[ansible-comme]

you did remember to import VideoModule?

import {Environment, VideoModule, staticResourceURL} from 'react-360';

[drubio1989]

Hey @ansible-comme, thanks for the reply. I did indeed import the VideoModule but am experiencing the same problem. The player variable continues to be undefined.

Also, for reference for others, the line you posted for importing the VideoModule is incorrect. It took me a little while to figure out. The docs are out dated on the site, and you actually have to import the VideoModule like how it is outlined for the AudioModule.

`import { NativeModules } from react-360;

  const {VideoModule} = NativeModules;
`

If you have any other insight. I sure would appreciate it. 👍

[ansible-comme]

Cheers for the correction! I can't get it to work based on the docs at all...
same error: Cannot read property 'play' of undefined

But went back over an older project and this setup works on a fresh install and still calls VideoModule:

import { NativeModules } from react-360;
const {VideoModule} = NativeModules;

VideoModule.createPlayer('myplayer');

VideoModule.play('myplayer', {
  source: {url: '/static_assets/video.mp4'},
  loop: false,
});

Environment.setBackgroundVideo('myplayer');

Not sure if docs are wrong / bugged or awaiting update, could do with clarification!

Hopefully this stays functional in the meantime..

[drubio1989]

Nice! It is working now. Thanks for the assist friend.

[larrylin28]

Hi @drubio1989, @ansible-comme
The way you end up is for the old apis, if you want to use new apis following the document(I found out there's an issue with document or export)
please try following:

1. make sure you are on latest version: 1.1.0.
2. Use following code to get VideoModule: import VideoModule from 'VideoModule';

[drubio1989]

Hey @larrylin28 thanks again for your input on this issue. However, I still am getting the same error. I have upgraded to the lastest version 1.1.0 (I've confirmed it on the command line and pacakge.json).

Here is my code:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Environment,
  staticResourceURL,
} from 'react-360';

import VideoModule from 'VideoModule';

export default class VideoVR extends React.Component {

  componentDidMount() {
    const player = VideoModule.createPlayer('myplayer');

     player.play({
       source: {url: staticResourceURL('./static_assets/me.mov')}
     });

     Environment.setBackgroundVideo('myplayer'); 
  });

 render() {
   return (
     <View style={styles.panel}>
       <View style={styles.greetingBox}>
         <Text style={styles.greeting}>
           Welcome to React 360
         </Text>
       </View>
     </View>
   );
}
};

AppRegistry.registerComponent('VideoVR', () => VideoVR);

The first issue is import VideoModule from 'VideoModule'; When I try to import the VideoModule this way, I get the following error on the console.

ExceptionsManager.js:63 TypeError: (0 , _react4.staticResourceURL) is not a function

I am assuming that staticResourceURL comes from the VideoModule, so then I try this approach:

import { VideoModule, staticResourceURL } from 'VideoModule'; and receive this error:

TypeError: Cannot read property 'createPlayer' of undefined.

Finally, I use the approach that the documentation has, import {Environment, VideoModule, staticResourceURL} from 'react-360'; and then get the same error:

TypeError: Cannot read property 'createPlayer' of undefined.

[larrylin28]

Please learn how "import" works in ES6.

And your case:
import VideoModule from 'VideoModule';
import {Environment, staticResourceURL} from 'react-360';

[timmhayes]

@drubio1989, try changing it from staticResourceURL to staticAssetURL, as documented in the unresolved pull request #592. I had the same problem.