How to play encrypted HLS & DASH play in React with Shaka Player

**Shaka Player **is an open-source JavaScript library designed for adaptive media playback. Here are some key points about Shaka Player based on the information gathered from multiple sources:

1. Media Formats: Shaka Player supports adaptive media formats including Dynamic Adaptive Streaming over HTTP (DASH), Apple's HTTP Live Streaming (HLS), and Microsoft Smooth Streaming (MSS), allowing it to play various media formats in a browser without needing plugins or Flash​.
2. Web Standards: It leverages open web standards such as MediaSource Extensions (MSE) and Encrypted Media Extensions (EME) to facilitate media playback and handling of adaptive bitrate streaming, which dynamically adjusts the quality of a video stream in real-time based on the network conditions​.
3. DRM Services: Shaka Player is notable for its support of Digital Rights Management (DRM) services, which are crucial for content protection. It binds the Video Element and Widevine Content Decryption Module (CDM) by utilizing the EME API to handle adaptive bitrate streaming, ensuring that the quality of the media adapts to the user's bandwidth​.
4. Popularity: It's recognized as the second-most-popular library for media playback, which highlights its reliability and widespread acceptance in the developer community​.
5. Deployment: Shaka Player is designed to be compiled before being deployed, indicating a level of flexibility and control for developers who want to integrate it into their projects​.
6. Maintained by Google: The player is maintained by Google, which suggests a level of credibility and support for the library.

How to use React or Next js

There are lots more packages available on the NPM Packager manager but all of the packages are backdated and there are errors. Also, all packages did not support typescript. So in that case I created a typescript-supported Shaka player for React or Nextjs.
shaka-react-video-player This is best to use for React 16, 17, and 18 versions.

How to use shaka-react-video-player

Installation

npm install shaka-react-video-player --save
yarn add shaka-react-video-player

Usage

import React from 'react';
import ShakaPlayer from 'shaka-react-video-player';
import 'shaka-react-video-player/dist/controls.css';
import 'shaka-react-video-player/dist/themes.css';

function App() {
  return (
    <ShakaPlayer
      autoPlay
      theme="youtube"
      src="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
    />
  );
}

The following ShakaPlayer properties are supported by all of the video tags in HTML:

Property	Description	Type
src	The MPEG-DASH, or HLS media asset. Is provided to shaka.Player.load on mount or change.	String
autoPlay	Whether the asset should autoplay or not, directly bound to the HTMLVideoElement element.	Boolean
width	Width of the player.	Number
height	Height of the player.	Number
playbackRate	Sets the speed of the audio/video playback.	Number
muted	Sets whether the video is muted or not	Boolean
loop	Sets whether the audio/video should start over again when finished	Boolean
volume	Sets the volume of the audio/video	Number
className	Adds a class to the root element, which is a div.	String
themes	There have 'default, youtube'	String

Note: Follow the npm documentation.

What's needed for improvement?

You guys need to support for this package improvement. Please feel free to contribute to this package.
Here is GitHub: shaka-react-video-player

What issue did I find here?

1. HLS not working without "mux.js"
Dash is working fine but HSL not working without including mux.js.

import muxjs from 'mux.js';
interface MyWindow extends Window {
muxjs: string;
player: any
}
(window as MyWindow & typeof globalThis).muxjs = muxjs;

I need to remove this link of code and want it to work perfectly. So please anyone help and contribute there.

2. Typescript Support properly
This package not properly working typescript. Does anyone else work also there?

Please contribute and improve this package for React Lover.