WEBVTT

1
00:00:00.750 --> 00:00:07.716
This time, we will add an effect where the background flashes along with an alarm when a fire is detected.

2
00:00:08.174 --> 00:00:12.887
Let's take a look at `keyframes` and `animation` settings in Tailwind CSS.  

3
00:00:13.555 --> 00:00:17.684
First, the `keyframes` section defines various animation effects. 

4
00:00:18.435 --> 00:00:22.230
`slideIn` makes an element gradually appear from the right.  

5
00:00:22.897 --> 00:00:26.192
`slideOut` makes an element disappear to the right.  

6
00:00:26.943 --> 00:00:33.408
`pulse` creates an effect where the background color darkens and then returns to its original state.  

7
00:00:34.617 --> 00:00:40.749
`flashBorder` is an animation that makes the border flash, useful for emphasizing elements.  

8
00:00:41.833 --> 00:00:47.297
`screenFlash` makes the entire screen flash, which is useful for strong warnings.  

9
00:00:48.506 --> 00:00:51.384
Now, let's look at the `animation` section.  

10
00:00:52.010 --> 00:00:58.600
Each `keyframe` is defined as an animation so that `slideIn`, `slideOut`, and `pulse` can be used.  

11
00:00:59.601 --> 00:01:05.190
Now, applying `className="animate-slideIn"` enables the corresponding animation. 

12
00:01:06.232 --> 00:01:12.238
These animations help in making fire detection alerts, 
More visually intuitive and noticeable.  

13
00:01:13.406 --> 00:01:15.533
Now, let's dive into the code. 

14
00:01:16.159 --> 00:01:21.206
You don't need to understand everything; just grasping the flow is enough.

15
00:01:21.790 --> 00:01:24.584
first, I will explain the roles of these four variables:

16
00:01:24.751 --> 00:01:31.007
audioPermission, audioContextRef, gainNodeRef, and sourceNodeRef.

17
00:01:31.508 --> 00:01:38.556
First, audioPermission is a state value that manages whether the user has granted audio playback permission.

18
00:01:39.808 --> 00:01:46.106
By default, it is set to false, and it changes to true when the user grants audio permission.

19
00:01:46.981 --> 00:01:52.028
Next, audioContextRef is a reference variable that stores an AudioContext.

20
00:01:52.987 --> 00:01:57.784
To control audio using the Web Audio API, an AudioContext is required.

21
00:01:58.409 --> 00:02:02.080
This object allows you to generate and manipulate sound.

22
00:02:03.206 --> 00:02:07.252
gainNodeRef is a reference variable that stores a GainNode.

23
00:02:08.336 --> 00:02:12.590
A GainNode is responsible for adjusting the volume of the audio.

24
00:02:13.466 --> 00:02:16.553
With this, you can control the sound volume.

25
00:02:17.637 --> 00:02:22.225
Finally, sourceNodeRef is a variable that stores an OscillatorNode.

26
00:02:23.643 --> 00:02:28.356
An OscillatorNode is used to generate a sound with a specific frequency.

27
00:02:29.440 --> 00:02:32.193
This can be used to create an alert sound.

28
00:02:33.111 --> 00:02:41.035
Now, using these variables, we will initialize the audio,
and go through the process of playing an alert sound.

29
00:02:43.830 --> 00:02:47.959
Now, I will briefly explain the `initAudioContext` function.  

30
00:02:49.294 --> 00:02:53.089
This function initializes `AudioContext` for audio playback.  

31
00:02:54.048 --> 00:03:02.932
First, it checks whether the user has granted audio permission.
If not, it prompts the user for permission using `window.confirm`.  

32
00:03:04.726 --> 00:03:08.855
If the user grants permission, it creates an `AudioContext`.  

33
00:03:08.855 --> 00:03:15.653
If it's in a `suspended` state on iOS Safari, it calls `resume()` to ensure proper functionality.  

34
00:03:17.822 --> 00:03:23.995
Then, it calls `setAudioPermission(true)` to store that audio permission has been granted. 

35
00:03:25.371 --> 00:03:28.499
If initialized successfully, it returns `true`.  

36
00:03:29.626 --> 00:03:37.842
If an error occurs during initialization, it logs the error to the console. 
Then, it alerts the user and returns `false`.  

37
00:03:39.802 --> 00:03:44.390
The `stopAlertSound` function is responsible for stopping the alert sound.  

38
00:03:44.807 --> 00:03:51.940
First, if the sound stored in `sourceNodeRef` is playing, it calls `stop()` to immediately stop it.  

39
00:03:52.774 --> 00:03:57.820
Then, it uses `disconnect()` to sever the connection of the audio node.  

40
00:03:59.072 --> 00:04:03.785
Next, it disconnects `gainNodeRef` to clean up unnecessary resources.  

41
00:04:04.786 --> 00:04:08.373
Now, the alert sound can be stopped whenever needed.  

42
00:04:11.292 --> 00:04:17.006
The `playAlertSound` function is responsible for generating and playing an alert sound.  

43
00:04:17.632 --> 00:04:21.094
First, it checks whether `audioContextRef` exists.  

44
00:04:22.053 --> 00:04:27.058
If a sound is already playing, it calls `stopAlertSound()` to stop it.  

45
00:04:27.892 --> 00:04:35.066
Next, it creates an `OscillatorNode` to generate the sound.  
It then uses a `GainNode` to control the volume.  

46
00:04:36.025 --> 00:04:45.785
The frequency is increased from 440Hz to 880Hz and then back to 440Hz  

47
00:04:47.245 --> 00:04:49.414
To create an alert-like sound. 

48
00:04:50.707 --> 00:04:59.924
Finally, the generated sound is played using `start()`.
It is then stored in `sourceNodeRef` so it can be stopped later.  

49
00:05:03.886 --> 00:05:09.225
This code is responsible for displaying an alert when a fire is detected.  

50
00:05:11.144 --> 00:05:20.528
First, if the `"fire detected"` message is received in `predictionData`,  

51
00:05:23.072 --> 00:05:34.000
Next, to create a flashing effect across the entire screen,
It creates a `flashOverlay` element,
And appends it to the document using `document.body.appendChild(flashOverlay)`.  

52
00:05:36.586 --> 00:05:42.008
Additionally, it creates an `alertElement` to display the alert message.  

53
00:05:44.093 --> 00:05:48.014
This element has a red background and animation effects,  

54
00:05:48.014 --> 00:05:51.768
And is displayed on the screen via `document.body.appendChild(alertElement)`.  

55
00:05:52.769 --> 00:05:57.815
After 10 seconds, it removes the alert message using `setTimeout`.  

56
00:05:58.483 --> 00:06:03.821
It also calls `flashOverlay.remove()` to stop the flashing effect. 

57
00:06:04.864 --> 00:06:12.163
Now, when a fire is detected,  
The alert sound and visual effects will be triggered automatically.  

58
00:06:16.292 --> 00:06:19.420
This part attempts to initialize the audio.  

59
00:06:20.213 --> 00:06:24.801
It calls `initAudioContext()` to request audio permission.  

60
00:06:25.968 --> 00:06:32.767
If the user denies it, it logs `"audio permission denied"` to the console and stops execution. 

61
00:06:34.102 --> 00:06:39.690
And this part handles stopping the alert sound when fire detection stops.  

62
00:06:39.690 --> 00:06:41.359
It stops the alert sound.  

63
00:06:41.901 --> 00:06:51.702
It calls the previously explained `stopAlertSound()` function,  

64
00:06:56.958 --> 00:07:01.170
Finally, I will check the functionality in the browser.