Shaka-player: How to add mux.js for shaka in Reactjs app

[ViuLive]

I'm using shaka player in ReactJs application. How can I load mux.js before loading shaka player?

import React from 'react'
import shaka from 'shaka-player'

export default class HexPlayer extends React.Component {
  componentDidMount() {
    shaka.polyfill.installAll();
    if (shaka.Player.isBrowserSupported()) {
    var video = document.getElementById('video');
    var player = new shaka.Player(video);
      window.playerShaka = player;
      this.initPlayer();
    } else {
      console.error('Browser not supported!');
    }
  }
  componentWillReceiveProps(nextProps){
    if(nextProps.url !== this.props.url){
      this.initPlayer(true,nextProps.url);
    }
}
initPlayer(kill,url){
    playerShaka.addEventListener('error', this.onErrorEvent);
    if(kill){
      playerShaka.unload();
      console.log("The Url is:"+url)
      playerShaka.load(url).then(function() {
        console.log('The video has now been loaded!');
      }).catch(err=>{
        this.onError 
        console.log("err 1")
        console.log(err)
      }
    ); 
    }
    else{
      console.log("The Url is:"+this.props.url)
      playerShaka.load(this.props.url).then(function() {
        console.log('The video has now been loaded!');
      }).catch(err=>{
        this.onError
        console.log("err 2")
        console.log(err)
      }); 
    }

  }
onErrorEvent = (event) =>{
  this.props.errorHandler(event)
  this.onError(event.detail);
}

onError(error) {
  console.log("Error occured2")
  console.error('Error code', error.code, 'object', error);
}

componentWillUnmount() {
  playerShaka.unload(this.props.url).then(function() {
    console.log('The video has now been stopped!');
  }).catch(err=>{
  })

}
  render() {
    return (
    <div>
      <video id="video"
            width="100%"
            height='500'
            poster={this.props.poster}
            controls={true}
            autoPlay={true}>
          </video>
    </div>
  );
  }
}

[joeyparrish]

Add a <script> tag to your HTML that loads mux.js. As long as it is loaded before you instantiate an instance of shaka.Player, you will get the benefit of mux.js in that instance.

Does this answer your question?

[GlitterCakes]

Is this REALLY the only way to do this? It's just sloppy for a react app. I too have this problem and @joeyparrish s solution does work for me but it's not good.

[joeyparrish]

I'm sorry, my team doesn't have experience with react. I wish I had a better solution for you, but I'm unlikely to be able to find a more react-appropriate one myself.

How does a reactjs app typically load external JavaScript? How do you load Shaka Player in react?

[joeyparrish]

Oh, silly question. I just looked at the original post, which has an example of importing Shaka.

Can mux.js be imported the same way?

[GlitterCakes]

If mux is imported the same way it does not work, I don't know for sure but if I had to guess I'd say that mux is out of scope from shaka-player so when shaka-player checks to see if it exists to make use of it it fails to locate it.

[joeyparrish]

Shaka looks for mux in the global environment, by checking window.muxjs. Can you import mux and then attach it to the window?

[GlitterCakes]

A great idea in my opinion would be to have mux as an optional npm dependency for shaka-player. Have shaka-player automatically make use of it if it's been included in the project.

[GlitterCakes]

@joeyparrish Your advice on attaching it to window has worked, i was trying to attach it as "mux" but i noticed you said "muxjs" and now I have it working. For anyone else that needs to enable mux when using react, the following works

I created a component for shaka-player, in the top of my class file I did

import muxjs from "mux.js";

Then I assigned it within my components class constructor like this

window.muxjs = muxjs;

Thank you for the advice I really appreciate it.

[joeyparrish]

I'm glad we were able to find a solution between the two of us. Thanks for contributing to the discussion!