Live Streaming With Dash

index.vr.js

@@ -22,27 +22,29 @@ export default class FanSourceVR extends React.Component {
       <View>
         <Pano source={asset('stadium_pano.jpg')}/>
 
-        {/*<Text*/}
-          {/*style={{*/}
-            {/*backgroundColor: '#777879',*/}
-            {/*fontSize: 0.8,*/}
-            {/*fontWeight: '400',*/}
-            {/*layoutOrigin: [0.5, 0.5],*/}
-            {/*paddingLeft: 0.2,*/}
-            {/*paddingRight: 0.2,*/}
-            {/*textAlign: 'center',*/}
-            {/*textAlignVertical: 'center',*/}
-            {/*transform: [{translate: [0, 0, -3]}],*/}
-          {/*}}>*/}
-          {/*hello*/}
-        {/*</Text>*/}
-        <Video
-          style={{height: 2.25, width: 4}}
-          source={asset('elephants-dream.webm')}
-          playerState={this.state.playerState} />
-        <VideoControl
-          style={{height: 0.2, width: 4}}
-          playerState={this.state.playerState} />
+        <View
+          style={{
+            alignItems: 'center',
+            layoutOrigin: [0.5, 0.5, 0],
+            transform: [{translate: [0, 0, -4]}],
+          }}>
+          <Video
+            style={{height: 2.25, width: 4}}
+            source={[
+              asset('car/car-20120827-85.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-86.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-87.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-88.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-89.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-8b.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-8c.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-8d.mp4', {format: 'mp4'}),
+              asset('car/car-20120827-manifest.mpd', {format: 'mpd'}),
+            ]}
+            playerState={this.state.playerState}
+          />
+          <VideoControl style={{height: 0.2, width: 4}} playerState={this.state.playerState} />
+        </View>
       </View>
     );
   }

package.json

@@ -10,14 +10,16 @@
     "test": "jest"
   },
   "dependencies": {
+    "dashjs": "~2.4.1",
     "ovrui": "~2.0.0",
     "react": "16.0.0",
     "react-native": "~0.48.0",
-    "three": "^0.87.0",
     "react-vr": "~2.0.0",
-    "react-vr-web": "~2.0.0"
+    "react-vr-web": "~2.0.0",
+    "three": "^0.87.0"
   },
   "devDependencies": {
+    "tar-fs": "~1.15.2",
     "babel-jest": "^19.0.0",
     "babel-preset-react-native": "^1.9.1",
     "jest": "^19.0.2",
@@ -27,5 +29,9 @@
   },
   "jest": {
     "preset": "react-vr"
+  },
+  "peerDependencies": {
+    "react": "~15.4.1",
+    "react-native": "~0.42.0"
   }
 }

vr/DashVideoPlayer.js

@@ -0,0 +1,27 @@
+import {BasicVideoPlayer, getSupportedFormats} from 'react-vr-web';
+import dashjs from 'dashjs';
+
+const browserSupportedFormat = getSupportedFormats();
+const dashFormats = ['mp4', 'webm'];
+const dashSupportedFormats = dashFormats.filter((format) => {
+  return browserSupportedFormat.indexOf(format) > -1;
+});
+
+export default class DashVideoPlayer extends BasicVideoPlayer {
+  static supportedFormats: ?Array<string> = dashSupportedFormats;
+
+  constructor() {
+    super();
+    this.player = dashjs.MediaPlayer().create();
+    this.player.setScheduleWhilePaused(true);
+  }
+  initializeVideo(mpdUrl, metaData) {
+    this.videoElement.crossOrigin = 'anonymous';
+    this._bindMediaEvents();
+    this.player.initialize(this.videoElement, mpdUrl, false);
+  }
+  dispose() {
+    this.player.reset();
+    super.dispose();
+  }
+}

vr/client.js

@@ -4,8 +4,11 @@
 
 // Auto-generated content.
 import {VRInstance} from 'react-vr-web';
+import {addCustomizedVideoPlayer} from 'react-vr-web';
+import DashVideoPlayer from "./DashVideoPlayer";
 
 function init(bundle, parent, options) {
+  addCustomizedVideoPlayer(DashVideoPlayer)
   const vr = new VRInstance(bundle, 'FanSourceVR', parent, {
     // Add custom options here
     ...options,