1
00:00:00,090 --> 00:00:06,780
In this lecture, we are going to create custom asset paths in our project to understand why we need

2
00:00:06,780 --> 00:00:09,810
to talk about the behavior of FFmpeg.

3
00:00:10,110 --> 00:00:14,970
As we discussed before, FFmpeg MPEG is split into two packages.

4
00:00:15,510 --> 00:00:19,890
The core package exports FFmpeg as a WebAssembly file.

5
00:00:20,190 --> 00:00:26,430
The F MPEG package exposes a JavaScript API for interacting with FFmpeg.

6
00:00:26,850 --> 00:00:31,650
One of the jobs of the FFmpeg package is to import the core package.

7
00:00:32,009 --> 00:00:35,070
We don't need to manually import this package.

8
00:00:35,370 --> 00:00:38,640
It's your job performed by the FFmpeg package.

9
00:00:39,090 --> 00:00:42,690
It's a convenient feature, but it does present some problems.

10
00:00:42,900 --> 00:00:44,340
The files are loaded through.

11
00:00:45,720 --> 00:00:47,580
They're not bundled with our project.

12
00:00:47,820 --> 00:00:58,080
The files are stored in the following directory node modules Slash at FFmpeg slash core slash distribution

13
00:00:58,740 --> 00:01:00,870
Angular is a front end framework.

14
00:01:01,200 --> 00:01:05,970
It provides a development server for delivering files via a local server.

15
00:01:06,240 --> 00:01:12,750
By default, files in the Node Modules directory are not publicly accessible through A2DP.

16
00:01:13,750 --> 00:01:20,410
In my browser, I'm trying to access one of the files in this directory, as you can see, the development

17
00:01:20,410 --> 00:01:22,630
server is unable to find this file.

18
00:01:22,870 --> 00:01:25,510
It'll default to serving our angular app.

19
00:01:25,780 --> 00:01:33,400
Lastly, our app will show off for all four message if we don't expose these files via an FTP URL.

20
00:01:33,550 --> 00:01:37,610
The FFmpeg package will not be functional angular.

21
00:01:37,610 --> 00:01:40,780
It can be configured to deliver additional asset files.

22
00:01:40,960 --> 00:01:43,690
To get started, turn off the development server.

23
00:01:43,990 --> 00:01:48,010
Our changes won't be applied until we've restarted the server.

24
00:01:50,550 --> 00:01:53,970
Next, open the angular dot JSON file.

25
00:01:56,230 --> 00:01:59,650
In this file search for an option called architect.

26
00:02:02,140 --> 00:02:07,930
The architect option is an object of configuration settings for the different commands of angular.

27
00:02:08,229 --> 00:02:13,240
We can configure a specific command to modify the behavior of that command.

28
00:02:13,960 --> 00:02:18,730
The command we're going to modify is the build command inside this object.

29
00:02:18,820 --> 00:02:21,190
Search for an option called assets.

30
00:02:23,650 --> 00:02:31,930
By default, Angular will deliver the fave icon file and files stored in the source slash assets directory.

31
00:02:32,230 --> 00:02:36,760
We can add this array to include the files from the FFmpeg package.

32
00:02:37,060 --> 00:02:40,090
One option is to list the files one by one.

33
00:02:40,480 --> 00:02:47,290
On the other hand, it's possible we may need to update the configuration whenever new files are introduced.

34
00:02:47,890 --> 00:02:52,420
Angular supports object syntax for creating a file match pattern.

35
00:02:52,720 --> 00:02:55,930
Let's pass in an object in this object.

36
00:02:56,080 --> 00:02:58,570
We're going to add a property called input.

37
00:03:01,190 --> 00:03:07,820
We can point to a specific directory in our project by adding the input property, the value for this

38
00:03:07,820 --> 00:03:11,300
property must be a path relative to our project.

39
00:03:11,690 --> 00:03:21,290
Set this property to the following value node modules slash at FFmpeg slash core slash dist.

40
00:03:23,830 --> 00:03:27,130
Next, let's add another property called output.

41
00:03:27,400 --> 00:03:30,820
We can configure the CDP path for our files.

42
00:03:31,090 --> 00:03:34,900
For example, let's say we don't want to type this entire path.

43
00:03:35,170 --> 00:03:39,100
We could set this option to test by setting it to test.

44
00:03:39,280 --> 00:03:46,000
We can access files from the input option by typing test in the address bar, followed by the files

45
00:03:46,000 --> 00:03:46,390
name.

46
00:03:46,870 --> 00:03:52,780
The FFmpeg package is expecting to find the values from the Node Modules directory.

47
00:03:53,080 --> 00:03:55,570
Let's make a copy of the input path.

48
00:03:58,070 --> 00:04:01,670
There's one last option will add it's called Glob.

49
00:04:04,150 --> 00:04:09,640
In the resource section of this lecture, I provide a link to a package called Glob.

50
00:04:12,110 --> 00:04:16,670
Internally, angular installs this package for searching through folders.

51
00:04:16,940 --> 00:04:19,760
It's a package for finding files with patterns.

52
00:04:20,089 --> 00:04:24,710
You can refer to the documentation for details on how to use this package.

53
00:04:24,950 --> 00:04:31,730
Luckily, we can avoid configuring this package by adding the glaube option to our object, and there

54
00:04:31,730 --> 00:04:37,200
will pass on our pattern to this package to search for files back in the editor.

55
00:04:37,400 --> 00:04:40,820
We're going to set this option to an asterisk character.

56
00:04:43,360 --> 00:04:50,410
The asterisk character can be thought of as a wildcard character, it'll select all files from the input

57
00:04:50,410 --> 00:04:51,130
directory.

58
00:04:51,400 --> 00:04:52,960
Let's give our app a test.

59
00:04:53,180 --> 00:04:56,320
Turn on the server with the Nji Serve Command.

60
00:04:58,240 --> 00:05:02,650
Next, I'm going to refresh the page that gave me a 404 error.

61
00:05:05,200 --> 00:05:12,370
This time, angular server can deliver the files from the FFmpeg package, you should be able to access

62
00:05:12,370 --> 00:05:16,630
the JavaScript file from your browser to before moving on.

63
00:05:16,660 --> 00:05:19,030
You should test for this behavior as well.

64
00:05:19,330 --> 00:05:24,940
In the next lecture, we're going to make one final adjustment to our configuration files.