1
00:00:00,050 --> 00:00:05,090
In this lecture we are going to install the ffmpeg webassembly package.

2
00:00:05,090 --> 00:00:08,960
To be more accurate, we're going to install two packages.

3
00:00:08,990 --> 00:00:13,100
The ffmpeg project is split into two packages.

4
00:00:13,130 --> 00:00:15,320
The first package is the core.

5
00:00:15,350 --> 00:00:21,070
It's a fork of the official ffmpeg project with a few adjustments for Webassembly.

6
00:00:21,080 --> 00:00:25,490
The second package is a JavaScript API for loading the core.

7
00:00:25,580 --> 00:00:30,080
It'll provide methods for interacting with the core of ffmpeg.

8
00:00:30,080 --> 00:00:36,680
The developers of this project have decided to split the project into two packages for flexibility.

9
00:00:36,950 --> 00:00:39,080
FFmpeg is a modular tool.

10
00:00:39,080 --> 00:00:45,770
If we need support for a specific codec, we can extend ffmpeg with additional libraries.

11
00:00:45,770 --> 00:00:52,220
If we're not satisfied with the current ffmpeg version, we can swap the core with a different build

12
00:00:52,220 --> 00:00:53,930
of ffmpeg.

13
00:00:53,930 --> 00:00:59,030
As we discussed before, the current version is suitable for our application.

14
00:00:59,030 --> 00:01:04,260
We don't need to use a different version of ffmpeg to generate screenshots.

15
00:01:04,260 --> 00:01:08,460
The core supports MP4 files and screenshot generation.

16
00:01:08,460 --> 00:01:12,060
We should be fine with installing the default packages.

17
00:01:13,060 --> 00:01:17,020
Currently I'm inside the command line for this lecture.

18
00:01:17,020 --> 00:01:19,850
I've decided to turn off the development server.

19
00:01:19,870 --> 00:01:24,200
We're going to be modifying the configuration files in our project.

20
00:01:24,220 --> 00:01:30,700
Whenever we make adjustments to the configuration files, the server needs to be restarted inside the

21
00:01:30,700 --> 00:01:31,570
command line.

22
00:01:31,570 --> 00:01:36,880
Run the following command NPM install at ffmpeg.

23
00:01:37,660 --> 00:01:41,590
FFmpeg at ffmpeg slash core.

24
00:01:43,770 --> 00:01:46,440
Before we start importing these packages.

25
00:01:46,470 --> 00:01:54,360
Additional packages need to be installed to understand why we need to revisit the description of ffmpeg.

26
00:01:55,580 --> 00:01:57,020
For your convenience.

27
00:01:57,020 --> 00:01:59,900
I have a copy of the description as a slide.

28
00:01:59,900 --> 00:02:01,550
Let's read it together.

29
00:02:01,760 --> 00:02:06,200
FFmpeg for the browser and node powered by Webassembly.

30
00:02:06,230 --> 00:02:09,100
You'll notice I'm highlighting the word node.

31
00:02:09,110 --> 00:02:11,160
I want to emphasize this word.

32
00:02:11,180 --> 00:02:14,410
JavaScript can run on the browser and node.

33
00:02:14,420 --> 00:02:18,020
There's a lot of similarities, but there are differences.

34
00:02:18,050 --> 00:02:21,140
For example, take a look at this code snippet.

35
00:02:21,140 --> 00:02:27,890
In this example I'm calling the console dot log function, which is supported in both environments.

36
00:02:27,890 --> 00:02:33,650
However, the value logged by each function will vary from environment to environment.

37
00:02:33,680 --> 00:02:38,000
The document object is supported in the browser but not node.

38
00:02:38,030 --> 00:02:43,850
As for the directory name variable, it's supported in Node but not the browser.

39
00:02:43,970 --> 00:02:51,020
There are dozens of packages with support for the browser and node the developers of packages optimize

40
00:02:51,020 --> 00:02:52,740
them for each environment.

41
00:02:52,760 --> 00:02:57,440
Sadly, the same can't be said for the ffmpeg package.

42
00:02:57,450 --> 00:03:00,990
The code for node is mingled with code for the browser.

43
00:03:00,990 --> 00:03:04,440
In normal circumstances this isn't a big issue.

44
00:03:04,470 --> 00:03:07,560
However, it is an issue with TypeScript.

45
00:03:07,590 --> 00:03:10,880
TypeScript assumes all code will run in the browser.

46
00:03:10,890 --> 00:03:14,280
If it detects code for a node, it will throw an error.

47
00:03:14,310 --> 00:03:18,870
To be clear, I don't think the developers are intentionally causing this error.

48
00:03:18,900 --> 00:03:23,060
Keep in mind the ffmpeg package is experimental.

49
00:03:23,070 --> 00:03:26,190
Not everything is going to be sunshine and roses.

50
00:03:26,220 --> 00:03:28,110
We're going to run into problems.

51
00:03:28,110 --> 00:03:32,040
Hopefully in the future these issues will get resolved.

52
00:03:33,130 --> 00:03:38,620
For the time being, we should tell TypeScript to expect code for NodeJS.

53
00:03:38,650 --> 00:03:45,100
We can install a package with type definitions for node and the command line run the following command

54
00:03:45,100 --> 00:03:49,390
NPM install at types slash node.

55
00:03:51,550 --> 00:03:56,440
Next, we need to configure TypeScript to import these definitions.

56
00:03:56,470 --> 00:04:01,360
Open the TypeScript config dot app dot json file.

57
00:04:03,500 --> 00:04:05,900
It's been a while since we've opened this file.

58
00:04:05,900 --> 00:04:09,920
As a reminder, it's the configuration file for TypeScript.

59
00:04:09,950 --> 00:04:14,980
Angular will use this configuration file for production and development builds.

60
00:04:14,990 --> 00:04:16,420
Inside this file.

61
00:04:16,430 --> 00:04:20,800
We're going to modify the compiler options dot types property.

62
00:04:20,810 --> 00:04:24,560
If this property does not exist in this file, add it in.

63
00:04:24,590 --> 00:04:27,560
The value for this property is an array.

64
00:04:27,710 --> 00:04:31,460
The array must contain a list of type definitions.

65
00:04:31,460 --> 00:04:35,810
TypeScript will import the type definitions listed in this array.

66
00:04:35,810 --> 00:04:39,140
We're going to add the node package to this array.

67
00:04:40,720 --> 00:04:42,940
By adding this value to the array.

68
00:04:42,970 --> 00:04:46,690
TypeScript shouldn't have a problem with ffmpeg.

69
00:04:46,720 --> 00:04:52,420
It'll understand the variables, functions and objects used by this package.

70
00:04:52,420 --> 00:04:56,380
We've taken care of the TypeScript issues in this project.

71
00:04:56,380 --> 00:05:00,340
Let's continue configuring the project in the next lecture.