three.js streaming video materials with videojs for 360 video

[gak2]

Hi there,

I am attempting to combine threejs with videojs, in order to map streamed 360 video onto a sphere. Wowza is the media streamer.

So I create a video tag, convert it to a videojs object in order to facilitate HLS/DASH streaming, then set that stream as the source for a three.js video material. I can stream over HLS into this videojs object OK:

var gPlayer = videojs('gVideo');
gPlayer.src = "http://localhost:1935/vod/sample/playlist.m3u8";
gPlayer.play();

And separately, I can wrap an mp4 file around a sphere OK

var texture = new THREE.VideoTexture( threeVideo );
texture.generateMipmaps = false; 
texture.magFilter = THREE.LinearFilter; 
texture.minFilter = THREE.LinearFilter;
var material   = new THREE.MeshBasicMaterial( { map : texture } );

But the moment I try to combine these two, by mapping that streaming source to three.js ..

threeVideo.src = "http://localhost:1935/vod/sample/playlist.m3u8";
threeVideo.type="application/x-mpegURL"

.. I get all manner of errors:

WebGL: INVALID_VALUE: texImage2D: no video
255(index):1 [GroupMarkerNotSet(crbug.com/242999)!:24FC430C]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

Any thoughts? Thanks you!!

[makc]

yeah, m3u is not a video, it is a text file that says where the video is

[gak2]

Thank you for the feedback.

As it happens, this wasn't the problem: I have three.js now streaming the .m3u8 URL.

Anyway, not a bug after all - thanks for your help.

[varumora]

May I ask how did you managed to get the video texture from videojs and pass it to three.js? I'm trying to do it too but with no success. Thanks :)

[oschvr]

I'd like to know too gak2

[GurudathTS]

Hello,

Any solution for this issue?

[DiogenesSyndrome]

Hello there,
Did any of you guys manage to find a solution ?
I am also very interested

Thanks

[oschvr]

http://purplepillvr.com/webvr/streaming360/

[DiogenesSyndrome]

Thanks a lot for the quick answer, ostocino.
However, my problem is slightly different; I am trying to map a RTSP stream as a texture on a sphere, not an HLS. The goal is also to be able to play in on VR googles (Oculus).
Do you have any ideas for that ? Or anyone else ?

[danrossi]

@gak2. Minus the CORS issue HLS was working but suddenly now on Safari Yosemite, IOS 9, WebView it is not rendering. No webgl errors, nothing. Just a black screen. Switching back to the video element it is displaying.

Any ideas ?

[danrossi]

please refer here #9754

[Len0re]

Hey! This is EXACTLY what I'm trying to achieve in the past month, and with very little success... Can someone help? I'm also using wowza/videojs for this.

@gak2 can you please tell us how you did it? Thanks!!

[danrossi]

I'm keeping this thread active and cross posting my active tickets with webkit.

#9754