Play adaptive content using Dash.js Player

​

Prerequisites

• Set up your app to use the W3C Media Player. For more information, see Media Player Setup.
• Make the following additional updates to enable the Adaptive Playback:
  • Open the package.json in your app folder. In the dependencies section, include the following dependencies.
    "xmldom": "^0.8.10",
    "base-64": "1.0.0",
    "fastestsmallesttextencoderdecoder": "1.0.22"
    

​

Configure the Dash.js player for Vega

1. Download the Dash.js Player for Vega to a known location. To download the Vega Media Player patch for a specific Dash.js version, click the corresponding version number in the following list.
   • dash-rel-v5.0.0-r1.8 - Migrated deprecated xmldom to @xmldom/xmldom.
   • dash-rel-v5.0.0-r1.7 - Fixes an issue where the MediaError type was not imported and used globally in the DASH reference application. Previously, when a media error occurred, the application would remain on a black screen indefinitely instead of surfacing the appropriate error state to the user.
2. Expand the Dash.js Player package.
   tar -xzf dash-rel-v<x.y.z>-r<a.b>.tar.gz
   
   For example.
   tar -xzf dash-rel-v5.0.0-r1.3.tar.gz
   
3. Navigate to the /dash-rel/scripts directory.
4. Run the setup.sh helper script.

