In this lecture, we're going to enable support for a feature called Shared Array Buffer.
Let's take a walk through history to understand why this feature was introduced.
It's not a common feature.
Talk to developers.
JavaScript runs on a single main thread.
This has always been true.
It's the main reason why it's an asynchronous focused language.
Synchronous code can block our application if applications were written synchronously.
Web pages would constantly freeze.
Unfortunately, writing asynchronous code does not solve all our problems.
Some actions are more intensive than others to resolve these issues.
Browsers introduced web workers.
A web worker is another script for running code on a different thread.
Theoretically, if a web worker had blocking code, it would not block the main application.
Users would not experience page freezes.
Mission accomplished, right?
Not so fast.
There was one problem with web workers.
A web worker does not have access to the document.
If it needs to send data to the main thread, a message must be posted.
What if we need to send a large amount of data?
Sending large data between a web worker and the main thread can freeze an application.
A new feature was to add shared array buffers to address this problem.
Shared array buffers are objects for sharing data between the main thread and web worker.
Scripts from different threads can read and write to the same object, which was not possible before.
If we insert large amounts of data into a shared array buffer, object applications will not freeze.
Problem solved browsers turn this feature off.
It's a highly sensitive feature after it was introduced to the web and exploit was discovered.
This feature allowed attackers to read private data from your application.
Most major browsers immediately disabled it from the web.
It wasn't until a few months later when they enabled it again with a patch to enable shared array buffers.
We need to add headers to the responses from our app.
We're going to be working inside the angular JSON file, open this file in your editor.
Search for these serve command.
In this object and another object called options if it doesn't exist.
Next, add another object called headers.
If you're not familiar with headers, let's quickly talk about them, as you know, each G.M. documents
have a head and body section.
The head section describes the document information inside.
This tag does not get presented to users.
Presentation must be added to the body tag.
This separation of information can be applied to requests and responses whenever we perform a request.
Browsers will split a request into two categories, which are headers and body headers contain information
about the request.
For example, we can store the IP browser information or the date of the request.
The body of a request contains data that a server can process form data as an example of data stored
in the body of a request.
It's meant to be processed by the server.
The same is true for responses.
Servers can respond with a header and Bonnie section.
The header can contain information about the file sent over.
Let's look at an example of a response header in the browser.
Try opening the home page with the developer tools opened.
Switch over to the network panel.
We're going to click on the local host request.
Under the Headers tab, we can view the headers of this request, a request header is created by the
browser response headers are created by the server.
We're interested in the response headers anglers development server added.
These headers for the most part, we never need to worry about creating headers.
It's a job for back in developers, however.
We're working locally with a local server.
If we want to enable these shared array buffer feature, additional headers need to be added.
Therefore, we need to configure the server created by angular.
Luckily, angular makes it super easy to add headers sent by the server.
Before we dig into the code.
I want to emphasize one crucial point.
Adding headers sent by the server is a job for backend developers.
If you're going to use the shared array buffer feature, communicate with the back end developer of
your team to add these headers.
Since we're working locally, we need to perform this action manually.
Switch back to the editor.
Browsers are expecting two headers, the first header is called Cross Origin Opener Policy with a value
of same origin.
This header will tell the browser not to give cross origin sites access to the window object.
Our app will become more strict.
The next header is called Cross Origin and better policy with a value of Requir Corp.
This header will prevent our app from loading sources without permission.
As you can tell, the relationship goes both ways adding headers will require a server restarts and
the command line.
I'm going to quickly restart my server.
Next, I'm going to refresh the home page in the browser.
Under the network panel, open the response headers for the local host request.
Looking closely, we can find the headers added from the angular configuration file by adding these
headers, browsers will enable the shared array buffer feature, which is required by the FFmpeg package.
Finally, we can begin generating screenshots before moving on.
The server should always be turned on.
I'm going to assume you have it running for the rest of the course.
When you're ready, I'll see you in the next lecture.