1
00:00:00,150 --> 00:00:05,550
In this lecture, we're going to enable support for a feature called Shared Array Buffer.

2
00:00:05,820 --> 00:00:10,470
Let's take a walk through history to understand why this feature was introduced.

3
00:00:10,740 --> 00:00:12,040
It's not a common feature.

4
00:00:12,060 --> 00:00:13,410
Talk to developers.

5
00:00:13,680 --> 00:00:16,500
JavaScript runs on a single main thread.

6
00:00:16,830 --> 00:00:18,330
This has always been true.

7
00:00:18,600 --> 00:00:22,440
It's the main reason why it's an asynchronous focused language.

8
00:00:22,830 --> 00:00:28,080
Synchronous code can block our application if applications were written synchronously.

9
00:00:28,170 --> 00:00:30,540
Web pages would constantly freeze.

10
00:00:30,810 --> 00:00:35,610
Unfortunately, writing asynchronous code does not solve all our problems.

11
00:00:35,820 --> 00:00:40,840
Some actions are more intensive than others to resolve these issues.

12
00:00:40,860 --> 00:00:43,320
Browsers introduced web workers.

13
00:00:43,590 --> 00:00:47,490
A web worker is another script for running code on a different thread.

14
00:00:47,850 --> 00:00:53,550
Theoretically, if a web worker had blocking code, it would not block the main application.

15
00:00:53,910 --> 00:00:56,790
Users would not experience page freezes.

16
00:00:57,210 --> 00:00:58,800
Mission accomplished, right?

17
00:00:59,130 --> 00:01:00,120
Not so fast.

18
00:01:00,390 --> 00:01:02,730
There was one problem with web workers.

19
00:01:02,940 --> 00:01:06,060
A web worker does not have access to the document.

20
00:01:06,300 --> 00:01:10,980
If it needs to send data to the main thread, a message must be posted.

21
00:01:11,310 --> 00:01:13,920
What if we need to send a large amount of data?

22
00:01:14,190 --> 00:01:19,740
Sending large data between a web worker and the main thread can freeze an application.

23
00:01:20,370 --> 00:01:24,750
A new feature was to add shared array buffers to address this problem.

24
00:01:25,050 --> 00:01:30,570
Shared array buffers are objects for sharing data between the main thread and web worker.

25
00:01:30,960 --> 00:01:36,780
Scripts from different threads can read and write to the same object, which was not possible before.

26
00:01:37,140 --> 00:01:44,370
If we insert large amounts of data into a shared array buffer, object applications will not freeze.

27
00:01:44,580 --> 00:01:48,240
Problem solved browsers turn this feature off.

28
00:01:48,510 --> 00:01:54,510
It's a highly sensitive feature after it was introduced to the web and exploit was discovered.

29
00:01:54,810 --> 00:01:59,190
This feature allowed attackers to read private data from your application.

30
00:01:59,580 --> 00:02:03,120
Most major browsers immediately disabled it from the web.

31
00:02:03,420 --> 00:02:10,440
It wasn't until a few months later when they enabled it again with a patch to enable shared array buffers.

32
00:02:10,620 --> 00:02:14,250
We need to add headers to the responses from our app.

33
00:02:15,780 --> 00:02:21,720
We're going to be working inside the angular JSON file, open this file in your editor.

34
00:02:24,360 --> 00:02:26,310
Search for these serve command.

35
00:02:28,830 --> 00:02:33,720
In this object and another object called options if it doesn't exist.

36
00:02:36,250 --> 00:02:39,370
Next, add another object called headers.

37
00:02:41,860 --> 00:02:48,040
If you're not familiar with headers, let's quickly talk about them, as you know, each G.M. documents

38
00:02:48,040 --> 00:02:50,260
have a head and body section.

39
00:02:50,620 --> 00:02:54,700
The head section describes the document information inside.

40
00:02:54,700 --> 00:02:57,520
This tag does not get presented to users.

41
00:02:57,820 --> 00:03:00,640
Presentation must be added to the body tag.

42
00:03:01,150 --> 00:03:08,560
This separation of information can be applied to requests and responses whenever we perform a request.

43
00:03:08,770 --> 00:03:16,480
Browsers will split a request into two categories, which are headers and body headers contain information

44
00:03:16,480 --> 00:03:17,740
about the request.

