HTML to Markdown
YouTube
Convent Text

Set up the Shaka Player in your Angular application.

Recently, at my company, we started using Shaka Player in our web apps for playing media.

Shaka Player is an excellent open-source JavaScript library from Google. It plays DASH and HLS without using any browser plugins. This works by using the standard MediaSource Extensions and Encrypted Media Extensions.

We had some experience with Shaka Player but did not use it in our production apps. Although the documentation of Shaka Player is excellent, there was no documentation on how to integrate the Shaka Player Library into Angular.

As we succeeded in integrating Shaka Player into our Angular apps, this article describes in detail how we did it.

We switched from Azure Media Player to Shaka Player because we switched to a different encoding and packaging solution. Microsoft tightly coupled Azure Media Player to the Azure Media Service Platform, so the packaged media did not correctly play from our new packaging platform.

The source of the Angular app and the Shaka Player Angular component can be found in this Github repository.

How to Get and Compile Shaka Player

There are three ways you can get Shaka Player.

• You can compile it from the source
• You can install it using npm
• You can use google CDN to directly link to it

We are going to compile it from the source. This allows us to switch from release to a debug version if necessary. To compile the library, you have to install the required tools, get the source from GitHub, and run the build script in Python.
React is an easy to use JavaScript framework that lets us create front end apps.
​
In this article, we’ll look at how to create a currency converter with React and JavaScript.
​

Create the Project

​
We can create the React project with Create React App.
​
To install it, we run:
​

npx create-react-app currency-converter

​
with NPM to create our React project.
​

Create the Currency Converter

​
To create the currency converter, we write:
​

import React, { useMemo, useState } from "react";
​
export default function App() {
  const [value, setValue] = useState(0);
  const [fromCurrency, setFromCurrency] = useState("");
  const [toCurrency, setToCurrency] = useState("");
  const [currencies] = useState(["EUR", "USD", "CAD"]);
  const [result, setResult] = useState(0);

#web-development #javascript #technology #programming