1
00:00:07,150 --> 00:00:13,060
Everybody what's going on this is Caleb with slopes dotcom and in this video we're going to use replay

2
00:00:13,060 --> 00:00:16,790
kits to actually start beginning.

3
00:00:16,830 --> 00:00:20,210
We're going to use replay kit to actually create a screen recording.

4
00:00:20,310 --> 00:00:21,460
It's going to be awesome.

5
00:00:22,020 --> 00:00:26,940
We're just going to be able to start the process in this video and in the video to follow will stop

6
00:00:26,940 --> 00:00:27,170
it.

7
00:00:27,190 --> 00:00:29,550
Edit and save the video to our cameral.

8
00:00:29,570 --> 00:00:34,380
But in this video we're going to get started with the recording so let's go ahead and let's pull open

9
00:00:34,380 --> 00:00:39,540
our view controller here and we need to think about what we're going to be doing basically we're going

10
00:00:39,540 --> 00:00:46,680
to write two functions one called Start recording and one called Stop recording and in order to manage

11
00:00:47,580 --> 00:00:53,430
you know whether a screen recording is happening or not we're going to create a property called is recording

12
00:00:53,430 --> 00:00:57,720
and it's going to be a boolean that's going to help us manage whether or not we're recording.

13
00:00:57,720 --> 00:00:59,420
So let's actually make that now.

14
00:00:59,700 --> 00:01:05,250
It's just going to be a little private variable called is recording and it's going to be equal to false

15
00:01:05,250 --> 00:01:06,090
from the beginning.

16
00:01:06,210 --> 00:01:08,340
OK because when we open the app we're not recording anything.

17
00:01:08,340 --> 00:01:10,650
The user should have control over that.

18
00:01:10,740 --> 00:01:16,050
Now when the record button is pressed and let me make some more room for us here when the record button

19
00:01:16,050 --> 00:01:21,090
is pressed we're essentially going to do one of two things start recording or stop recording.

20
00:01:21,180 --> 00:01:21,810
OK.

21
00:01:22,170 --> 00:01:30,570
And so if we are not recording or if is recording is false We're going to go ahead and call start

22
00:01:33,450 --> 00:01:34,180
recording.

23
00:01:34,420 --> 00:01:34,870
OK.

24
00:01:35,100 --> 00:01:37,030
Now we have not yet written this function.

25
00:01:37,380 --> 00:01:43,060
Otherwise if recording is true we're going to go ahead and call.

26
00:01:43,170 --> 00:01:45,340
Stop recording.

27
00:01:46,470 --> 00:01:46,740
OK.

28
00:01:46,740 --> 00:01:50,970
And again we have not written this function but we're not going to get to this one in this video so

29
00:01:50,970 --> 00:01:54,440
I'm just going to comment it out so that we don't have any issues that we don't need.

30
00:01:54,810 --> 00:01:58,310
But we are going to write start recording.

31
00:01:58,410 --> 00:02:05,000
And this is a function that's going to allow us to actually start a recording session using our our

32
00:02:04,990 --> 00:02:06,830
P screen recorder.

33
00:02:06,980 --> 00:02:14,000
OK so let's do it down below your Iby action right the function start recording.

34
00:02:14,410 --> 00:02:15,120
OK.

35
00:02:15,630 --> 00:02:20,820
Now what we need to do first of all is we need to check to make sure that our recorder is even available

36
00:02:21,510 --> 00:02:26,400
for instance there are some problems with how I'm recording this chorus because I have my actual phone

37
00:02:26,400 --> 00:02:31,920
plugged in so I need the microphone to make the recording but when I'm recording and using the screen

38
00:02:32,550 --> 00:02:37,190
the recording capabilities of the microphone are sort of overridden for this application.

39
00:02:37,190 --> 00:02:40,080
So we're going to check to see if the recorder is actually available.

40
00:02:40,080 --> 00:02:41,750
Otherwise it could crash the app.

41
00:02:41,760 --> 00:02:43,540
So go ahead and type.

42
00:02:43,540 --> 00:02:45,660
Guard.

43
00:02:45,690 --> 00:02:50,010
Guard recorder dot is available.

44
00:02:50,040 --> 00:02:50,710
OK.

