1
00:00:00,150 --> 00:00:04,560
In this lecture, we are going to create a service for FFmpeg.

2
00:00:04,860 --> 00:00:12,120
This step is optional, but if MPEG is a heavy package, the file size of this package is twenty five

3
00:00:12,120 --> 00:00:14,610
megabytes to keep our app lean.

4
00:00:14,760 --> 00:00:19,350
We're going to outsource the logic into a service in a future lecture.

5
00:00:19,440 --> 00:00:23,910
We're going to learn how to lazy load a service to get started.

6
00:00:24,060 --> 00:00:28,020
Let's create a service with the Seelye in the command line.

7
00:00:28,050 --> 00:00:35,100
Run the following command Njie G Service Services slash FFmpeg.

8
00:00:37,620 --> 00:00:40,320
Next, open this file in your editor.

9
00:00:42,810 --> 00:00:51,300
The first step is to create a new instance of the FFmpeg class from the FFmpeg package, a factory function

10
00:00:51,300 --> 00:00:58,110
is exported by this package to create the instance at the top of the file importing function called

11
00:00:58,110 --> 00:01:03,750
create FFmpeg from the FFmpeg slash FFmpeg package.

12
00:01:06,230 --> 00:01:13,550
Next, inside the class, create a public property called is ready with an initial value of false.

13
00:01:16,050 --> 00:01:19,110
Initializing FFmpeg will take some time.

14
00:01:19,380 --> 00:01:23,490
We have a component called upload for handling the upload process.

15
00:01:23,820 --> 00:01:29,760
Users should not be able to upload files until the service is ready to generate screenshots.

16
00:01:30,090 --> 00:01:33,780
We'll update the component by creating a public property.

17
00:01:34,140 --> 00:01:38,070
Next, create a private property called FFmpeg.

18
00:01:40,530 --> 00:01:47,670
We should initialize this property from the constructor function in this function, set the FFmpeg property

19
00:01:47,700 --> 00:01:50,190
to the Create FFmpeg function.

20
00:01:52,790 --> 00:02:00,710
The Create FFmpeg function will return a new instance of the FFmpeg class, one of my favorite features

21
00:02:00,710 --> 00:02:03,830
of this package is being able to debug commands.

22
00:02:04,190 --> 00:02:09,380
The F MPEG tool will output messages to the command line under the hood.

23
00:02:09,590 --> 00:02:11,270
This package will capture them.

24
00:02:11,570 --> 00:02:18,080
We have the option of reading those logs in the council of the developer tools inside this function

25
00:02:18,260 --> 00:02:21,530
pass in an object with a property called log.

26
00:02:21,830 --> 00:02:23,570
Its value will be true.

27
00:02:26,140 --> 00:02:31,510
By churning, logging on will be able to debug FFmpeg during development.

28
00:02:31,840 --> 00:02:34,900
Next, we need to start loading FFmpeg.

29
00:02:35,230 --> 00:02:41,350
The Create FFmpeg function creates an instance, but does not load the WebAssembly file.

30
00:02:41,650 --> 00:02:43,960
This action is performed separately.

31
00:02:44,260 --> 00:02:49,750
The developers of this package recommend downloading the WebAssembly file as soon as possible.

32
00:02:50,050 --> 00:02:53,110
Its large file size can cause a delay.

33
00:02:53,800 --> 00:02:57,640
Let's define an asynchronous function called initialize.

34
00:03:00,110 --> 00:03:02,840
Loading the file is an asynchronous task.

35
00:03:03,110 --> 00:03:09,080
We should wait for the file to load without blocking the main thread before we start downloading the

36
00:03:09,080 --> 00:03:10,380
WebAssembly file.

37
00:03:10,400 --> 00:03:12,950
We should check if it has already been loaded.

38
00:03:13,250 --> 00:03:17,530
We don't want to read download a large file inside the function.

39
00:03:17,630 --> 00:03:22,670
Create a conditional statement to check if the is ready property is true.

40
00:03:25,240 --> 00:03:28,930
If it is, we can assume FFmpeg has been loaded.

41
00:03:29,230 --> 00:03:31,210
We're going to return the function.

42
00:03:33,710 --> 00:03:41,210
The next step is to start loading FFmpeg, we can call the load function to start downloading FFmpeg

43
00:03:41,570 --> 00:03:43,310
after the conditional statement.

44
00:03:43,460 --> 00:03:48,710
We're going to call the FFmpeg load function with the await keyword.

45
00:03:51,210 --> 00:03:55,650
Lastly, we're going to update the is ready property to true.

46
00:03:58,170 --> 00:04:03,360
By updating this property to True, we can prevent FFmpeg from loading.

47
00:04:03,720 --> 00:04:10,170
Our service is ready in the following lecture, we are going to inject this service into the upload

48
00:04:10,170 --> 00:04:10,920
component.