360 Video

I've been testing video playback from Youtube and Vimeo, here's what it looks like right now:

<!-- Written with Janus VR.  URL: file:///home/avi/art/cyberia/church/cyberia/hackerspace_sphere.html -->
<html>
<head>
<title>Hackerspace</title>
</head>
<body>
<FireBoxRoom>
<Assets>
<AssetObject id="photospheremesh" src="file:///home/avi/art/cyberia/PHOTOSPHEREinFacing.obj" />
<AssetObject id="sphere1" src="https://gitlab.com/janusvr/cyberia/raw/master/church.dae" />
<AssetObject id="sphere2" src="https://gitlab.com/janusvr/cyberia/raw/master/church1.dae" />
<AssetImage id="HacDC" src="https://gitlab.com/janusvr/cyberia/raw/master/hacdc-logo.png" />
<AssetVideo id="vid_id" src="http://www.vrhost.us:80/vtvideo/j81DDY4nvos" loop="true" auto_play="true" />
</Assets>
<Room use_local_asset="room_plane" visible="false" pos="0.000000 0.100000 10.000000" xdir="-1.000000 0.000000 0.000004" ydir="0.000000 1.000000 0.000000" zdir="-0.000004 0.000000 -1.000000" col="0.000000 0.000000 0.000000" default_sounds="false" fog="true" fog_density="0.010000" fog_end="50.000000" fog_col="0.600000 0.600000 0.600000">
<Object id="sphere1" js_id="172s2" pos="0.000000 1.500000 0.000000" scale="1.000000 0.700000 1.000000" lighting="false" cull_face="none" collision_id="sphere1" />
<Object id="sphere2" js_id="17223c" pos="0.000000 1.500000 0.000000" scale="1.000000 0.700000 1.000000" cull_face="none" />
<Object id="photospheremesh" js_id="4" pos="0.000000 3.300000 -6.900000" scale="3.300000 3.300000 3.300000" lighting="false" video_id="vid_id" />
<Image id="HacDC" js_id="dasdas3" pos="0.000000 5.400000 10.400001" xdir="-1.000 0.000 0.000" zdir="0.000 0.000 -1.000" scale="1.500000 1.500000 1.000000" />
</Room>
</FireBoxRoom>
</body>
</html>

You need to first have an AssetObject for the PhotoSphere to map the video on. Also in Assets is the AssetVideo with the src pointing to the actual video file. At the end of the src is the youtubeid of the video (src="http://www.vrhost.us:80/vtvideo/j81DDY4nvos") I haven't quite figured out how to increase the quality of the video from Youtube. The process of getting that video is slightly tricky: I'll show you with Vimeo as an example. I used Firebug but you can open the Firefox inspector with Ctrl-Shift-K. Browse to the video you want and make sure you toggle the desired quality you want and open the inspector. Click the net tab and then look in media, you should see a long URL that gets the video. Copy that location and stick it in a URL shortener.

In the HTML file, this link serves as the src for the AssetVideo. Stick that in there and create an Object with the id of the photosphere [or video screen] and add the video_id="vid_id" at the end to point it to your video. This is how it looks like:

<html>
<head>
<title>Hackerspace</title>
</head>
<body>
<FireBoxRoom>
<Assets>
<AssetObject id="photospheremesh" src="PHOTOSPHEREinFacing.obj" />
<AssetObject id="sphere1" src="church.dae" />
<AssetObject id="sphere2" src="church1.dae" />
<AssetImage id="HacDC" src="hacdc-logo.png" />
<AssetVideo id="vid_id" src="http://goo.gl/g0FcmQ" loop="true" auto_play="true" />
</Assets>
<Room use_local_asset="room_plane" visible="false" pos="0.000000 0.100000 10.000000" xdir="-1.000000 0.000000 0.000004" ydir="0.000000 1.000000 0.000000" zdir="-0.000004 0.000000 -1.000000" col="0.000000 0.000000 0.000000" default_sounds="false" fog="true" fog_density="0.010000" fog_end="50.000000" fog_col="0.600000 0.600000 0.600000">
<Object id="sphere2" js_id="17223c" pos="0.000000 1.500000 0.000000" scale="1.000000 0.700000 1.000000" cull_face="none" />
<Object id="sphere1" js_id="172s2" pos="0.000000 1.500000 0.000000" scale="1.000000 0.700000 1.000000" lighting="false" cull_face="none" collision_id="sphere1" />
<Image id="HacDC" js_id="dasdas3" pos="0.000000 5.400000 10.400001" xdir="-1.000 0.000 0.000" zdir="0.000 0.000 -1.000" scale="1.500000 1.500000 1.000000" />
<Object id="photospheremesh" js_id="1" pos="0.000000 3.300000 -6.900000" scale="3.300000 3.300000 3.300000" lighting="false" video_id="vid_id" />
</Room>
</FireBoxRoom>
</body>
</html>

This is a temporary solution because of the way Vimeo handles session id tokens. The link will die and so will your VideoObject as well. (°ヘ°)"

Sky Fall

Metaverse Hackerspace

Discussions

Become a Hackaday.io Member