React-360: [Question] How should I attempt video?

[dukuo]

Hi, I'm trying to implement 2D video in a project, right now i'm able to create the video texture & mesh right in the client.js and adding the scene right there, but I think it lacks flexibility. The thing is, and correct me if i'm wrong, since we don't have any access to the scene nor the camera right from the NativeModule it's currently not possible to create geometry on the fly anywhere but the client.js. Is there any approach while we wait for the VideoModule? Thanks in advance!

[amberroy]

Yes you would need to do it on the native side, either in client.js or in a Native Module. Both audio and 2D video support are highly requested features that are in active development.

[dukuo]

Thanks @amberroy ! Right now I successfully created a HTML5 video, then applied to a THREE.VideoTexture and added to the scene in client.js and managed to created a very simple VideoModule boilerplate to handle play(), pause() and so on. The thing is that while it works fine and web and I could reuse the mesh when playing a new video in the scene (supposing i'm only playing one video at any given moment) it doesn't work properly on mobile because the VRButton's onClick who is issuing the play() and pause() methods is not bubbling correctly to the VideoModule, giving me the following DOMException: Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

To clarify, i'm initializing VideoModule this way: VideoModule.init(video, mesh), video being the HTML5 and the THREE mesh, and the VideoModule.play() just does video.play(), same thing with pause(). So my current workflow for playing a video is:

client.js: Creates HTML5 video, a VideoTexture and the mesh, both added to scene and then initialized in VideoModule.init(video, mesh)

index.vr.js: VRButton.onClick => _handleVideo() => VideoModule.play()

Any ideas on why this might happen? Thank you!

[Ninerian]

The problem is the limitation of the browsers. As the message states, it needs a user gesture to start a video. It is the same problem as with enabling fullscreen.

In VR the click handling is purely handled by javascript and so the browser can't root the event to a user gesture and fails to play the video.

One solution would be to catch the event which triggers the vr mode and use this to play all videos in the scene and pause them instantly. The resume of the video shouldn't be bound to a user gesture.

Unfortunately it would be not possible to add videos later. So for a more complex scene this use case it not suited.

[dukuo]

@Ninerian you mean the "View in VR" button? That's a good suggestion, i'm going to try it right now. I'll post the result here. Thanks

[andrewimm]

A recent release introduced the <Video> tag, which allows you to do all of the things requested above.

https://facebook.github.io/react-vr/docs/video.html