45
00:02:51,060 --> 00:02:55,670
And assuming that it's available we're going to go ahead and continue.

46
00:02:55,680 --> 00:03:02,310
Otherwise we're going to go ahead and just return and you know what just so that we know what's going

47
00:03:02,310 --> 00:03:04,550
on let's go ahead and print.

48
00:03:05,010 --> 00:03:15,340
Maybe recording is not available the lobal at this time.

49
00:03:16,660 --> 00:03:20,920
And that will just print out to the console to tell us hey something's wrong with the recorder.

50
00:03:21,250 --> 00:03:29,170
But assuming that we do have an available recorder what we can do then is to check to see hey is the

51
00:03:29,170 --> 00:03:31,300
microphone toggle switch on or off.

52
00:03:31,300 --> 00:03:36,550
Because remember in our interface we have a little switch and if it's on we're going to grant access

53
00:03:36,550 --> 00:03:41,410
to the microphone if it's off we're going to say hey you can't use the microphone so to do that what

54
00:03:41,410 --> 00:03:45,270
we're going to do is we're going to say hey if Mike toggle.

55
00:03:45,470 --> 00:03:47,170
That's the name of our switch.

56
00:03:47,170 --> 00:03:49,510
Dot is on.

57
00:03:49,510 --> 00:03:51,550
We're going to go ahead and call recorder.

58
00:03:51,550 --> 00:03:57,160
Dot is microphone enabled and it's a boolean value that indicates whether or not the microphone can

59
00:03:57,160 --> 00:03:58,310
be enabled.

60
00:03:58,360 --> 00:04:02,910
So go ahead and set that to be true if the switch is on otherwise.

61
00:04:02,920 --> 00:04:08,250
Or else we're going to go ahead and call recorder.

62
00:04:08,350 --> 00:04:13,500
Is microphone enabled equals false and that's going to say hey recorder don't record the microphone.

63
00:04:13,560 --> 00:04:19,170
Now we have checked if the recorders are available we have checked if the microphone is enabled.

64
00:04:19,260 --> 00:04:24,780
And now what we need to do is call recorder does start recording.

65
00:04:24,780 --> 00:04:26,150
How cool is that.

66
00:04:26,160 --> 00:04:31,410
So we just tap on that we press Enter on the handler and now we have to handle what happens if we get

67
00:04:31,410 --> 00:04:32,310
an optional error.

68
00:04:32,310 --> 00:04:37,090
So go ahead and type error and that's just the name of the parameter for the air that's returned.

69
00:04:37,110 --> 00:04:42,330
If there is one and now what we're going to do is we're going to use a guard statement to say if error

70
00:04:42,330 --> 00:04:44,420
is nil we're going to continue.

71
00:04:44,430 --> 00:04:49,140
Otherwise we're going to print saying hey there was an error starting the recording and then returns

72
00:04:49,140 --> 00:04:56,800
that we don't get a crash so go ahead and type guard error equals nil else.

73
00:04:57,090 --> 00:05:01,500
And you know what this needs to be the boolean equals to check for equivalency.

74
00:05:01,500 --> 00:05:07,420
But basically what this is saying is hey if air is nil then we're going to continue with air being nil.

75
00:05:07,440 --> 00:05:17,660
Otherwise we're going to go ahead and print saying there was an error starting the recording.

76
00:05:17,730 --> 00:05:20,580
And then we're just going to return to that we don't get a crash.

77
00:05:20,580 --> 00:05:31,550
But assuming that the air is definitely nil we're going to print out started recording successfully.

78
00:05:31,600 --> 00:05:39,490
That's just for us to show hey started recording and now that we're recording that's all happening in

79
00:05:39,490 --> 00:05:40,160
the background.

80
00:05:40,180 --> 00:05:46,460
But we need to basically do a few things when recording to our user interface.

81
00:05:46,540 --> 00:05:47,350
Right.

82
00:05:47,410 --> 00:05:53,200
We want the mike toggle button to basically be disabled so that we can't turn it on or off mid recording.

83
00:05:53,200 --> 00:05:59,470
We also want to set the record button to change its text to say stop and to be of a red color.

84
00:05:59,500 --> 00:06:05,110
We also want this status label to say recording dot dot dot and also to have read text then we're going