45
00:03:18,040 --> 00:03:24,040
For example, we can store the IP browser information or the date of the request.

46
00:03:24,520 --> 00:03:31,780
The body of a request contains data that a server can process form data as an example of data stored

47
00:03:31,780 --> 00:03:33,460
in the body of a request.

48
00:03:34,030 --> 00:03:36,430
It's meant to be processed by the server.

49
00:03:36,970 --> 00:03:39,130
The same is true for responses.

50
00:03:39,370 --> 00:03:42,640
Servers can respond with a header and Bonnie section.

51
00:03:43,000 --> 00:03:46,420
The header can contain information about the file sent over.

52
00:03:46,690 --> 00:03:50,680
Let's look at an example of a response header in the browser.

53
00:03:50,710 --> 00:03:54,670
Try opening the home page with the developer tools opened.

54
00:03:57,230 --> 00:03:59,330
Switch over to the network panel.

55
00:03:59,570 --> 00:04:02,480
We're going to click on the local host request.

56
00:04:05,060 --> 00:04:11,300
Under the Headers tab, we can view the headers of this request, a request header is created by the

57
00:04:11,300 --> 00:04:14,930
browser response headers are created by the server.

58
00:04:15,290 --> 00:04:20,209
We're interested in the response headers anglers development server added.

59
00:04:20,209 --> 00:04:25,250
These headers for the most part, we never need to worry about creating headers.

60
00:04:25,490 --> 00:04:28,670
It's a job for back in developers, however.

61
00:04:28,820 --> 00:04:31,310
We're working locally with a local server.

62
00:04:31,580 --> 00:04:37,100
If we want to enable these shared array buffer feature, additional headers need to be added.

63
00:04:37,520 --> 00:04:41,510
Therefore, we need to configure the server created by angular.

64
00:04:41,780 --> 00:04:46,700
Luckily, angular makes it super easy to add headers sent by the server.

65
00:04:47,300 --> 00:04:49,040
Before we dig into the code.

66
00:04:49,130 --> 00:04:51,650
I want to emphasize one crucial point.

67
00:04:52,010 --> 00:04:56,240
Adding headers sent by the server is a job for backend developers.

68
00:04:56,540 --> 00:05:02,570
If you're going to use the shared array buffer feature, communicate with the back end developer of

69
00:05:02,570 --> 00:05:04,610
your team to add these headers.

70
00:05:04,940 --> 00:05:09,230
Since we're working locally, we need to perform this action manually.

71
00:05:09,500 --> 00:05:11,090
Switch back to the editor.

72
00:05:13,600 --> 00:05:21,100
Browsers are expecting two headers, the first header is called Cross Origin Opener Policy with a value

73
00:05:21,100 --> 00:05:22,600
of same origin.

74
00:05:25,330 --> 00:05:31,300
This header will tell the browser not to give cross origin sites access to the window object.

75
00:05:31,630 --> 00:05:33,550
Our app will become more strict.

76
00:05:33,910 --> 00:05:40,090
The next header is called Cross Origin and better policy with a value of Requir Corp.

77
00:05:43,300 --> 00:05:47,260
This header will prevent our app from loading sources without permission.

78
00:05:47,530 --> 00:05:54,430
As you can tell, the relationship goes both ways adding headers will require a server restarts and

79
00:05:54,430 --> 00:05:55,330
the command line.

80
00:05:55,450 --> 00:05:57,940
I'm going to quickly restart my server.

81
00:06:02,700 --> 00:06:06,480
Next, I'm going to refresh the home page in the browser.

82
00:06:09,140 --> 00:06:14,120
Under the network panel, open the response headers for the local host request.

83
00:06:16,540 --> 00:06:22,900
Looking closely, we can find the headers added from the angular configuration file by adding these

84
00:06:22,900 --> 00:06:30,100
headers, browsers will enable the shared array buffer feature, which is required by the FFmpeg package.

85
00:06:30,490 --> 00:06:35,050
Finally, we can begin generating screenshots before moving on.

86
00:06:35,200 --> 00:06:37,570
The server should always be turned on.

87
00:06:37,900 --> 00:06:41,170
I'm going to assume you have it running for the rest of the course.

88
00:06:41,410 --> 00:06:44,530
When you're ready, I'll see you in the next lecture.