• From the generated dash.js directory, copy the contents of the dash-rel/src/* directory to <app root>/src/*.
• From the generated dash.js directory, copy the dist directory to <app root>/src/dashjsplayer/dist.

​

Play adaptive content

​

To play adaptive content with Dash.js player

• Open your src/App.tsx and replace the contents with following code.
  import * as React from 'react';
  import {useRef, useState, useEffect} from 'react';
  import {
    Platform,
    useWindowDimensions,
    View,
    StyleSheet,
    TouchableOpacity,
    Text,
  } from 'react-native';
  
  import {
    VideoPlayer,
    VegaVideoSurfaceView,
    VegaCaptionsView,
  } from '@amazon-devices/react-native-w3cmedia';
  import { DashJsPlayer } from './dashjsplayer/DashJsPlayer';
  
  // import polyfills
  import Document from './polyfills/DocumentPolyfill';
  import Element from './polyfills/ElementPolyfill';
  import TextDecoderPolyfill from './polyfills/TextDecoderPolyfill';
  import W3CMediaPolyfill from './polyfills/W3CMediaPolyfill';
  import MiscPolyfill from './polyfills/MiscPolyfill';
  
  // install polyfills
  Document.install();
  Element.install();
  TextDecoderPolyfill.install();
  W3CMediaPolyfill.install();
  MiscPolyfill.install();
  
  // set to false if app wants to call play API on video manually
  const AUTOPLAY = true;
  
  const DEFAULT_ABR_WIDTH: number = Platform.isTV ? 3840 : 1919;
  const DEFAULT_ABR_HEIGHT: number = Platform.isTV ? 2160 : 1079;
  
  const content = [
    {
      secure: 'false', // true : Use Secure Video Buffers. false: Use Unsecure Video Buffers.
      uri: 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
      drm_scheme: '', // com.microsoft.playready, com.widevine.alpha
      drm_license_uri: '', // DRM License acquisition server URL : needed only if the content is DRM protected
    },
  ];
  
  export const App = () => {
    const player = useRef<any>(null);
    const videoPlayer = useRef<VideoPlayer | null>(null);
    const timeoutHandler = useRef<ReturnType<typeof setTimeout> | null>(null);
    const [buttonPress, setButtonPress] = useState(false);
    const [nextContent, setNextContent] = useState({index: 0}); // { index: number }
    // Track the nextContent state for re-rendering
    const nextContentRef = useRef<number>(0);
    // Render in Full screen resolution
    const {width: deviceWidth, height: deviceHeight} = useWindowDimensions();
  
    useEffect(() => {
      if (nextContent.index !== nextContentRef.current) {
        nextContentRef.current = nextContent.index;
        // Force Re-rendering of <Video> component.
        initializeVideoPlayer();
        setNextContent((prev) => {
          return {...prev};
        });
      }
    }, [nextContent]);
  
    useEffect(() => {
      console.log('app:  start AppPreBuffering v13.0');
      initializeVideoPlayer();
    }, []);
  
    const onEnded = async () => {
      console.log('app: onEnded received');
      player.current.unload();
      player.current = null;
      await videoPlayer.current?.deinitialize();
      removeEventListeners();
      onVideoUnMounted();
      setNextContent({index: (nextContent.index + 1) % content.length});
    };
  
    const onError = () => {
      console.log(`app: AppPreBuffering: error event listener called`);
    };
  
    const setUpEventListeners = (): void => {
      console.log('app: setup event listeners');
      videoPlayer.current?.addEventListener('ended', onEnded);
      videoPlayer.current?.addEventListener('error', onError);
    };
  
    const removeEventListeners = (): void => {
      console.log('app: remove event listeners');
      videoPlayer.current?.removeEventListener('ended', onEnded);
      videoPlayer.current?.removeEventListener('error', onError);
    };
  
    const initializeVideoPlayer = async () => {
      console.log('app: calling initializeVideoPlayer');
      videoPlayer.current = new VideoPlayer();
      // @ts-ignore
      global.gmedia = videoPlayer.current;
      await videoPlayer.current.initialize();
      setUpEventListeners();
      videoPlayer.current!.autoplay = false;
      initializeDash();
    };
  
    const onSurfaceViewCreated = (surfaceHandle: string): void => {
      console.log('app: surface created');
      videoPlayer.current?.setSurfaceHandle(surfaceHandle);
      videoPlayer.current?.play();
    };
  
    const onSurfaceViewDestroyed = (surfaceHandle: string): void => {
      videoPlayer.current?.clearSurfaceHandle(surfaceHandle);
    };
  
    const onCaptionViewCreated = (captionsHandle: string): void => {
      console.log('app: caption view created');
      videoPlayer.current?.setCaptionViewHandle(captionsHandle);
    };
  
    const initializeDash = () => {
      console.log('app: in initializePlayer() index = ', nextContent.index);
      if (videoPlayer.current !== null) {
        player.current = new DashJsPlayer(videoPlayer.current);
      }
      if (player.current !== null) {
        player.current.load(content[nextContent.index], AUTOPLAY);
      }
    };
  
    const onVideoUnMounted = (): void => {
      console.log('app: in onVideoUnMounted');
      // @ts-ignore
      global.gmedia = null;
      videoPlayer.current = null;
    };
  
    if (!buttonPress) {
      return (
        <View style={styles.container}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setButtonPress(true);
            }}
            hasTVPreferredFocus={true}
            activeOpacity={1}>
            <Text style={styles.buttonLabel}> Press to Play Video </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return nextContent.index === nextContentRef.current ? (
        <View style={styles.videoContainer}>
          <VegaVideoSurfaceView
            style={styles.surfaceView}
            onSurfaceViewCreated={onSurfaceViewCreated}
            onSurfaceViewDestroyed={onSurfaceViewDestroyed}
          />
          <VegaCaptionsView
            onCaptionViewCreated={onCaptionViewCreated}
            style={styles.captionView}
          />
        </View>
      ) : (
        <View style={styles.videoContainer}></View>
      );
    }
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: '#283593',
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      alignItems: 'center',
      backgroundColor: '#303030',
      borderColor: 'navy',
      borderRadius: 10,
      borderWidth: 1,
      paddingVertical: 12,
      paddingHorizontal: 32,
    },
    buttonLabel: {
      color: 'white',
      fontSize: 22,
      fontFamily: 'Amazon Ember',
    },
    videoContainer: {
      backgroundColor: 'white',
      alignItems: 'stretch',
    },
    surfaceView: {
      zIndex: 0,
    },
    captionView: {
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      position: 'absolute',
      backgroundColor: 'transparent',
      flexDirection: 'column',
      alignItems: 'center',
      zIndex: 2,
    }
  });
  
• Use the Vega SDK to build the app, run it on device or simulator and collect logs. For more details about building and running apps on the simulator or device, see Create a Vega App, Vega Virtual Device, and Run your app on Fire TV Stick.

  ​

  To integrate the Dash.js player manually

1. Clone the Dash.js package from https://github.com/Dash-Industry-Forum/dash.js.
   cd <root dir>
   git clone https://github.com/Dash-Industry-Forum/dash.js.git
   
2. Reset hard to a specific commit.
   cd dash.js
   git reset --hard ca4c7aa0227d001bb31801faa61a2d57c4e14da4
   
3. Checkout the git branch based on v5.0.0 to a local branch named v5.0.0-kepler.
   git checkout -b v5.0.0-kepler
   
4. Download the Vega Dash.js Player package to a known location where you will expand the file.
5. Expand the file.
   tar -xzf dash-rel-v[x.y.z]-r[x.y].tar.gz
   
6. Apply the Dash.js patches:
   git apply dash-rel/dash-patch/*.patch -3
   
7. Install the Dash.js dependencies by running npm install.
   npm install
   
8. Build the Dash.js Player by running npm run build.
   npm run build  
   

npm install --save base-64   
npm install --save xmldom

​

Related topics

• W3C Media Player Overview
• Play adaptive content using Hls.js Player
• Play adaptive content (HLS/DASH) with Shaka Player
• Media Player playlist playback