85
00:06:05,110 --> 00:06:06,250
to set the boolean we made.

86
00:06:06,250 --> 00:06:08,280
Is recording to be true.

87
00:06:08,290 --> 00:06:08,820
OK.

88
00:06:09,140 --> 00:06:18,220
So go ahead and type self dot Mike toggle and we're going to set is enabled to be false.

89
00:06:18,220 --> 00:06:24,340
Ok then we're going to go ahead and change the record button to be read and have a title that says stop.

90
00:06:24,340 --> 00:06:30,160
So call self dot record button and we're going to call.

91
00:06:30,160 --> 00:06:34,240
Set title color to be a color literal.

92
00:06:34,520 --> 00:06:36,810
And we're going to choose a nice red color.

93
00:06:37,130 --> 00:06:42,420
OK so you can just choose red or any red color you want and the control state is normal.

94
00:06:42,730 --> 00:06:48,310
OK then we're going to call self-doubt record button and we're going to just set the title itself to

95
00:06:48,310 --> 00:06:54,660
say stop for control state normal that's normal normal.

96
00:06:54,670 --> 00:06:55,660
That's not a word.

97
00:06:55,900 --> 00:06:56,250
OK.

98
00:06:56,320 --> 00:07:01,770
So next we need to set our status label up at the top of our app to say recording dot dot dot.

99
00:07:01,780 --> 00:07:11,520
So go ahead and type self dot status label dot text and set that to be equal to recording after that

100
00:07:11,520 --> 00:07:12,830
we're going to set the color to read.

101
00:07:12,840 --> 00:07:21,610
So self status label text color and use a color literal of red to change the text color to red.

102
00:07:22,080 --> 00:07:24,230
Finally go ahead and call self.

103
00:07:24,390 --> 00:07:29,980
Is recording and set it to be equal to true because remember when we start the app it comes in is false.

104
00:07:30,030 --> 00:07:33,910
So now we are successfully beginning a recording.

105
00:07:34,020 --> 00:07:38,280
This all happens with the helpfulness of replay kit.

106
00:07:38,400 --> 00:07:43,080
It handles it for us in the background and based on a successful beginning.

107
00:07:43,080 --> 00:07:47,790
We're going to go ahead and change all of these properties so that they are represented in our app.

108
00:07:47,790 --> 00:07:54,150
So let's go ahead and let's BuildOn run this let's tap on the button and let's see if we can successfully

109
00:07:54,150 --> 00:07:55,880
start a recording or if we get an error.

110
00:07:55,920 --> 00:08:01,020
OK so go ahead and choose your physical device from the device list build and run it and we're going

111
00:08:01,020 --> 00:08:02,940
to go ahead and check out to see how we did.

112
00:08:02,940 --> 00:08:04,640
We're going to look at it on the screen here.

113
00:08:04,770 --> 00:08:08,460
I'm going to pull in my phone screen here on the on the screen so you can see it.

114
00:08:08,530 --> 00:08:11,600
And now here we go let's see how we did.

115
00:08:11,760 --> 00:08:12,210
All right.

116
00:08:12,210 --> 00:08:16,800
So as you can see it's a bigger screen so we definitely get these stretched out a bit and we could we

117
00:08:16,800 --> 00:08:20,970
could go and mess with the constraints but for the purposes of this app I'm not going to.

118
00:08:21,240 --> 00:08:26,280
But we are going to test what happens when I tap on that green record button if it's successful we should

119
00:08:26,280 --> 00:08:29,600
get some changes in the appearance if it's unsuccessful.

120
00:08:29,620 --> 00:08:30,470
We should get an error.

121
00:08:30,480 --> 00:08:31,530
So here we go.

122
00:08:31,530 --> 00:08:34,280
We're going to go ahead and push on the record button there.

123
00:08:34,320 --> 00:08:35,960
We're going to see what happens.

124
00:08:36,090 --> 00:08:39,070
And it appears that nothing happened there.

125
00:08:39,120 --> 00:08:40,230
Oh you know what.

126
00:08:40,230 --> 00:08:45,600
Look at that we expect we accidentally removed our start recording function somehow that's super weird.

