How to play encrypted HLS & DASH play in React with Shaka Player
Tags: react, shakaplayer, hls
Published: 2023-10-05 12:38:02

**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](https://www.npmjs.com/package/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
```javascript
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](https://github.com/foridpathan/react-shaka-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.