In this lecture we are going to install the ffmpeg webassembly package.
To be more accurate, we're going to install two packages.
The ffmpeg project is split into two packages.
The first package is the core.
It's a fork of the official ffmpeg project with a few adjustments for Webassembly.
The second package is a JavaScript API for loading the core.
It'll provide methods for interacting with the core of ffmpeg.
The developers of this project have decided to split the project into two packages for flexibility.
FFmpeg is a modular tool.
If we need support for a specific codec, we can extend ffmpeg with additional libraries.
If we're not satisfied with the current ffmpeg version, we can swap the core with a different build
of ffmpeg.
As we discussed before, the current version is suitable for our application.
We don't need to use a different version of ffmpeg to generate screenshots.
The core supports MP4 files and screenshot generation.
We should be fine with installing the default packages.
Currently I'm inside the command line for this lecture.
I've decided to turn off the development server.
We're going to be modifying the configuration files in our project.
Whenever we make adjustments to the configuration files, the server needs to be restarted inside the
command line.
Run the following command NPM install at ffmpeg.
FFmpeg at ffmpeg slash core.
Before we start importing these packages.
Additional packages need to be installed to understand why we need to revisit the description of ffmpeg.
For your convenience.
I have a copy of the description as a slide.
Let's read it together.
FFmpeg for the browser and node powered by Webassembly.
You'll notice I'm highlighting the word node.
I want to emphasize this word.
JavaScript can run on the browser and node.
There's a lot of similarities, but there are differences.
For example, take a look at this code snippet.
In this example I'm calling the console dot log function, which is supported in both environments.
However, the value logged by each function will vary from environment to environment.
The document object is supported in the browser but not node.
As for the directory name variable, it's supported in Node but not the browser.
There are dozens of packages with support for the browser and node the developers of packages optimize
them for each environment.
Sadly, the same can't be said for the ffmpeg package.
The code for node is mingled with code for the browser.
In normal circumstances this isn't a big issue.
However, it is an issue with TypeScript.
TypeScript assumes all code will run in the browser.
If it detects code for a node, it will throw an error.
To be clear, I don't think the developers are intentionally causing this error.
Keep in mind the ffmpeg package is experimental.
Not everything is going to be sunshine and roses.
We're going to run into problems.
Hopefully in the future these issues will get resolved.
For the time being, we should tell TypeScript to expect code for NodeJS.
We can install a package with type definitions for node and the command line run the following command
NPM install at types slash node.
Next, we need to configure TypeScript to import these definitions.
Open the TypeScript config dot app dot json file.
It's been a while since we've opened this file.
As a reminder, it's the configuration file for TypeScript.
Angular will use this configuration file for production and development builds.
Inside this file.
We're going to modify the compiler options dot types property.
If this property does not exist in this file, add it in.
The value for this property is an array.
The array must contain a list of type definitions.
TypeScript will import the type definitions listed in this array.
We're going to add the node package to this array.
By adding this value to the array.
TypeScript shouldn't have a problem with ffmpeg.
It'll understand the variables, functions and objects used by this package.
We've taken care of the TypeScript issues in this project.
Let's continue configuring the project in the next lecture.