127
00:08:45,600 --> 00:08:47,140
Let's build and run it again.

128
00:08:47,160 --> 00:08:49,700
I must have selected it and push delete by mistake.

129
00:08:49,740 --> 00:08:53,110
If you were watching that happened you're probably going oh this guy is an idiot.

130
00:08:53,130 --> 00:08:54,630
But I promise I'm not.

131
00:08:54,630 --> 00:08:55,830
Most of the time.

132
00:08:55,830 --> 00:08:56,280
Sorry.

133
00:08:56,280 --> 00:08:59,900
Anyway moving on so we can now see the app on our screen here.

134
00:09:00,000 --> 00:09:00,990
We can change the images.

135
00:09:00,990 --> 00:09:01,800
Blah blah blah.

136
00:09:01,890 --> 00:09:04,110
But watch what happens when I push record.

137
00:09:04,110 --> 00:09:10,590
As you can see we get a pop up right here allow screen recording in screen the record screen and microphone

138
00:09:10,680 --> 00:09:12,750
or record screen only.

139
00:09:12,750 --> 00:09:13,420
Check it out.

140
00:09:13,590 --> 00:09:18,930
If I tap record screen and microphone we're going to go ahead and we're going to enable it to essentially

141
00:09:19,320 --> 00:09:21,850
do what we want it to do to record the screen and microphone.

142
00:09:21,850 --> 00:09:29,250
So if I tap that you'll see that we get a nice little start and stop thing but it looks like it freezes.

143
00:09:29,250 --> 00:09:32,830
Let me build and run it again to show you what's actually going on behind the scenes here.

144
00:09:32,850 --> 00:09:38,640
Basically the issue is that start recording is happening on a background thread and we're trying to

145
00:09:38,640 --> 00:09:42,950
update the UI on a background thread which is a big no no on iOS development.

146
00:09:42,960 --> 00:09:44,890
So watch what happens if I push it again.

147
00:09:45,030 --> 00:09:50,700
We're going to get this error here saying hey UI API called on a background thread and we're going to

148
00:09:50,700 --> 00:09:52,170
get this weird purple air here.

149
00:09:52,170 --> 00:09:55,810
Now the way that we fix this is simply by calling dispatch.

150
00:09:55,950 --> 00:09:57,680
Q main.

151
00:09:57,880 --> 00:10:04,060
Async and we're going to pull all of this UI updating into the main queue instead of the background.

152
00:10:04,060 --> 00:10:09,210
Q So let's build and run it again and let's see what we get when we actually do this.

153
00:10:09,220 --> 00:10:13,740
Kate's going to pull up here that a background thread error goes away.

154
00:10:13,740 --> 00:10:15,130
And here we are.

155
00:10:15,480 --> 00:10:23,900
So now if I tap record watch what happens the red label at the top updates to say recording the button

156
00:10:23,900 --> 00:10:24,530
changes.

157
00:10:24,530 --> 00:10:28,880
The switch is disabled and it says started recording successfully.

158
00:10:28,880 --> 00:10:34,310
Now I can still interface with the app with the screen but at the moment we're not actually able to

159
00:10:34,400 --> 00:10:37,140
stop our recording so I'm going to go ahead and push stop.

160
00:10:37,160 --> 00:10:41,690
Nothing's going to happen and I'm going to just kill the app so it stops recording to my device.

161
00:10:41,690 --> 00:10:48,350
Now we are done starting our recording the next video is basically the last step we're going to stop

162
00:10:48,350 --> 00:10:54,000
the recording create a video file from that edit that video then save it to our phone.

163
00:10:54,410 --> 00:10:58,520
And after that we're going to be able to you know reset the views that it says record again and green

164
00:10:58,520 --> 00:11:00,120
text blah blah blah.

165
00:11:00,230 --> 00:11:06,230
But you guys get the idea we are now successfully starting recording updating our UI on the main thread

166
00:11:06,230 --> 00:11:07,690
instead of a background thread.

167
00:11:07,820 --> 00:11:13,310
And we're getting so so close to being able to stop and save our recording so let's do that in the very

168
00:11:13,310 --> 00:11:14,080
next video.

169
00:11:14,090 --> 00:11:14,620
I'll see you there.