forked from Mupati/laravel-video-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Adding Video Chat To Your Laravel App _ by Kofi Obrasi Ocran _ Nov, 2020 _ Medium.mhtml
6511 lines (5875 loc) · 418 KB
/
Adding Video Chat To Your Laravel App _ by Kofi Obrasi Ocran _ Nov, 2020 _ Medium.mhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
From: <Saved by Blink>
Snapshot-Content-Location: https://mupati.medium.com/adding-video-chat-to-your-laravel-app-9e333c8a01f3
Subject: Adding Video Chat To Your Laravel App | by Kofi Obrasi Ocran | Nov, 2020 | Medium
Date: Sun, 22 Nov 2020 15:28:39 -0000
MIME-Version: 1.0
Content-Type: multipart/related;
type="text/html";
boundary="----MultipartBoundary--9NA1j29yhjdRskHmn8tAFTZ8GhU5QYbRoQI4EyVhsx----"
------MultipartBoundary--9NA1j29yhjdRskHmn8tAFTZ8GhU5QYbRoQI4EyVhsx----
Content-Type: text/html
Content-ID: <[email protected]>
Content-Transfer-Encoding: quoted-printable
Content-Location: https://mupati.medium.com/adding-video-chat-to-your-laravel-app-9e333c8a01f3
<!DOCTYPE html><html lang=3D"en" data-rh=3D"lang"><head><meta http-equiv=3D=
"Content-Type" content=3D"text/html; charset=3DUTF-8"><link rel=3D"styleshe=
et" type=3D"text/css" href=3D"cid:css-4ce9b2c9-513d-4a92-b4fc-22aeb16b501a@=
mhtml.blink" /><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-5=
[email protected]" /><link rel=3D"stylesheet"=
type=3D"text/css" href=3D"cid:css-be86c89b-dadb-4bb0-a2f9-188f3051d7af@mht=
ml.blink" /><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-a0f8=
[email protected]" /><link rel=3D"stylesheet" ty=
pe=3D"text/css" href=3D"cid:css-0d8bf17e-2568-40e4-a3ac-c2ad6b046531@mhtml.=
blink" /><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-06ecbeb=
[email protected]" /><link rel=3D"stylesheet" type=
=3D"text/css" href=3D"cid:[email protected]=
ink" /><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-107c241c-=
[email protected]" /><link rel=3D"stylesheet" type=3D=
"text/css" href=3D"cid:[email protected]=
" /><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-1c7b6ab2-800=
[email protected]" /><link rel=3D"stylesheet" type=3D"te=
xt/css" href=3D"cid:[email protected]" /=
><link rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-7452beba-faab-4=
[email protected]" /><link rel=3D"stylesheet" type=3D"text/=
css" href=3D"cid:[email protected]" /><l=
ink rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-5722cdbe-ab17-4b11=
[email protected]" /><link rel=3D"stylesheet" type=3D"text/css=
" href=3D"cid:[email protected]" /><link=
rel=3D"stylesheet" type=3D"text/css" href=3D"cid:css-7533794f-c312-4368-94=
[email protected]" /><title>Adding Video Chat To Your Laravel App=
| by Kofi Obrasi Ocran | Nov, 2020 | Medium</title><meta data-rh=3D"true" =
name=3D"viewport" content=3D"width=3Ddevice-width,minimum-scale=3D1,initial=
-scale=3D1"><meta data-rh=3D"true" name=3D"theme-color" content=3D"#000000"=
><meta data-rh=3D"true" name=3D"twitter:app:name:iphone" content=3D"Medium"=
><meta data-rh=3D"true" name=3D"twitter:app:id:iphone" content=3D"828256236=
"><meta data-rh=3D"true" property=3D"al:ios:app_name" content=3D"Medium"><m=
eta data-rh=3D"true" property=3D"al:ios:app_store_id" content=3D"828256236"=
><meta data-rh=3D"true" property=3D"al:android:package" content=3D"com.medi=
um.reader"><meta data-rh=3D"true" property=3D"fb:app_id" content=3D"5425994=
32471018"><meta data-rh=3D"true" property=3D"og:site_name" content=3D"Mediu=
m"><meta data-rh=3D"true" property=3D"og:type" content=3D"article"><meta da=
ta-rh=3D"true" property=3D"article:published_time" content=3D"2020-11-18T21=
:33:29.973Z"><meta data-rh=3D"true" name=3D"title" content=3D"Adding Video =
Chat To Your Laravel App | by Kofi Obrasi Ocran | Nov, 2020 | Medium"><meta=
data-rh=3D"true" property=3D"og:title" content=3D"Adding Video Chat To You=
r Laravel App"><meta data-rh=3D"true" property=3D"twitter:title" content=3D=
"Adding Video Chat To Your Laravel App"><meta data-rh=3D"true" name=3D"twit=
ter:site" content=3D"@Medium"><meta data-rh=3D"true" name=3D"twitter:app:ur=
l:iphone" content=3D"medium://p/9e333c8a01f3"><meta data-rh=3D"true" proper=
ty=3D"al:android:url" content=3D"medium://p/9e333c8a01f3"><meta data-rh=3D"=
true" property=3D"al:ios:url" content=3D"medium://p/9e333c8a01f3"><meta dat=
a-rh=3D"true" property=3D"al:android:app_name" content=3D"Medium"><meta dat=
a-rh=3D"true" name=3D"description" content=3D"I was required to build a cus=
tom video chat application for a Vuejs and Laravel project. I went through =
a lot of hoops to get it working. I will share all that I learnt throughout=
the process over=E2=80=A6"><meta data-rh=3D"true" property=3D"og:descripti=
on" content=3D"A custom video chat application with laravel and vuejs with =
simple-peerjs as WebRTC wrapper."><meta data-rh=3D"true" property=3D"twitte=
r:description" content=3D"A custom video chat application with laravel and =
vuejs with simple-peerjs as WebRTC wrapper."><meta data-rh=3D"true" propert=
y=3D"og:url" content=3D"https://mupati.medium.com/adding-video-chat-to-your=
-laravel-app-9e333c8a01f3"><meta data-rh=3D"true" property=3D"al:web:url" c=
ontent=3D"https://mupati.medium.com/adding-video-chat-to-your-laravel-app-9=
e333c8a01f3"><meta data-rh=3D"true" property=3D"og:image" content=3D"https:=
//miro.medium.com/max/1200/1*ToVpKGi_uy9bhjh2rp6nMQ.jpeg"><meta data-rh=3D"=
true" name=3D"twitter:image:src" content=3D"https://miro.medium.com/max/120=
0/1*ToVpKGi_uy9bhjh2rp6nMQ.jpeg"><meta data-rh=3D"true" name=3D"twitter:car=
d" content=3D"summary_large_image"><meta data-rh=3D"true" property=3D"artic=
le:author" content=3D"https://mupati.medium.com"><meta data-rh=3D"true" nam=
e=3D"author" content=3D"Kofi Obrasi Ocran"><meta data-rh=3D"true" name=3D"r=
obots" content=3D"index,follow,max-image-preview:large"><meta data-rh=3D"tr=
ue" name=3D"referrer" content=3D"unsafe-url"><meta data-rh=3D"true" name=3D=
"twitter:label1" value=3D"Reading time"><meta data-rh=3D"true" name=3D"twit=
ter:data1" value=3D"6 min read"><meta data-rh=3D"true" name=3D"parsely-post=
-id" content=3D"9e333c8a01f3"><link data-rh=3D"true" rel=3D"search" type=3D=
"application/opensearchdescription+xml" title=3D"Medium" href=3D"https://mu=
pati.medium.com/osd.xml"><link data-rh=3D"true" rel=3D"apple-touch-icon" si=
zes=3D"152x152" href=3D"https://miro.medium.com/fit/c/152/152/1*sHhtYhaCe2U=
c3IU0IgKwIQ.png"><link data-rh=3D"true" rel=3D"apple-touch-icon" sizes=3D"1=
20x120" href=3D"https://miro.medium.com/fit/c/120/120/1*sHhtYhaCe2Uc3IU0IgK=
wIQ.png"><link data-rh=3D"true" rel=3D"apple-touch-icon" sizes=3D"76x76" hr=
ef=3D"https://miro.medium.com/fit/c/76/76/1*sHhtYhaCe2Uc3IU0IgKwIQ.png"><li=
nk data-rh=3D"true" rel=3D"apple-touch-icon" sizes=3D"60x60" href=3D"https:=
//miro.medium.com/fit/c/60/60/1*sHhtYhaCe2Uc3IU0IgKwIQ.png"><link data-rh=
=3D"true" rel=3D"mask-icon" href=3D"https://cdn-static-1.medium.com/_/fp/ic=
ons/Medium-Avatar-500x500.svg" color=3D"#171717"><link data-rh=3D"true" id=
=3D"glyph_link" rel=3D"stylesheet" type=3D"text/css" href=3D"https://glyph.=
medium.com/css/unbound.css"><link data-rh=3D"true" rel=3D"author" href=3D"h=
ttps://mupati.medium.com/"><link data-rh=3D"true" rel=3D"canonical" href=3D=
"https://mupati.medium.com/adding-video-chat-to-your-laravel-app-9e333c8a01=
f3"><link data-rh=3D"true" rel=3D"alternate" href=3D"android-app://com.medi=
um.reader/https/medium.com/p/9e333c8a01f3"><link rel=3D"preload" href=3D"ht=
tps://cdn.optimizely.com/js/16180790160.js" as=3D"script"></head><body><div=
id=3D"root"><div class=3D"a b c"><div class=3D"d e f g h i j k"></div><div=
></div><div class=3D"s"><div class=3D"t s u"><div class=3D"x y s"><div clas=
s=3D"n z c"><div class=3D"ab ac"><div class=3D"x s ae af"><div class=3D"n p=
"><div class=3D"ag ah ai aj ak al am w"><div class=3D"an n o"><div class=3D=
"n o ao ap"><div class=3D"hi" id=3D"lo-meta-header-sign-up-button"><div cla=
ss=3D"ar s"><span><button class=3D"as b at au av aw ax ay az ba bb bc bd be=
bf bg bh bi bj bk bl bm bn bo">Get started</button></span></div></div><div=
class=3D"hi" id=3D"lo-ShowPostUnderUser-navbar-open-in-app-button"><div cl=
ass=3D"bp ab ac"><span class=3D"as b at au bq"><a href=3D"https://rsci.app.=
link/?%24canonical_url=3Dhttps%3A%2F%2Fmedium.com%2Fp%2F9e333c8a01f3&~f=
eature=3DLoOpenInAppButton&~channel=3DShowPostUnderUser&~stage=3Dmo=
bileNavBar&source=3Dpost_page-----9e333c8a01f3-------------------------=
-------" class=3D"av ay br bs bt bu bv bw bx bd ba bb by bz ca" rel=3D"noop=
ener nofollow">Open in app</a></span></div></div></div><a href=3D"https://m=
edium.com/?source=3Dpost_page-----9e333c8a01f3-----------------------------=
---" aria-label=3D"Homepage" rel=3D"noopener"><svg viewBox=3D"0 0 1043.63 5=
92.71" class=3D"cb r"><g data-name=3D"Layer 2"><g data-name=3D"Layer 1"><pa=
th d=3D"M588.67 296.36c0 163.67-131.78 296.35-294.33 296.35S0 460 0 296.36 =
131.78 0 294.34 0s294.33 132.69 294.33 296.36M911.56 296.36c0 154.06-65.89 =
279-147.17 279s-147.17-124.94-147.17-279 65.88-279 147.16-279 147.17 124.9 =
147.17 279M1043.63 296.36c0 138-23.17 249.94-51.76 249.94s-51.75-111.91-51.=
75-249.94 23.17-249.94 51.75-249.94 51.76 111.9 51.76 249.94"></path></g></=
g></svg></a></div></div></div></div></div><div class=3D"n p"><div class=3D"=
ag ah ai aj ak al am w"><div class=3D"y n o ao cc cd ce cf cg"><div class=
=3D"w n ch cc"><div class=3D"v n w"><div class=3D"ci cj w n ck ao cl ce cf"=
><div class=3D"cm cn s"><a aria-label=3D"Author Homepage" rel=3D"noopener" =
href=3D"https://mupati.medium.com/?source=3Dpost_page-----9e333c8a01f3-----=
---------------------------"><span class=3D"as co cp cq cr cs ct cu cv cw c=
x cy cz da db">Kofi Obrasi Ocran</span></a></div><div class=3D"cm s dc"><h4=
class=3D"as b dd de df cs ct cu cv cw cx cy bq"><div class=3D"n o"><div cl=
ass=3D"cn s"><a class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl" rel=
=3D"noopener" href=3D"https://mupati.medium.com/about?source=3Dpost_page---=
--9e333c8a01f3--------------------------------">About</a></div><span><a hre=
f=3D"https://medium.com/m/signin?actionUrl=3D%2F_%2Fsubscribe%2Fuser%2Fba2c=
06e15c82&operation=3Dregister&redirect=3Dhttps%3A%2F%2Fmupati.mediu=
m.com%2Fadding-video-chat-to-your-laravel-app-9e333c8a01f3&source=3Dpos=
t_page-ba2c06e15c82----9e333c8a01f3---------------------follow_profile-----=
------" class=3D"av ay br bs bt bu bv bw bx bd ba bb by bz ca" rel=3D"noope=
ner">Follow</a></span></div></h4></div></div></div><div class=3D"n o dm dn =
af g"><div class=3D"hi" id=3D"lo-meta-header-sign-up-button"><div class=3D"=
cn s"><span><button class=3D"as b at au av aw ax ay az ba bb bc bd be bf bg=
bh bi bj bk bl bm bn bo">Get started</button></span></div></div><a href=3D=
"https://medium.com/?source=3Dpost_page-----9e333c8a01f3-------------------=
-------------" aria-label=3D"Homepage" rel=3D"noopener"><svg viewBox=3D"0 0=
1043.63 592.71" class=3D"cb r"><g data-name=3D"Layer 2"><g data-name=3D"La=
yer 1"><path d=3D"M588.67 296.36c0 163.67-131.78 296.35-294.33 296.35S0 460=
0 296.36 131.78 0 294.34 0s294.33 132.69 294.33 296.36M911.56 296.36c0 154=
.06-65.89 279-147.17 279s-147.17-124.94-147.17-279 65.88-279 147.16-279 147=
.17 124.9 147.17 279M1043.63 296.36c0 138-23.17 249.94-51.76 249.94s-51.75-=
111.91-51.75-249.94 23.17-249.94 51.75-249.94 51.76 111.9 51.76 249.94"></p=
ath></g></g></svg></a></div></div></div></div></div></div></div><div class=
=3D"ab dv ac"><div class=3D"do x c dp dq dr ds dt hi af du"><div class=3D"n=
p"><div class=3D"ag ah ai aj ak al am w"><div class=3D"dw w n o dt af"><di=
v class=3D"n o ap"><div class=3D"hi" id=3D"lo-sticky-header-sign-up-button"=
><span><button class=3D"as b at au av aw ax ay az ba bb bc bd be bf bg bh b=
i bj bk bl bm bn bo">Get started</button></span></div><div class=3D"hi" id=
=3D"lo-ShowPostUnderUser-navbar-open-in-app-button"><div class=3D"dx ab ac"=
><span class=3D"as b at au bq"><a href=3D"https://rsci.app.link/?%24canonic=
al_url=3Dhttps%3A%2F%2Fmedium.com%2Fp%2F9e333c8a01f3&~feature=3DLoOpenI=
nAppButton&~channel=3DShowPostUnderUser&~stage=3DmobileNavBar&s=
ource=3Dpost_page-----9e333c8a01f3--------------------------------" class=
=3D"av ay br bs bt bu bv bw bx bd ba bb by bz ca" rel=3D"noopener nofollow"=
>Open in app</a></span></div></div></div><a href=3D"https://medium.com/?sou=
rce=3Dpost_page-----9e333c8a01f3--------------------------------" aria-labe=
l=3D"Homepage" rel=3D"noopener"><svg viewBox=3D"0 0 1043.63 592.71" class=
=3D"cb r"><g data-name=3D"Layer 2"><g data-name=3D"Layer 1"><path d=3D"M588=
.67 296.36c0 163.67-131.78 296.35-294.33 296.35S0 460 0 296.36 131.78 0 294=
.34 0s294.33 132.69 294.33 296.36M911.56 296.36c0 154.06-65.89 279-147.17 2=
79s-147.17-124.94-147.17-279 65.88-279 147.16-279 147.17 124.9 147.17 279M1=
043.63 296.36c0 138-23.17 249.94-51.76 249.94s-51.75-111.91-51.75-249.94 23=
.17-249.94 51.75-249.94 51.76 111.9 51.76 249.94"></path></g></g></svg></a>=
</div></div></div></div></div></div><article><section class=3D"dy dz ea eb =
w ec bm s"></section><span class=3D"s"></span><div><div class=3D"ed dp sq e=
f eg eh"></div><section class=3D"db ei ej cw ek"><div class=3D"n p"><div cl=
ass=3D"ag ah ai aj ak el am w"><div><h1 id=3D"33e4" class=3D"em cz en as co=
eo ep eq er es et eu ev ew ex ey ez fa fb fc fd fe ff fg fh fi fj">Adding =
Video Chat To Your Laravel App</h1><div class=3D"fk"><div class=3D"n cc fl =
fm fn"><div class=3D"o n"><div><a rel=3D"noopener" href=3D"https://mupati.m=
edium.com/?source=3Dpost_page-----9e333c8a01f3-----------------------------=
---"><img alt=3D"Kofi Obrasi Ocran" class=3D"s fo fp fq" src=3D"https://mir=
o.medium.com/fit/c/56/56/1*gheGW0G--QSScCnZqwnQxg.jpeg" width=3D"28" height=
=3D"28"></a></div><div class=3D"fr w n"><div class=3D"n"><div style=3D"flex=
:1"><span class=3D"as b at au fj"><a class=3D"" rel=3D"noopener" href=3D"ht=
tps://mupati.medium.com/?source=3Dpost_page-----9e333c8a01f3---------------=
-----------------"><h4 class=3D"as b at au av">Kofi Obrasi Ocran</h4></a></=
span></div></div><span class=3D"as b at au bq"><a class=3D"" rel=3D"noopene=
r" href=3D"https://mupati.medium.com/adding-video-chat-to-your-laravel-app-=
9e333c8a01f3?source=3Dpost_page-----9e333c8a01f3---------------------------=
-----"><h4 class=3D"as b at au bq"><span class=3D"fs"></span>3 days ago<spa=
n class=3D"ft">=C2=B7</span>6 min read</h4></a></span></div></div><div clas=
s=3D"n ck fu fv fw fx fy fz ga gb"><div class=3D"n o"><div class=3D"gc s"><=
div class=3D"bn" aria-hidden=3D"false"><button class=3D"dg dh br bs bt bu b=
v bw bx bd di dj by dk dl" aria-label=3D"Share Post"><svg width=3D"25" heig=
ht=3D"25" class=3D"r"><g fill-rule=3D"evenodd"><path d=3D"M15.6 5a.42.42 0 =
0 0 .17-.3.42.42 0 0 0-.12-.33l-2.8-2.79a.5.5 0 0 0-.7 0l-2.8 2.8a.4.4 0 0 =
0-.1.32c0 .12.07.23.16.3h.02a.45.45 0 0 0 .57-.04l2-2V10c0 .28.23.5.5.5s.5-=
.22.5-.5V2.93l2.02 2.02c.08.07.18.12.3.13.11.01.21-.02.3-.08v.01"></path><p=
ath d=3D"M18 7h-1.5a.5.5 0 0 0 0 1h1.6c.5 0 .9.4.9.9v10.2c0 .5-.4.9-.9.9H6.=
9a.9.9 0 0 1-.9-.9V8.9c0-.5.4-.9.9-.9h1.6a.5.5 0 0 0 .35-.15A.5.5 0 0 0 9 7=
.5a.5.5 0 0 0-.15-.35A.5.5 0 0 0 8.5 7H7a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h11a=
2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"></path></g></svg></button></div></div><div c=
lass=3D"gd s"><div class=3D"ge"><span><a href=3D"https://medium.com/m/signi=
n?actionUrl=3D%2F_%2Fbookmark%2Fp%2F9e333c8a01f3&operation=3Dregister&a=
mp;redirect=3Dhttps%3A%2F%2Fmupati.medium.com%2Fadding-video-chat-to-your-l=
aravel-app-9e333c8a01f3&source=3Dpost_actions_header-------------------=
-------bookmark_preview-----------" class=3D"dg dh br bs bt bu bv bw bx bd =
di dj by dk dl" rel=3D"noopener"><svg width=3D"25" height=3D"25" viewBox=3D=
"0 0 25 25"><path d=3D"M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.=
05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 =
0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5=
.16-3.67a.49.49 0 0 0-.68 0z" fill-rule=3D"evenodd"></path></svg></a></span=
></div></div><div class=3D"gf s ap"></div></div></div></div></div></div></d=
iv></div><div class=3D"gg"><div class=3D"n p"><div class=3D"gh gi gj gk gl =
gm aj gn ak go am w"><figure class=3D"gq gg gr gs paragraph-image"><div rol=
e=3D"button" tabindex=3D"0" class=3D"gt gu ae gv w gw"><div class=3D"ea eb =
gp"><div class=3D"hc s ae hd"><div class=3D"he hf s"><div class=3D"dq gx ed=
dt dp gy w gz ha hb"><img alt=3D"Image for post" class=3D"ed dt dp gy w hg=
hh aq sv" src=3D"https://miro.medium.com/max/60/1*ToVpKGi_uy9bhjh2rp6nMQ.j=
peg?q=3D20" width=3D"4096" height=3D"2304"></div><img alt=3D"Image for post=
" class=3D"sr ss ed dt dp gy w c" width=3D"4096" height=3D"2304" src=3D"htt=
ps://miro.medium.com/max/8192/1*ToVpKGi_uy9bhjh2rp6nMQ.jpeg"></div></div></=
div></div><figcaption class=3D"hj hk ec ea eb hl hm as b at au bq" data-sel=
ectable-paragraph=3D"">Call banner</figcaption></figure></div></div></div><=
div class=3D"n p"><div class=3D"ag ah ai aj ak el am w"><p id=3D"c72b" clas=
s=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii=
ij ik db fj" data-selectable-paragraph=3D""><strong class=3D"hp co">INTROD=
UCTION</strong></p><p id=3D"ca05" class=3D"hn ho en hp b hq hr hs ht hu hv =
hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragra=
ph=3D"">I was required to build a custom video chat application for a Vuejs=
and Laravel project. I went through a lot of hoops to get it working. I wi=
ll share all that I learnt throughout the process over here.</p><p id=3D"4f=
5e" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if =
ig ih ii ij ik db fj" data-selectable-paragraph=3D"">Final Project Reposito=
ry: <a href=3D"https://github.com/Mupati/laravel-video-chat" class=3D"dg il=
" rel=3D"noopener nofollow">https://github.com/Mupati/laravel-video-chat</a=
></p><p id=3D"56da" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia=
ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D""><stron=
g class=3D"hp co">REQUIREMENTS</strong></p><ol class=3D""><li id=3D"ff06" c=
lass=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih=
ii ij ik im in io fj" data-selectable-paragraph=3D"">This tutorial assumes=
you know how to set up a new <code class=3D"hd ip iq ir is b">Laravel</cod=
e> project with <code class=3D"hd ip iq ir is b">VueJs</code> authenticatio=
n. Create some users after setting up your project. You should be familiar =
with Laravel's broadcasting mechanism and have a fair idea of how WebSocket=
s work.</li><li id=3D"4c17" class=3D"hn ho en hp b hq it hs ht hu iu hw hx =
hy iv ia ib ic iw ie if ig ix ii ij ik im in io fj" data-selectable-paragra=
ph=3D"">Set up a free pusher account on <a href=3D"https://pusher.com/" cla=
ss=3D"dg il" rel=3D"noopener nofollow">pusher.com</a></li><li id=3D"a63e" c=
lass=3D"hn ho en hp b hq it hs ht hu iu hw hx hy iv ia ib ic iw ie if ig ix=
ii ij ik im in io fj" data-selectable-paragraph=3D"">Set up your ICE SERVE=
R (TURN SERVER) details. This tutorial is a good guide. <a href=3D"https://=
meetrix.io/blog/webrtc/coturn/installation.html" class=3D"dg il" rel=3D"noo=
pener nofollow">HOW TO INSTALL COTURN</a>.</li></ol><p id=3D"2788" class=3D=
"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij =
ik db fj" data-selectable-paragraph=3D""><strong class=3D"hp co">PROJECT SE=
TUP</strong></p><figure class=3D"iy iz ja jb jc gg"><div class=3D"hc s ae">=
<div class=3D"jd hf s"></div></div></figure><p id=3D"d2b8" class=3D"hn ho e=
n hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj=
" data-selectable-paragraph=3D""><strong class=3D"hp co">CONFIGURING BACKEN=
D</strong></p><ol class=3D""><li id=3D"b8aa" class=3D"hn ho en hp b hq hr h=
s ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik im in io fj" data-s=
electable-paragraph=3D"">Add routes for video page in <code class=3D"hd ip =
iq ir is b">routes/web.php</code>. The routes will be used to visit the vid=
eo call page, make calls and receive calls.</li></ol><figure class=3D"iy iz=
ja jb jc gg"><div class=3D"hc s ae"><div class=3D"jd hf s"></div></div></f=
igure><p id=3D"0ec0" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz i=
a ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D"">2. Un=
comment <code class=3D"hd ip iq ir is b">BroadcastServiceProvider</code> in=
<code class=3D"hd ip iq ir is b">config/app.php</code>. This allows us to =
use Laravel's broadcasting system.</p><figure class=3D"iy iz ja jb jc gg"><=
div class=3D"hc s ae"><div class=3D"jd hf s"></div></div></figure><p id=3D"=
5e32" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie i=
f ig ih ii ij ik db fj" data-selectable-paragraph=3D"">3. Create a Presence=
Channel for the V<span id=3D"rmm"><span id=3D"rmm"><span id=3D"rmm"><span =
id=3D"rmm"><span id=3D"rmm"><span id=3D"rmm"><span id=3D"rmm">i</span></spa=
n></span></span></span></span></span>deo Chat Application in <code class=3D=
"hd ip iq ir is b">routes/channels.php</code>. When an authenticated user s=
ubscribes to the channel (presence-video-channel), we return the user's <co=
de class=3D"hd ip iq ir is b">id</code> and <code class=3D"hd ip iq ir is b=
">name</code>. This is how we are able to get the user who is logged in and=
can be called.</p><figure class=3D"iy iz ja jb jc gg"><div class=3D"hc s a=
e"><div class=3D"jd hf s"></div></div></figure><p id=3D"41f6" class=3D"hn h=
o en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db=
fj" data-selectable-paragraph=3D"">4. Create <code class=3D"hd ip iq ir is=
b">StartVideoChat</code> event. This event will be called when placing a c=
all or accepting a call and it will broadcast on the presence-video-call ch=
annel. Users subscribed to the channel will be listening to this event on t=
he frontend so that incoming call notifications can be triggered.</p><pre c=
lass=3D"iy iz ja jb jc je jf jg"><span id=3D"e264" class=3D"fj jh ji en is =
b dd jj jk s jl" data-selectable-paragraph=3D"">php artisan make:event Star=
tVideoChat</span></pre><p id=3D"38ba" class=3D"hn ho en hp b hq hr hs ht hu=
hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-par=
agraph=3D"">5. Add the following code to <code class=3D"hd ip iq ir is b">a=
pp/Events/StartVideoChat.php</code>. The StartVideoChat event broadcasts to=
<code class=3D"hd ip iq ir is b">presence-video-channel</code> so that the=
data needed to initiate the video call is shared on the channel.</p><figur=
e class=3D"iy iz ja jb jc gg"><div class=3D"hc s ae"><div class=3D"jd hf s"=
></div></div></figure><p id=3D"1fe2" class=3D"hn ho en hp b hq hr hs ht hu =
hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-para=
graph=3D"">6. Create <code class=3D"hd ip iq ir is b">VideoChatController</=
code> to make and accept calls and add the code that follows.</p><pre class=
=3D"iy iz ja jb jc je jf jg"><span id=3D"33cb" class=3D"fj jh ji en is b dd=
jj jk s jl" data-selectable-paragraph=3D"">php artisan make:controller Vid=
eoChatController</span></pre><figure class=3D"iy iz ja jb jc gg"><div class=
=3D"hc s ae"><div class=3D"jd hf s"></div></div></figure><p id=3D"c6de" cla=
ss=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih i=
i ij ik db fj" data-selectable-paragraph=3D""><strong class=3D"hp co">Expla=
nation of Methods in the VideoChatController<br></strong>One thing to under=
stand is that the VideoChat Application is a realtime application that work=
s with web sockets. The endpoints are just needed to establish the link bet=
ween the 2 calling parties after which the communication data is exchanged =
via WebSockets.<br>Let=E2=80=99s try to understand what the 2 methods in th=
e Controller are doing:</p><p id=3D"172c" class=3D"hn ho en hp b hq hr hs h=
t hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable=
-paragraph=3D""><code class=3D"hd ip iq ir is b"><strong class=3D"hp co">ca=
llUser</strong></code><strong class=3D"hp co"> Method</strong><br>* <code c=
lass=3D"hd ip iq ir is b">user_to_call</code>: <code class=3D"hd ip iq ir i=
s b">id</code> of the user, the initiator of the call wants to reach.<br>* =
<code class=3D"hd ip iq ir is b">signal_data</code>: The initial signal dat=
a (offer) sent by the caller from the webrtc client (simple-peerjs is the w=
ebrtc wrapper we are using). These are the parameters received. We create a=
<code class=3D"hd ip iq ir is b">data</code> object with 2 additional prop=
erties,<code class=3D"hd ip iq ir is b">from</code> and <code class=3D"hd i=
p iq ir is b">type</code> then broadcast the data with the <code class=3D"h=
d ip iq ir is b">StartVideoChat</code> event which will be listened to on t=
he frontend.<br>* <code class=3D"hd ip iq ir is b">from</code>: is the <cod=
e class=3D"hd ip iq ir is b">id</code> of the user placing the call. We use=
the authenticated user's id.<br>* <code class=3D"hd ip iq ir is b">type</c=
ode>: is a property of the data which will indicate that there is an incomi=
ng call on the channel. The notification will be shown to the user whose <c=
ode class=3D"hd ip iq ir is b">id</code> corresponds to the value of <code =
class=3D"hd ip iq ir is b">user_to_call</code>.</p><p id=3D"f23f" class=3D"=
hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij i=
k db fj" data-selectable-paragraph=3D""><code class=3D"hd ip iq ir is b"><s=
trong class=3D"hp co">acceptCall</strong></code><strong class=3D"hp co"> Me=
thod<br></strong>* <code class=3D"hd ip iq ir is b">signal</code>: This is =
the callee's <code class=3D"hd ip iq ir is b">answer</code> data.<br>* <cod=
e class=3D"hd ip iq ir is b">to</code>: The caller's of the call's <code cl=
ass=3D"hd ip iq ir is b">id</code>. The signal data for the answered call i=
s sent to the user whose id matches <code class=3D"hd ip iq ir is b">to</co=
de> and this is supposed to be the caller's id. *<code class=3D"hd ip iq ir=
is b">type</code>: A property added to the data to be sent over the channe=
l indicating that the call recipient has accepted the call.</p><figure clas=
s=3D"iy iz ja jb jc gg ea eb paragraph-image"><div role=3D"button" tabindex=
=3D"0" class=3D"gt gu ae gv w gw"><div class=3D"ea eb jm"><div class=3D"hc =
s ae hd"><div class=3D"jn hf s"><div class=3D"sr ss ed dt dp gy w gz ha hb"=
><img alt=3D"Image for post" class=3D"ed dt dp gy w hg hh hi" src=3D"https:=
//miro.medium.com/max/60/1*S6vzJvy1ML1IQh6z_UblZw.png?q=3D20" width=3D"777"=
height=3D"383"></div><img alt=3D"Image for post" class=3D"dq gx ed dt dp g=
y w c" width=3D"777" height=3D"383"></div></div></div></div><figcaption cla=
ss=3D"hj hk ec ea eb hl hm as b at au bq" data-selectable-paragraph=3D"">In=
coming Call Notification</figcaption></figure><p id=3D"9ac0" class=3D"hn ho=
en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db =
fj" data-selectable-paragraph=3D""><strong class=3D"hp co">CONFIGURING FRON=
TED</strong></p><ol class=3D""><li id=3D"7195" class=3D"hn ho en hp b hq hr=
hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik im in io fj" data=
-selectable-paragraph=3D"">Instantiate <code class=3D"hd ip iq ir is b">Lar=
avel Echo</code> and <code class=3D"hd ip iq ir is b">Pusher</code> in <cod=
e class=3D"hd ip iq ir is b">resources/js/bootstrap.js</code> by uncommenti=
ng the following block of code.</li></ol><figure class=3D"iy iz ja jb jc gg=
"><div class=3D"hc s ae"><div class=3D"jd hf s"></div></div></figure><p id=
=3D"e725" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id =
ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D"">2. Create <code =
class=3D"hd ip iq ir is b">resources/js/helpers.js</code>. Add a <code clas=
s=3D"hd ip iq ir is b">getPermissions</code> function to help with permissi=
on access for microphone and videos. This method handles the video and audi=
o permission that is required by browsers to make the video calls. It waits=
for the user to accept the permissions before we can proceed with the vide=
o call. We allow both audio and video. Read more on <a href=3D"https://deve=
loper.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" class=3D"dg=
il" rel=3D"noopener nofollow">MDN Website</a>.</p><figure class=3D"iy iz j=
a jb jc gg"><div class=3D"hc s ae"><div class=3D"jd hf s"></div></div></fig=
ure><p id=3D"caa3" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia =
ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D"">3. Crea=
te a Video Chat Component, <code class=3D"hd ip iq ir is b">resources/js/co=
mponents/VideoChat.vue</code>.</p><figure class=3D"iy iz ja jb jc gg"><div =
class=3D"hc s ae"><div class=3D"jd hf s"></div></div></figure><p id=3D"8b2d=
" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig=
ih ii ij ik db fj" data-selectable-paragraph=3D""><strong class=3D"hp co">=
Breakdown of the video-chat component.</strong></p><ol class=3D""><li id=3D=
"e656" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie =
if ig ih ii ij ik im in io fj" data-selectable-paragraph=3D"">We import <co=
de class=3D"hd ip iq ir is b">Peer</code> from <code class=3D"hd ip iq ir i=
s b">simple-peer</code> which is the package that makes interacting with we=
brtc easier for us.</li></ol><ul class=3D""><li id=3D"b153" class=3D"hn ho =
en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik jo i=
n io fj" data-selectable-paragraph=3D"">The component accepts the following=
props:<br><code class=3D"hd ip iq ir is b">allusers</code>: All registered=
users excluding the currently authenticated user. These users will be disp=
layed. We don't want to permit the authenticated user to call oneself.</li>=
<li id=3D"a87b" class=3D"hn ho en hp b hq it hs ht hu iu hw hx hy iv ia ib =
ic iw ie if ig ix ii ij ik jo in io fj" data-selectable-paragraph=3D""><cod=
e class=3D"hd ip iq ir is b">authuserid</code>: The <code class=3D"hd ip iq=
ir is b">id</code> of the authenticated user.</li><li id=3D"b550" class=3D=
"hn ho en hp b hq it hs ht hu iu hw hx hy iv ia ib ic iw ie if ig ix ii ij =
ik jo in io fj" data-selectable-paragraph=3D""><code class=3D"hd ip iq ir i=
s b">turn_url</code>: The URL of your turn server to be used in an instance=
of <code class=3D"hd ip iq ir is b">simple-peer</code> i.e <code class=3D"=
hd ip iq ir is b">Peer</code>.</li><li id=3D"e43d" class=3D"hn ho en hp b h=
q it hs ht hu iu hw hx hy iv ia ib ic iw ie if ig ix ii ij ik jo in io fj" =
data-selectable-paragraph=3D""><code class=3D"hd ip iq ir is b">turn_userna=
me</code>: Username from TURN Server.</li><li id=3D"fe25" class=3D"hn ho en=
hp b hq it hs ht hu iu hw hx hy iv ia ib ic iw ie if ig ix ii ij ik jo in =
io fj" data-selectable-paragraph=3D""><code class=3D"hd ip iq ir is b">turn=
_credential</code>: The password for the turn_username.</li></ul><p id=3D"d=
703" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if=
ig ih ii ij ik db fj" data-selectable-paragraph=3D"">2. When the component=
is mounted we subscribe to the <code class=3D"hd ip iq ir is b">presence-v=
ideo-channel</code> with the <code class=3D"hd ip iq ir is b">initializeCha=
nnel</code> method. We use <code class=3D"hd ip iq ir is b">Laravel-echo</c=
ode> for that.</p><p id=3D"b88e" class=3D"hn ho en hp b hq hr hs ht hu hv h=
w hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragrap=
h=3D"">3. We <code class=3D"hd ip iq ir is b">initializeCallListeners</code=
> on the channel, we subscribed to. There are methods provided by <code cla=
ss=3D"hd ip iq ir is b">Laravel-echo</code> to know how many users have sub=
scribed to the channel, users who are joining and users leaving the channel=
. We also listen to the <code class=3D"hd ip iq ir is b">StartVideoChat</co=
de> event on the <code class=3D"hd ip iq ir is b">presence-video-channel</c=
ode> for incoming calls.</p><p id=3D"dd28" class=3D"hn ho en hp b hq hr hs =
ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectabl=
e-paragraph=3D"">4. We list all the users in the database from the <code cl=
ass=3D"hd ip iq ir is b">allUsers</code> prop and indicate whether they are=
online or not. Online means they have also subscribed to the <code class=
=3D"hd ip iq ir is b">presence-video-channel</code>. This will take effect =
on whichever page you place the <code class=3D"hd ip iq ir is b">video-chat=
</code> component. In this tutorial, we have a video-chat page where we pla=
ce the component.</p><p id=3D"beb9" class=3D"hn ho en hp b hq hr hs ht hu h=
v hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-parag=
raph=3D"">5. <code class=3D"hd ip iq ir is b">placeVideoCall</code> is used=
to make a call. We pass the <code class=3D"hd ip iq ir is b">id</code> and=
<code class=3D"hd ip iq ir is b">name</code> of the user being called as p=
arameters.<br>We ask the user to grant the browser access to the microphone=
and camera with <code class=3D"hd ip iq ir is b">getMediaPermission</code>=
method. The streaming data is displayed in the browser. The caller now see=
s their face in the browser.<br>We create a Peer for the caller. When there=
is a signalling event, <code class=3D"hd ip iq ir is b">peer.on('signal',.=
.)</code> we send the signalling data to the <code class=3D"hd ip iq ir is =
b">/video/call-user</code> endpoint on our backend.<br>The recipient receiv=
es the incoming call notification and when they accept the call, we signal =
the caller with an <code class=3D"hd ip iq ir is b">answer</code> signal.<b=
r>The <code class=3D"hd ip iq ir is b">peer.on('stream',...)</code>listener=
receives the streaming data which is displayed on the recipients part in t=
he browser.</p><p id=3D"590e" class=3D"hn ho en hp b hq hr hs ht hu hv hw h=
x hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=
=3D"">6. <code class=3D"hd ip iq ir is b">acceptCall</code> method is used =
to accept an incoming call. When a user sees an incoming call notification,=
they click on the accept button. We signal the receiver with the signal da=
ta received from the caller.<br>We get permission to access the camera and =
microphone and display the streaming data on our UI.<br>This creates a seco=
nd instance of the <code class=3D"hd ip iq ir is b">Peer</code> with the <c=
ode class=3D"hd ip iq ir is b">initiator</code> property set to <code class=
=3D"hd ip iq ir is b">false</code> to indicate that the new Peer is a recei=
ver.<br>We hit the accept-call endpoint and send our signalling data (an an=
swer) to the caller.</p><p id=3D"758d" class=3D"hn ho en hp b hq hr hs ht h=
u hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selectable-pa=
ragraph=3D"">When the streaming starts, we display the caller=E2=80=99s str=
eam in the browser as well and now communication continues without hitting =
our backend but through the WebSocket powered by pusher.</p><ul class=3D"">=
<li id=3D"6647" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib =
ic id ie if ig ih ii ij ik jo in io fj" data-selectable-paragraph=3D"">The =
remaining functions are used for muting audio, disable video stream and to =
end the call.</li></ul><figure class=3D"iy iz ja jb jc gg ea eb paragraph-i=
mage"><div role=3D"button" tabindex=3D"0" class=3D"gt gu ae gv w gw"><div c=
lass=3D"ea eb jp"><div class=3D"hc s ae hd"><div class=3D"jq hf s"><div cla=
ss=3D"sr ss ed dt dp gy w gz ha hb"><img alt=3D"Image for post" class=3D"ed=
dt dp gy w hg hh hi" src=3D"https://miro.medium.com/max/60/1*KhdwsVVN-DS5s=
yqkKhXt-A.png?q=3D20" width=3D"807" height=3D"656"></div><img alt=3D"Image =
for post" class=3D"dq gx ed dt dp gy w c" width=3D"807" height=3D"656"></di=
v></div></div></div><figcaption class=3D"hj hk ec ea eb hl hm as b at au bq=
" data-selectable-paragraph=3D"">Ongoing video call session</figcaption></f=
igure><p id=3D"3256" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz i=
a ib ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D"">7. Re=
gister the <code class=3D"hd ip iq ir is b">VideoChat.vue</code> component =
in <code class=3D"hd ip iq ir is b">resources/js/app.js</code></p><pre clas=
s=3D"iy iz ja jb jc je jf jg"><span id=3D"7b00" class=3D"fj jh ji en is b d=
d jj jk s jl" data-selectable-paragraph=3D"">Vue.component("video-chat", re=
quire("./components/VideoChat.vue").default);</span></pre><p id=3D"fbbf" cl=
ass=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih =
ii ij ik db fj" data-selectable-paragraph=3D"">8. Create the video chat vie=
w in <code class=3D"hd ip iq ir is b">resources/views/video-chat.blade.php<=
/code></p><figure class=3D"iy iz ja jb jc gg"><div class=3D"hc s ae"><div c=
lass=3D"jd hf s"></div></div></figure><p id=3D"504f" class=3D"hn ho en hp b=
hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data=
-selectable-paragraph=3D"">9. Update env variables. Insert your Pusher API =
keys and TURN SERVER details.</p><pre class=3D"iy iz ja jb jc je jf jg"><sp=
an id=3D"1ea8" class=3D"fj jh ji en is b dd jj jk s jl" data-selectable-par=
agraph=3D"">BROADCAST_DRIVER=3Dpusher<br><br>PUSHER_APP_ID=3D<br>PUSHER_APP=
_KEY=3D<br>PUSHER_APP_SECRET=3D<br>PUSHER_APP_CLUSTER=3D<br><br>TURN_SERVER=
_URL=3D<br>TURN_SERVER_USERNAME=3D<br>TURN_SERVER_CREDENTIAL=3D</span></pre=
><p id=3D"cd8d" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib =
ic id ie if ig ih ii ij ik db fj" data-selectable-paragraph=3D""><strong cl=
ass=3D"hp co">CREDITS</strong></p><p id=3D"8a59" class=3D"hn ho en hp b hq =
hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-sel=
ectable-paragraph=3D"">I found a lot of resources beneficial which I cannot=
share all over here, but the following YouTube videos helped in my underst=
anding and arriving at this implementation.</p><ol class=3D""><li id=3D"af0=
e" class=3D"hn ho en hp b hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if i=
g ih ii ij ik im in io fj" data-selectable-paragraph=3D""><a href=3D"https:=
//www.youtube.com/watch?v=3DBpN6ZwFjbCY&list=3DPLK0STOMCFms4nXm1bRUdjhP=
g0coxI2U6h" class=3D"dg il" rel=3D"noopener nofollow">Coding With Chaim</a>=
</li><li id=3D"0aed" class=3D"hn ho en hp b hq it hs ht hu iu hw hx hy iv i=
a ib ic iw ie if ig ix ii ij ik im in io fj" data-selectable-paragraph=3D""=
><a href=3D"https://youtu.be/5pnsloZzYQM" class=3D"dg il" rel=3D"noopener n=
ofollow">We Code</a></li></ol><p id=3D"3642" class=3D"hn ho en hp b hq hr h=
s ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik db fj" data-selecta=
ble-paragraph=3D"">I=E2=80=99d like to hear your thoughts about how easy it=
is to follow through this article.</p></div></div></section></div></articl=
e><div class=3D"dq eh dr jr w su jw jz" data-test-id=3D"post-sidebar"><div =
class=3D"n p"><div class=3D"ag ah ai aj ak al am w"><div class=3D"ka n z"><=
div class=3D"eh"><div><div class=3D"kc x s"><p class=3D"as b kd ke kf bq kg=
">Written by</p><div class=3D"gr gs s"><a class=3D"dg dh br bs bt bu bv bw =
bx bd di dj by dk dl" rel=3D"noopener" href=3D"https://mupati.medium.com/?s=
ource=3Dpost_sidebar--------------------------post_sidebar-----------"><h2 =
class=3D"as kb dd au cz fj db">Kofi Obrasi Ocran</h2></a></div><div class=
=3D"kh s"><h4 class=3D"as b at au bq">I'm Accra-based Software Engineer del=
ivering solutions to multiple client with Code. Frontend, Backend and Inter=
ested in AI</h4></div><div class=3D"ki s"><span><button class=3D"as b at au=
fj kj r ax kk kl km kn bd be bf ko kp kq bj bk bl bm bn bo">Follow</button=
></span></div></div><div class=3D"kr ks kt n"><div class=3D"n o"><div class=
=3D"s ae ku kv kw kx ky"><span><a href=3D"https://medium.com/m/signin?actio=
nUrl=3D%2F_%2Fvote%2Fp%2F9e333c8a01f3&operation=3Dregister&redirect=
=3Dhttps%3A%2F%2Fmupati.medium.com%2Fadding-video-chat-to-your-laravel-app-=
9e333c8a01f3&source=3Dpost_sidebar-----9e333c8a01f3--------------------=
-clap_sidebar-----------" class=3D"dg dh br bs bt bu bv bw bx bd di dj by d=
k dl" rel=3D"noopener"><div class=3D"bw kz la lb lc ld le lf r lg lh"><svg =
width=3D"29" height=3D"29" aria-label=3D"clap"><g fill-rule=3D"evenodd"><pa=
th d=3D"M13.74 1l.76 2.97.76-2.97zM16.82 4.78l1.84-2.56-1.43-.47zM10.38 2.2=
2l1.84 2.56-.41-3.03zM22.38 22.62a5.11 5.11 0 0 1-3.16 1.61l.49-.45c2.88-2.=
89 3.45-5.98 1.69-9.21l-1.1-1.94-.96-2.02c-.31-.67-.23-1.18.25-1.55a.84.84 =
0 0 1 .66-.16c.34.05.66.28.88.6l2.85 5.02c1.18 1.97 1.38 5.12-1.6 8.1M9.1 2=
2.1l-5.02-5.02a1 1 0 0 1 .7-1.7 1 1 0 0 1 .72.3l2.6 2.6a.44.44 0 0 0 .63-.6=
2L6.1 15.04l-1.75-1.75a1 1 0 1 1 1.41-1.41l4.15 4.15a.44.44 0 0 0 .63 0 .44=
.44 0 0 0 0-.62L6.4 11.26l-1.18-1.18a1 1 0 0 1 0-1.4 1.02 1.02 0 0 1 1.41 0=
l1.18 1.16L11.96 14a.44.44 0 0 0 .62 0 .44.44 0 0 0 0-.63L8.43 9.22a.99.99 =
0 0 1-.3-.7.99.99 0 0 1 .3-.7 1 1 0 0 1 1.41 0l7 6.98a.44.44 0 0 0 .7-.5l-1=
.35-2.85c-.31-.68-.23-1.19.25-1.56a.85.85 0 0 1 .66-.16c.34.06.66.28.88.6L2=
0.63 15c1.57 2.88 1.07 5.54-1.55 8.16a5.62 5.62 0 0 1-5.06 1.65 9.35 9.35 0=
0 1-4.93-2.72zM13 6.98l2.56 2.56c-.5.6-.56 1.41-.15 2.28l.26.56-4.25-4.25a=
.98.98 0 0 1-.12-.45 1 1 0 0 1 .29-.7 1.02 1.02 0 0 1 1.41 0zm8.89 2.06c-.3=
8-.56-.9-.92-1.49-1.01a1.74 1.74 0 0 0-1.34.33c-.38.29-.61.65-.71 1.06a2.1 =
2.1 0 0 0-1.1-.56 1.78 1.78 0 0 0-.99.13l-2.64-2.64a1.88 1.88 0 0 0-2.65 0 =
1.86 1.86 0 0 0-.48.85 1.89 1.89 0 0 0-2.67-.01 1.87 1.87 0 0 0-.5.9c-.76-.=
75-2-.75-2.7-.04a1.88 1.88 0 0 0 0 2.66c-.3.12-.61.29-.87.55a1.88 1.88 0 0 =
0 0 2.66l.62.62a1.88 1.88 0 0 0-.9 3.16l5.01 5.02c1.6 1.6 3.52 2.64 5.4 2.9=
6a7.16 7.16 0 0 0 1.18.1c1.03 0 2-.25 2.9-.7A5.9 5.9 0 0 0 23 23.24c3.34-3.=
34 3.08-6.93 1.74-9.17l-2.87-5.04z"></path></g></svg></div></a></span></div=
><div class=3D"s li lj lk ll lm ln lo"><div class=3D"lp"><h4 class=3D"as b =
at au bq"><button class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl">2 =
</button></h4></div></div></div></div><div class=3D"ks s"><button class=3D"=
lc la bw"><div class=3D"ls n o ao"><svg width=3D"25" height=3D"25" class=3D=
"r" aria-label=3D"responses"><path d=3D"M19.07 21.12a6.33 6.33 0 0 1-3.53-1=
.1 7.8 7.8 0 0 1-.7-.52c-.77.21-1.57.32-2.38.32-4.67 0-8.46-3.5-8.46-7.8C4 =
7.7 7.79 4.2 12.46 4.2c4.66 0 8.46 3.5 8.46 7.8 0 2.06-.85 3.99-2.4 5.45a6.=
28 6.28 0 0 0 1.14 2.59c.15.21.17.48.06.7a.69.69 0 0 1-.62.38h-.03zm0-1v.5l=
.03-.5h-.03zm-3.92-1.64l.21.2a6.09 6.09 0 0 0 3.24 1.54 7.14 7.14 0 0 1-.83=
-1.84 5.15 5.15 0 0 1-.16-.75 2.4 2.4 0 0 1-.02-.29v-.23l.18-.15a6.6 6.6 0 =
0 0 2.3-4.96c0-3.82-3.4-6.93-7.6-6.93-4.19 0-7.6 3.11-7.6 6.93 0 3.83 3.41 =
6.94 7.6 6.94.83 0 1.64-.12 2.41-.35l.28-.08z" fill-rule=3D"evenodd"></path=
></svg><div class=3D"s ae lt lu lv lw lx ly lz ma"></div></div></button></d=
iv><div class=3D"ge"><span><a href=3D"https://medium.com/m/signin?actionUrl=
=3D%2F_%2Fbookmark%2Fp%2F9e333c8a01f3&operation=3Dregister&redirect=
=3Dhttps%3A%2F%2Fmupati.medium.com%2Fadding-video-chat-to-your-laravel-app-=
9e333c8a01f3&source=3Dpost_sidebar-----9e333c8a01f3--------------------=
-bookmark_sidebar-----------" class=3D"dg dh br bs bt bu bv bw bx bd di dj =
by dk dl" rel=3D"noopener"><svg width=3D"25" height=3D"25" viewBox=3D"0 0 2=
5 25"><path d=3D"M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.1=
2.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-=
.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.=
67a.49.49 0 0 0-.68 0z" fill-rule=3D"evenodd"></path></svg></a></span></div=
></div></div></div></div></div></div><div class=3D"dq eh jr dr js jt ju jv =
jw jx"></div><div><div class=3D"cm gg n z p"><div class=3D"n p"><div class=
=3D"ag ah ai aj ak el am w"><div class=3D"n cl"></div><div class=3D"n o cl"=
></div><div class=3D"mb mc s"><div class=3D"mc n cc gb"><div class=3D"n ao"=
><div class=3D"md s"><span class=3D"s me mf mg e d"><div class=3D"n o"><div=
class=3D"s ae ku kv kw kx ky"><span><a href=3D"https://medium.com/m/signin=
?actionUrl=3D%2F_%2Fvote%2Fp%2F9e333c8a01f3&operation=3Dregister&re=
direct=3Dhttps%3A%2F%2Fmupati.medium.com%2Fadding-video-chat-to-your-larave=
l-app-9e333c8a01f3&source=3Dpost_actions_footer-----9e333c8a01f3-------=
--------------clap_footer-----------" class=3D"dg dh br bs bt bu bv bw bx b=
d di dj by dk dl" rel=3D"noopener"><div class=3D"bw kz la lb lc ld le lf r =
lg lh"><svg width=3D"25" height=3D"25" viewBox=3D"0 0 25 25" aria-label=3D"=
clap"><g fill-rule=3D"evenodd"><path d=3D"M11.74 0l.76 2.97.76-2.97zM14.81 =
3.78l1.84-2.56-1.42-.47zM8.38 1.22l1.84 2.56L9.8.75zM20.38 21.62a5.11 5.11 =
0 0 1-3.16 1.61l.49-.45c2.88-2.89 3.45-5.98 1.69-9.21l-1.1-1.94-.96-2.02c-.=
31-.67-.23-1.18.25-1.55a.84.84 0 0 1 .66-.16c.34.05.66.28.88.6l2.85 5.02c1.=
18 1.97 1.38 5.12-1.6 8.1M7.1 21.1l-5.02-5.02a1 1 0 0 1 .7-1.7 1 1 0 0 1 .7=
2.3l2.6 2.6a.44.44 0 0 0 .63-.62L4.1 14.04l-1.75-1.75a1 1 0 1 1 1.41-1.41l4=
.15 4.15a.44.44 0 0 0 .63 0 .44.44 0 0 0 0-.62L4.4 10.26 3.22 9.08a1 1 0 0 =
1 0-1.4 1.02 1.02 0 0 1 1.41 0l1.18 1.16L9.96 13a.44.44 0 0 0 .62 0 .44.44 =
0 0 0 0-.63L6.43 8.22a.99.99 0 0 1-.3-.7.99.99 0 0 1 .3-.7 1 1 0 0 1 1.41 0=
l7 6.98a.44.44 0 0 0 .7-.5l-1.35-2.85c-.31-.68-.23-1.19.25-1.56a.85.85 0 0 =
1 .66-.16c.34.06.66.28.88.6L18.63 14c1.57 2.88 1.07 5.54-1.55 8.16a5.62 5.6=
2 0 0 1-5.06 1.65 9.35 9.35 0 0 1-4.93-2.72zM11 5.98l2.56 2.56c-.5.6-.56 1.=
41-.15 2.28l.26.56-4.25-4.25a.98.98 0 0 1-.12-.45 1 1 0 0 1 .29-.7 1.02 1.0=
2 0 0 1 1.41 0zm8.89 2.06c-.38-.56-.9-.92-1.49-1.01a1.74 1.74 0 0 0-1.34.33=
c-.38.29-.61.65-.71 1.06a2.1 2.1 0 0 0-1.1-.56 1.78 1.78 0 0 0-.99.13l-2.64=
-2.64a1.88 1.88 0 0 0-2.65 0 1.86 1.86 0 0 0-.48.85 1.89 1.89 0 0 0-2.67-.0=
1 1.87 1.87 0 0 0-.5.9c-.76-.75-2-.75-2.7-.04a1.88 1.88 0 0 0 0 2.66c-.3.12=
-.61.29-.87.55a1.88 1.88 0 0 0 0 2.66l.62.62a1.88 1.88 0 0 0-.9 3.16l5.01 5=
.02c1.6 1.6 3.52 2.64 5.4 2.96a7.16 7.16 0 0 0 1.18.1c1.03 0 2-.25 2.9-.7A5=
.9 5.9 0 0 0 21 22.24c3.34-3.34 3.08-6.93 1.74-9.17l-2.87-5.04z"></path></g=
></svg></div></a></span></div><div class=3D"s li lj lk ll lm ln lo"><div cl=
ass=3D"ae mh lp"><h4 class=3D"as b at au fj"><button class=3D"dg dh br bs b=
t bu bv bw bx bd di dj by dk dl">2<span class=3D"s h g f mi mj"> </spa=
n></button><span class=3D"s h g f mi mj"></span></h4></div></div></div></sp=
an><span class=3D"s h g f mi mj"><div class=3D"n ch"><div class=3D"s ae ku =
kv"><span><a href=3D"https://medium.com/m/signin?actionUrl=3D%2F_%2Fvote%2F=
p%2F9e333c8a01f3&operation=3Dregister&redirect=3Dhttps%3A%2F%2Fmupa=
ti.medium.com%2Fadding-video-chat-to-your-laravel-app-9e333c8a01f3&sour=
ce=3Dpost_actions_footer-----9e333c8a01f3---------------------clap_footer--=
---------" class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl" rel=3D"no=
opener"><div class=3D"bw kz la lb lc ld le lf r lg lh"><svg width=3D"33" he=
ight=3D"33" viewBox=3D"0 0 33 33" aria-label=3D"clap"><path d=3D"M28.86 17.=
34l-3.64-6.4c-.3-.43-.71-.73-1.16-.8a1.12 1.12 0 0 0-.9.21c-.62.5-.73 1.18-=
.32 2.06l1.22 2.6 1.4 2.45c2.23 4.09 1.51 8-2.15 11.66a9.6 9.6 0 0 1-.8.71 =
6.53 6.53 0 0 0 4.3-2.1c3.82-3.82 3.57-7.87 2.05-10.39zm-6.25 11.08c3.35-3.=
35 4-6.78 1.98-10.47L21.2 12c-.3-.43-.71-.72-1.16-.8a1.12 1.12 0 0 0-.9.22c=
-.62.49-.74 1.18-.32 2.06l1.72 3.63a.5.5 0 0 1-.81.57l-8.91-8.9a1.33 1.33 0=
0 0-1.89 1.88l5.3 5.3a.5.5 0 0 1-.71.7l-5.3-5.3-1.49-1.49c-.5-.5-1.38-.5-1=
.88 0a1.34 1.34 0 0 0 0 1.89l1.49 1.5 5.3 5.28a.5.5 0 0 1-.36.86.5.5 0 0 1-=
.36-.15l-5.29-5.29a1.34 1.34 0 0 0-1.88 0 1.34 1.34 0 0 0 0 1.89l2.23 2.23L=
9.3 21.4a.5.5 0 0 1-.36.85.5.5 0 0 1-.35-.14l-3.32-3.33a1.33 1.33 0 0 0-1.8=
9 0 1.32 1.32 0 0 0-.39.95c0 .35.14.69.4.94l6.39 6.4c3.53 3.53 8.86 5.3 12.=
82 1.35zM12.73 9.26l5.68 5.68-.49-1.04c-.52-1.1-.43-2.13.22-2.89l-3.3-3.3a1=
.34 1.34 0 0 0-1.88 0 1.33 1.33 0 0 0-.4.94c0 .22.07.42.17.61zm14.79 19.18a=
7.46 7.46 0 0 1-6.41 2.31 7.92 7.92 0 0 1-3.67.9c-3.05 0-6.12-1.63-8.36-3.8=
8l-6.4-6.4A2.31 2.31 0 0 1 2 19.72a2.33 2.33 0 0 1 1.92-2.3l-.87-.87a2.34 2=
.34 0 0 1 0-3.3 2.33 2.33 0 0 1 1.24-.64l-.14-.14a2.34 2.34 0 0 1 0-3.3 2.3=
9 2.39 0 0 1 3.3 0l.14.14a2.33 2.33 0 0 1 3.95-1.24l.09.09c.09-.42.29-.83.6=
2-1.16a2.34 2.34 0 0 1 3.3 0l3.38 3.39a2.17 2.17 0 0 1 1.27-.17c.54.08 1.03=
.35 1.45.76.1-.55.41-1.03.9-1.42a2.12 2.12 0 0 1 1.67-.4 2.8 2.8 0 0 1 1.85=
1.25l3.65 6.43c1.7 2.83 2.03 7.37-2.2 11.6zM13.22.48l-1.92.89 2.37 2.83-.4=
5-3.72zm8.48.88L19.78.5l-.44 3.7 2.36-2.84zM16.5 3.3L15.48 0h2.04L16.5 3.3z=
" fill-rule=3D"evenodd"></path></svg></div></a></span></div><div class=3D"s=
li lj lk ll mk ml mm mn mo mp"><div class=3D"ae mh lp"><h4 class=3D"as b a=
t au fj"><button class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl">2<s=
pan class=3D"s h g f mi mj"> </span></button><span class=3D"s h g f mi=
mj"></span></h4></div></div></div></span></div><div class=3D"s mq mr ms mt=
mu"></div><button class=3D"lc la bw"><div class=3D"ls n o ao"><div><div cl=
ass=3D"bn" role=3D"tooltip" aria-hidden=3D"false" aria-describedby=3D"1" ar=
ia-labelledby=3D"1"><span class=3D"mv s h g f mi mj"><svg width=3D"33" heig=
ht=3D"33" viewBox=3D"0 0 33 33" fill=3D"none" class=3D"r" aria-label=3D"res=
ponses"><path clip-rule=3D"evenodd" d=3D"M24.28 25.5l.32-.29c2.11-1.94 3.4-=
4.61 3.4-7.56C28 11.83 22.92 7 16.5 7S5 11.83 5 17.65s5.08 10.66 11.5 10.66=
c1.22 0 2.4-.18 3.5-.5l.5-.15.41.33a8.86 8.86 0 0 0 4.68 2.1 7.34 7.34 0 0 =
1-1.3-4.15v-.43zm1 .45c0 1.5.46 2.62 1.69 4.44.22.32.01.75-.38.75a9.69 9.69=
0 0 1-6.31-2.37c-1.2.35-2.46.54-3.78.54C9.6 29.3 4 24.09 4 17.65 4 11.22 9=
.6 6 16.5 6S29 11.22 29 17.65c0 3.25-1.42 6.18-3.72 8.3z"></path></svg></sp=
an><span class=3D"mw s me mf mg e d"><svg width=3D"25" height=3D"25" class=
=3D"r" aria-label=3D"responses"><path d=3D"M19.07 21.12a6.33 6.33 0 0 1-3.5=
3-1.1 7.8 7.8 0 0 1-.7-.52c-.77.21-1.57.32-2.38.32-4.67 0-8.46-3.5-8.46-7.8=
C4 7.7 7.79 4.2 12.46 4.2c4.66 0 8.46 3.5 8.46 7.8 0 2.06-.85 3.99-2.4 5.45=
a6.28 6.28 0 0 0 1.14 2.59c.15.21.17.48.06.7a.69.69 0 0 1-.62.38h-.03zm0-1v=
.5l.03-.5h-.03zm-3.92-1.64l.21.2a6.09 6.09 0 0 0 3.24 1.54 7.14 7.14 0 0 1-=
.83-1.84 5.15 5.15 0 0 1-.16-.75 2.4 2.4 0 0 1-.02-.29v-.23l.18-.15a6.6 6.6=
0 0 0 2.3-4.96c0-3.82-3.4-6.93-7.6-6.93-4.19 0-7.6 3.11-7.6 6.93 0 3.83 3.=
41 6.94 7.6 6.94.83 0 1.64-.12 2.41-.35l.28-.08z" fill-rule=3D"evenodd"></p=
ath></svg></span></div></div><div class=3D"s ae mx lu my lw mz ly na nb nc =
nd"></div></div></button></div><div class=3D"n o"><div class=3D"gc s"><div =
class=3D"bn" aria-hidden=3D"false"><button class=3D"dg dh br bs bt bu bv bw=
bx bd di dj by dk dl" aria-label=3D"Share Post"><svg width=3D"25" height=
=3D"25" class=3D"r"><g fill-rule=3D"evenodd"><path d=3D"M15.6 5a.42.42 0 0 =
0 .17-.3.42.42 0 0 0-.12-.33l-2.8-2.79a.5.5 0 0 0-.7 0l-2.8 2.8a.4.4 0 0 0-=
.1.32c0 .12.07.23.16.3h.02a.45.45 0 0 0 .57-.04l2-2V10c0 .28.23.5.5.5s.5-.2=
2.5-.5V2.93l2.02 2.02c.08.07.18.12.3.13.11.01.21-.02.3-.08v.01"></path><pat=
h d=3D"M18 7h-1.5a.5.5 0 0 0 0 1h1.6c.5 0 .9.4.9.9v10.2c0 .5-.4.9-.9.9H6.9a=
.9.9 0 0 1-.9-.9V8.9c0-.5.4-.9.9-.9h1.6a.5.5 0 0 0 .35-.15A.5.5 0 0 0 9 7.5=
a.5.5 0 0 0-.15-.35A.5.5 0 0 0 8.5 7H7a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h11a2 =
2 0 0 0 2-2V9a2 2 0 0 0-2-2"></path></g></svg></button></div></div><div cla=
ss=3D"ne s dm"><div class=3D"ge"><span><a href=3D"https://medium.com/m/sign=
in?actionUrl=3D%2F_%2Fbookmark%2Fp%2F9e333c8a01f3&operation=3Dregister&=
amp;redirect=3Dhttps%3A%2F%2Fmupati.medium.com%2Fadding-video-chat-to-your-=
laravel-app-9e333c8a01f3&source=3Dpost_actions_footer------------------=
--------bookmark_footer-----------" class=3D"dg dh br bs bt bu bv bw bx bd =
di dj by dk dl" rel=3D"noopener"><svg width=3D"25" height=3D"25" viewBox=3D=
"0 0 25 25"><path d=3D"M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.=
05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 =
0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5=
.16-3.67a.49.49 0 0 0-.68 0z" fill-rule=3D"evenodd"></path></svg></a></span=
></div></div></div></div></div><div class=3D"nf mc s"><ul class=3D"bw bx"><=
li class=3D"bn ng gd nh"><a href=3D"https://medium.com/tag/laravel" class=
=3D"as b ni nj bq nk nl bo s jf">Laravel</a></li><li class=3D"bn ng gd nh">=
<a href=3D"https://medium.com/tag/vuejs" class=3D"as b ni nj bq nk nl bo s =
jf">Vuejs</a></li><li class=3D"bn ng gd nh"><a href=3D"https://medium.com/t=
ag/webrtc" class=3D"as b ni nj bq nk nl bo s jf">WebRTC</a></li><li class=
=3D"bn ng gd nh"><a href=3D"https://medium.com/tag/video-chat" class=3D"as =
b ni nj bq nk nl bo s jf">Video Chat</a></li></ul></div><div class=3D"nm s"=
></div></div></div><div><div class=3D"n p"><div class=3D"ag ah ai aj ak el =
am w"><div class=3D"s nn no gb"></div></div></div><div class=3D"s gb"><div =
class=3D"np nq s nr"><div class=3D"n p"><div class=3D"ag ah ai aj ak el am =
w"><div class=3D"n o cc"><h2 class=3D"as kb ns nt nu nv nw nx ny nz oa ob o=
c od oe of og oh oi oj ok ol gz om on oo op oq fj"><a class=3D"dg dh br bs =
bt bu bv bw bx bd di dj by dk dl" rel=3D"noopener" href=3D"https://mupati.m=
edium.com/?source=3Dfollow_footer-------------------------------------">Mor=
e from Kofi Obrasi Ocran</a></h2><span><button class=3D"as b at au fj kj r =
ax kk kl km kn bd be bf ko kp kq bj bk bl bm bn bo">Follow</button></span><=
/div><div class=3D"gs or s"><h4 class=3D"as b at au bq">I'm Accra-based Sof=
tware Engineer delivering solutions to multiple client with Code. Frontend,=
Backend and Interested in AI</h4></div></div></div></div></div><div class=
=3D"os s nr gb"><div class=3D"n p"><div class=3D"gh gj gl ot ou ov am w"></=
div></div></div><div class=3D"s ow gb"><div class=3D"n p"><div class=3D"ag =
ah ai aj ak al am w"><div class=3D"ox oy s"><div class=3D"oz x pa oy s pb p=
c"><h2 class=3D"as kb pd pe nv pf pg nz ph pi od pj pk oh pl pm ol fj">More=
From Medium</h2></div><div class=3D"ch n ao cl pn po pp pq pr ps pt pu pv =
pw px py pz qa qb"><div class=3D"qc qd qe gi qf qg qh gk qi qj qk ql qm qn =
qo qp qq qr qs qt qu"><div class=3D"qv qw s"><div class=3D"w gy"><div class=
=3D"n cc"><div class=3D"s qx qy qz ra"><div class=3D"rb s"><h2 class=3D"as =
kb ns nt nv nw nx nz rc rd od re rf oh rg rh ol fj"><a href=3D"https://medi=
um.com/swlh/micro-frontend-using-web-components-e9faacfc101b?source=3Dpost_=
internal_links---------0----------------------------" rel=3D"noopener">Micr=
o-Frontend using Web Components</a></h2></div><div class=3D"o n"><div></div=
><div class=3D"w s"><div class=3D"n"><div style=3D"flex:1"><span class=3D"a=
s b at au fj"><div class=3D"ci n o ri"><span class=3D"as b ni au fj"><a hre=
f=3D"https://medium.com/@anjaliverma471?source=3Dpost_internal_links-------=
--0----------------------------" class=3D"dg dh br bs bt bu bv bw bx bd rj =
by dk dl" rel=3D"noopener">Anjali Verma</a><span> <!-- -->in<!-- --> <a hre=
f=3D"https://medium.com/swlh?source=3Dpost_internal_links---------0--------=
--------------------" class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" r=
el=3D"noopener">The Startup</a></span></span></div></span></div></div></div=
></div></div><div class=3D"fr gd s rk rl"><a href=3D"https://medium.com/swl=
h/micro-frontend-using-web-components-e9faacfc101b?source=3Dpost_internal_l=
inks---------0----------------------------" class=3D"dg dh br bs bt bu bv b=
w bx bd di dj by dk dl s" rel=3D"noopener"><div class=3D"hc s ae hd"><div c=
lass=3D"rm hf s"><div class=3D"sr ss ed dt dp gy w gz ha hb"><img class=3D"=
ed dt dp gy w hg hh hi" src=3D"https://miro.medium.com/max/60/1*rDToqSMaO3V=
YClHC6aoBcw.png?q=3D20" width=3D"70" height=3D"70" role=3D"presentation"></=
div><img class=3D"dq gx rn ro rp rq rr rs rt ru rv rw c" width=3D"70" heigh=
t=3D"70" role=3D"presentation"></div></div></a></div></div></div></div></di=
v><div class=3D"qc qd qe gi qf qg qh gk qi qj qk ql qm qn qo qp qq qr qs qt=
qu"><div class=3D"qv qw s"><div class=3D"w gy"><div class=3D"n cc"><div cl=
ass=3D"s qx qy qz ra"><div class=3D"rb s"><h2 class=3D"as kb ns nt nv nw nx=
nz rc rd od re rf oh rg rh ol fj"><a href=3D"https://medium.com/weekly-web=
tips/how-to-build-a-react-express-application-with-yarn-e9bebb403558?source=
=3Dpost_internal_links---------1----------------------------" rel=3D"noopen=
er">How to Build a React & Express Application with Yarn</a></h2></div>=
<div class=3D"o n"><div></div><div class=3D"w s"><div class=3D"n"><div styl=
e=3D"flex:1"><span class=3D"as b at au fj"><div class=3D"ci n o ri"><span c=
lass=3D"as b ni au fj"><a href=3D"https://medium.com/@codeses.yt?source=3Dp=
ost_internal_links---------1----------------------------" class=3D"dg dh br=
bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">Codeses</a><span> <!-- =
-->in<!-- --> <a href=3D"https://medium.com/weekly-webtips?source=3Dpost_in=
ternal_links---------1----------------------------" class=3D"dg dh br bs bt=
bu bv bw bx bd rj by dk dl" rel=3D"noopener">Weekly Webtips</a></span></sp=
an></div></span></div></div></div></div></div><div class=3D"fr gd s rk rl">=
<a href=3D"https://medium.com/weekly-webtips/how-to-build-a-react-express-a=
pplication-with-yarn-e9bebb403558?source=3Dpost_internal_links---------1---=
-------------------------" class=3D"dg dh br bs bt bu bv bw bx bd di dj by =
dk dl s" rel=3D"noopener"><div class=3D"hc s ae hd"><div class=3D"rm hf s">=
<div class=3D"sr ss ed dt dp gy w gz ha hb"><img class=3D"ed dt dp gy w hg =
hh hi" src=3D"https://miro.medium.com/max/60/0*pdOl6HayOT41N24g?q=3D20" wid=
th=3D"70" height=3D"70" role=3D"presentation"></div><img class=3D"dq gx rn =
ro rp rq rr rs rt ru rv rw c" width=3D"70" height=3D"70" role=3D"presentati=
on"></div></div></a></div></div></div></div></div><div class=3D"qc qd qe gi=
qf qg qh gk qi qj qk ql qm qn qo qp qq qr qs qt qu"><div class=3D"qv qw s"=
><div class=3D"w gy"><div class=3D"n cc"><div class=3D"s qx qy qz ra"><div =
class=3D"rb s"><h2 class=3D"as kb ns nt nv nw nx nz rc rd od re rf oh rg rh=
ol fj"><a href=3D"https://medium.com/javascript-in-plain-english/compress-=
express-responses-with-the-compression-middleware-e9d784065065?source=3Dpos=
t_internal_links---------2----------------------------" rel=3D"noopener">Co=
mpress Express.js Responses with the Compression Middleware</a></h2></div><=
div class=3D"o n"><div></div><div class=3D"w s"><div class=3D"n"><div style=
=3D"flex:1"><span class=3D"as b at au fj"><div class=3D"ci n o ri"><span cl=
ass=3D"as b ni au fj"><a href=3D"https://hohanga.medium.com/?source=3Dpost_=
internal_links---------2----------------------------" class=3D"dg dh br bs =
bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">John Au-Yeung</a><span> <!-=
- -->in<!-- --> <a href=3D"https://medium.com/javascript-in-plain-english?s=
ource=3Dpost_internal_links---------2----------------------------" class=3D=
"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">JavaScript In =
Plain English</a></span></span></div></span></div></div></div></div></div><=
div class=3D"fr gd s rk rl"><a href=3D"https://medium.com/javascript-in-pla=
in-english/compress-express-responses-with-the-compression-middleware-e9d78=
4065065?source=3Dpost_internal_links---------2----------------------------"=
class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl s" rel=3D"noopener">=
<div class=3D"hc s ae hd"><div class=3D"rm hf s"><div class=3D"sr ss ed dt =
dp gy w gz ha hb"><img class=3D"ed dt dp gy w hg hh hi" src=3D"https://miro=
.medium.com/max/60/0*_XNPVTKz6iO2GWAQ?q=3D20" width=3D"70" height=3D"70" ro=
le=3D"presentation"></div><img class=3D"dq gx rn ro rp rq rr rs rt ru rv rw=
c" width=3D"70" height=3D"70" role=3D"presentation"></div></div></a></div>=
</div></div></div></div><div class=3D"qc qd qe gi qf qg qh gk qi qj qk ql q=
m qn qo qp qq qr qs qt qu"><div class=3D"qv qw s"><div class=3D"w gy"><div =
class=3D"n cc"><div class=3D"s qx qy qz ra"><div class=3D"rb s"><h2 class=
=3D"as kb ns nt nv nw nx nz rc rd od re rf oh rg rh ol fj"><a href=3D"https=
://medium.com/madhash/javascript-devs-are-making-100k-a-year-ea2910f3a808?s=
ource=3Dpost_internal_links---------3----------------------------" rel=3D"n=
oopener">JavaScript Devs Are Making Over $100,000 a Year</a></h2></div><div=
class=3D"o n"><div></div><div class=3D"w s"><div class=3D"n"><div style=3D=
"flex:1"><span class=3D"as b at au fj"><div class=3D"ci n o ri"><span class=
=3D"as b ni au fj"><a href=3D"https://medium.com/@PurpleGreenLemon?source=
=3Dpost_internal_links---------3----------------------------" class=3D"dg d=
h br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">Aphinya Dechalert</=
a><span> <!-- -->in<!-- --> <a href=3D"https://medium.com/madhash?source=3D=
post_internal_links---------3----------------------------" class=3D"dg dh b=
r bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">mad<hashmap></a>=
</span></span></div></span></div></div></div></div></div><div class=3D"fr g=
d s rk rl"><a href=3D"https://medium.com/madhash/javascript-devs-are-making=
-100k-a-year-ea2910f3a808?source=3Dpost_internal_links---------3-----------=
-----------------" class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl s"=
rel=3D"noopener"><div class=3D"hc s ae hd"><div class=3D"rm hf s"><div cla=
ss=3D"sr ss ed dt dp gy w gz ha hb"><img class=3D"ed dt dp gy w hg hh hi" s=
rc=3D"https://miro.medium.com/max/60/1*ch3ONOcE_qMChYiaZV3ZFw.jpeg?q=3D20" =
width=3D"70" height=3D"70" role=3D"presentation"></div><img class=3D"dq gx =
rn ro rp rq rr rs rt ru rv rw c" width=3D"70" height=3D"70" role=3D"present=
ation"></div></div></a></div></div></div></div></div><div class=3D"qc qd qe=
gi qf qg qh gk qi qj qk ql qm qn qo qp qq qr qs qt qu"><div class=3D"qv qw=
s"><div class=3D"w gy"><div class=3D"n cc"><div class=3D"s qx qy qz ra"><d=
iv class=3D"rb s"><h2 class=3D"as kb ns nt nv nw nx nz rc rd od re rf oh rg=
rh ol fj"><a href=3D"https://medium.com/swlh/server-side-authentication-wi=
th-nextjs-and-nestjs-part-1-the-basics-ea92323680e3?source=3Dpost_internal_=
links---------4----------------------------" rel=3D"noopener">Server-Side A=
uthentication With NextJS and NestJS=E2=80=8A=E2=80=94=E2=80=8APart 1: The =
Basics</a></h2></div><div class=3D"o n"><div></div><div class=3D"w s"><div =
class=3D"n"><div style=3D"flex:1"><span class=3D"as b at au fj"><div class=
=3D"ci n o ri"><span class=3D"as b ni au fj"><a href=3D"https://jhlabs.medi=
um.com/?source=3Dpost_internal_links---------4----------------------------"=
class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">Johan=
nes Herrmann</a><span> <!-- -->in<!-- --> <a href=3D"https://medium.com/swl=
h?source=3Dpost_internal_links---------4----------------------------" class=
=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">The Startup=
</a></span></span></div></span></div></div></div></div></div><div class=3D"=
fr gd s rk rl"><a href=3D"https://medium.com/swlh/server-side-authenticatio=
n-with-nextjs-and-nestjs-part-1-the-basics-ea92323680e3?source=3Dpost_inter=
nal_links---------4----------------------------" class=3D"dg dh br bs bt bu=
bv bw bx bd di dj by dk dl s" rel=3D"noopener"><div class=3D"hc s ae hd"><=
div class=3D"rm hf s"><div class=3D"sr ss ed dt dp gy w gz ha hb"><img clas=
s=3D"ed dt dp gy w hg hh hi" src=3D"https://miro.medium.com/max/60/1*v89LGR=
Bm9fPHQwCKnSaZvA.jpeg?q=3D20" width=3D"70" height=3D"70" role=3D"presentati=
on"></div><img class=3D"dq gx rn ro rp rq rr rs rt ru rv rw c" width=3D"70"=
height=3D"70" role=3D"presentation"></div></div></a></div></div></div></di=
v></div><div class=3D"qc qd qe gi qf qg qh gk qi qj qk ql qm qn qo qp qq qr=
qs qt qu"><div class=3D"qv qw s"><div class=3D"w gy"><div class=3D"n cc"><=
div class=3D"s qx qy qz ra"><div class=3D"rb s"><h2 class=3D"as kb ns nt nv=
nw nx nz rc rd od re rf oh rg rh ol fj"><a href=3D"https://medium.com/bett=
er-programming/how-to-use-react-hook-form-with-ionic-react-components-eaa44=
26d8a2d?source=3Dpost_internal_links---------5----------------------------"=
rel=3D"noopener">How to Use the React Hook Form With Ionic React Component=
s</a></h2></div><div class=3D"o n"><div></div><div class=3D"w s"><div class=
=3D"n"><div style=3D"flex:1"><span class=3D"as b at au fj"><div class=3D"ci=
n o ri"><span class=3D"as b ni au fj"><a href=3D"https://c-innovative.medi=
um.com/?source=3Dpost_internal_links---------5----------------------------"=
class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">Clear=
ly Innovative</a><span> <!-- -->in<!-- --> <a href=3D"https://medium.com/be=
tter-programming?source=3Dpost_internal_links---------5--------------------=
--------" class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopen=
er">Better Programming</a></span></span></div></span></div></div></div></di=
v></div><div class=3D"fr gd s rk rl"><a href=3D"https://medium.com/better-p=
rogramming/how-to-use-react-hook-form-with-ionic-react-components-eaa4426d8=
a2d?source=3Dpost_internal_links---------5----------------------------" cla=
ss=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl s" rel=3D"noopener"><div=
class=3D"hc s ae hd"><div class=3D"rm hf s"><div class=3D"sr ss ed dt dp g=
y w gz ha hb"><img class=3D"ed dt dp gy w hg hh hi" src=3D"https://miro.med=
ium.com/max/60/1*2pbsPGZ3rpCFFDHBgNHFBg.png?q=3D20" width=3D"70" height=3D"=
70" role=3D"presentation"></div><img class=3D"dq gx rn ro rp rq rr rs rt ru=
rv rw c" width=3D"70" height=3D"70" role=3D"presentation"></div></div></a>=
</div></div></div></div></div><div class=3D"qc qd qe gi qf qg qh gk qi qj q=
k ql qm qn qo qp qq qr qs qt qu"><div class=3D"qv qw s"><div class=3D"w gy"=
><div class=3D"n cc"><div class=3D"s qx qy qz ra"><div class=3D"rb s"><h2 c=
lass=3D"as kb ns nt nv nw nx nz rc rd od re rf oh rg rh ol fj"><a href=3D"h=
ttps://medium.com/better-programming/why-would-you-use-async-generators-eab=
bd24c7ae6?source=3Dpost_internal_links---------6---------------------------=
-" rel=3D"noopener">Why would you use async generators?</a></h2></div><div =
class=3D"o n"><div></div><div class=3D"w s"><div class=3D"n"><div style=3D"=
flex:1"><span class=3D"as b at au fj"><div class=3D"ci n o ri"><span class=
=3D"as b ni au fj"><a href=3D"https://medium.com/@korzio?source=3Dpost_inte=
rnal_links---------6----------------------------" class=3D"dg dh br bs bt b=
u bv bw bx bd rj by dk dl" rel=3D"noopener">Alex Korzhikov</a><span> <!-- -=
->in<!-- --> <a href=3D"https://medium.com/better-programming?source=3Dpost=
_internal_links---------6----------------------------" class=3D"dg dh br bs=
bt bu bv bw bx bd rj by dk dl" rel=3D"noopener">Better Programming</a></sp=
an></span></div></span></div></div></div></div></div><div class=3D"fr gd s =
rk rl"><a href=3D"https://medium.com/better-programming/why-would-you-use-a=
sync-generators-eabbd24c7ae6?source=3Dpost_internal_links---------6--------=
--------------------" class=3D"dg dh br bs bt bu bv bw bx bd di dj by dk dl=
s" rel=3D"noopener"><div class=3D"hc s ae hd"><div class=3D"rm hf s"><div =
class=3D"sr ss ed dt dp gy w gz ha hb"><img class=3D"ed dt dp gy w hg hh hi=
" src=3D"https://miro.medium.com/max/60/1*b6gAV8FckLGDCeeCAnDwcQ.png?q=3D20=
" width=3D"70" height=3D"70" role=3D"presentation"></div><img class=3D"dq g=
x rn ro rp rq rr rs rt ru rv rw c" width=3D"70" height=3D"70" role=3D"prese=
ntation"></div></div></a></div></div></div></div></div><div class=3D"qc qd =
qe gi qf qg qh gk qi qj qk ql qm qn qo qp qq qr qs qt qu"><div class=3D"qv =
qw s"><div class=3D"w gy"><div class=3D"n cc"><div class=3D"s qx qy qz ra">=
<div class=3D"rb s"><h2 class=3D"as kb ns nt nv nw nx nz rc rd od re rf oh =
rg rh ol fj"><a href=3D"https://medium.com/swlh/javascript-concepts-we-shou=
ld-learn-to-master-react-eabf4cd99c0?source=3Dpost_internal_links---------7=
----------------------------" rel=3D"noopener">JavaScript Concepts We Shoul=
d Learn to Master React</a></h2></div><div class=3D"o n"><div></div><div cl=
ass=3D"w s"><div class=3D"n"><div style=3D"flex:1"><span class=3D"as b at a=
u fj"><div class=3D"ci n o ri"><span class=3D"as b ni au fj"><a href=3D"htt=
ps://hohanga.medium.com/?source=3Dpost_internal_links---------7------------=
----------------" class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=
=3D"noopener">John Au-Yeung</a><span> <!-- -->in<!-- --> <a href=3D"https:/=
/medium.com/swlh?source=3Dpost_internal_links---------7--------------------=
--------" class=3D"dg dh br bs bt bu bv bw bx bd rj by dk dl" rel=3D"noopen=
er">The Startup</a></span></span></div></span></div></div></div></div></div=
><div class=3D"fr gd s rk rl"><a href=3D"https://medium.com/swlh/javascript=
-concepts-we-should-learn-to-master-react-eabf4cd99c0?source=3Dpost_interna=
l_links---------7----------------------------" class=3D"dg dh br bs bt bu b=
v bw bx bd di dj by dk dl s" rel=3D"noopener"><div class=3D"hc s ae hd"><di=
v class=3D"rm hf s"><div class=3D"sr ss ed dt dp gy w gz ha hb"><img class=
=3D"ed dt dp gy w hg hh hi" src=3D"https://miro.medium.com/max/60/0*KHOOJ7I=
fz8jABrO1?q=3D20" width=3D"70" height=3D"70" role=3D"presentation"></div><i=
mg class=3D"dq gx rn ro rp rq rr rs rt ru rv rw c" width=3D"70" height=3D"7=
0" role=3D"presentation"></div></div></a></div></div></div></div></div></di=
v></div></div></div></div></div></div></div><div class=3D"rx s ry rz"><div =
class=3D"n p"><div class=3D"ag ah ai aj ak al am w"><div class=3D"n z"><div=
class=3D"n o cc"><a href=3D"https://medium.com/?source=3Dpost_page-----9e3=
33c8a01f3--------------------------------" aria-label=3D"Go to homepage" cl=
ass=3D"dg dh br bs bt bu bv bw bx bd sa sb by sc sd" rel=3D"noopener"><svg =
viewBox=3D"0 0 3940 610" class=3D"se sf"><path d=3D"M594.79 308.2c0 163.76-=
131.85 296.52-294.5 296.52S5.8 472 5.8 308.2 137.65 11.69 300.29 11.69s294.=
5 132.75 294.5 296.51M917.86 308.2c0 154.16-65.93 279.12-147.25 279.12s-147=
.25-125-147.25-279.12S689.29 29.08 770.61 29.08s147.25 125 147.25 279.12M10=
50 308.2c0 138.12-23.19 250.08-51.79 250.08s-51.79-112-51.79-250.08 23.19-2=
50.08 51.8-250.08S1050 170.09 1050 308.2M1862.77 37.4l.82-.18v-6.35h-167.48=
l-155.51 365.5-155.51-365.5h-180.48v6.35l.81.18c30.57 6.9 46.09 17.19 46.09=
54.3v434.45c0 37.11-15.58 47.4-46.15 54.3l-.81.18V587H1327v-6.35l-.81-.18c=
-30.57-6.9-46.09-17.19-46.09-54.3V116.9L1479.87 587h11.33l205.59-483.21V536=
.9c-2.62 29.31-18 38.36-45.68 44.61l-.82.19v6.3h213.3v-6.3l-.82-.19c-27.71-=
6.25-43.46-15.3-46.08-44.61l-.14-445.2h.14c0-37.11 15.52-47.4 46.08-54.3m97=
.43 287.8c3.49-78.06 31.52-134.4 78.56-135.37 14.51.24 26.68 5 36.14 14.16 =
20.1 19.51 29.55 60.28 28.09 121.21zm-2.11 22h250v-1.05c-.71-59.69-18-106.1=
2-51.34-138-28.82-27.55-71.49-42.71-116.31-42.71h-1c-23.26 0-51.79 5.64-72.=
09 15.86-23.11 10.7-43.49 26.7-60.45 47.7-27.3 33.83-43.84 79.55-47.86 130.=
93-.13 1.54-.24 3.08-.35 4.62s-.18 2.92-.25 4.39a332.64 332.64 0 0 0-.36 21=
.69C1860.79 507 1923.65 600 2035.3 600c98 0 155.07-71.64 169.3-167.8l-7.19-=
2.53c-25 51.68-69.9 83-121 79.18-69.76-5.22-123.2-75.95-118.35-161.63m532.6=
9 157.68c-8.2 19.45-25.31 30.15-48.24 30.15s-43.89-15.74-58.78-44.34c-16-30=
.7-24.42-74.1-24.42-125.51 0-107 33.28-176.21 84.79-176.21 21.57 0 38.55 10=
.7 46.65 29.37zm165.84 76.28c-30.57-7.23-46.09-18-46.09-57V5.28L2424.77 60v=
6.7l1.14-.09c25.62-2.07 43 1.47 53.09 10.79 7.9 7.3 11.75 18.5 11.75 34.26v=
71.14c-18.31-11.69-40.09-17.38-66.52-17.38-53.6 0-102.59 22.57-137.92 63.56=
-36.83 42.72-56.3 101.1-56.3 168.81C2230 518.72 2289.53 600 2378.13 600c51.=
83 0 93.53-28.4 112.62-76.3V588h166.65v-6.66zm159.29-505.33c0-37.76-28.47-6=
6.24-66.24-66.24-37.59 0-67 29.1-67 66.24s29.44 66.24 67 66.24c37.77 0 66.2=
4-28.48 66.24-66.24m43.84 505.33c-30.57-7.23-46.09-18-46.09-57h-.13V166.65l=
-166.66 47.85v6.5l1 .09c36.06 3.21 45.93 15.63 45.93 57.77V588h166.8v-6.66z=
m427.05 0c-30.57-7.23-46.09-18-46.09-57V166.65L3082 212.92v6.52l.94.1c29.48=
3.1 38 16.23 38 58.56v226c-9.83 19.45-28.27 31-50.61 31.78-36.23 0-56.18-2=
4.47-56.18-68.9V166.66l-166.66 47.85V221l1 .09c36.06 3.2 45.94 15.62 45.94 =
57.77v191.27a214.48 214.48 0 0 0 3.47 39.82l3 13.05c14.11 50.56 51.08 77 10=
9 77 49.06 0 92.06-30.37 111-77.89v66h166.66v-6.66zM3934.2 588v-6.67l-.81-.=
19c-33.17-7.65-46.09-22.07-46.09-51.43v-243.2c0-75.83-42.59-121.09-113.93-1=
21.09-52 0-95.85 30.05-112.73 76.86-13.41-49.6-52-76.86-109.06-76.86-50.12 =
0-89.4 26.45-106.25 71.13v-69.87l-166.66 45.89v6.54l1 .09c35.63 3.16 45.93 =
15.94 45.93 57V588h155.5v-6.66l-.82-.2c-26.46-6.22-35-17.56-35-46.66V255.72=
c7-16.35 21.11-35.72 49-35.72 34.64 0 52.2 24 52.2 71.28V588h155.54v-6.66l-=
.82-.2c-26.46-6.22-35-17.56-35-46.66v-248a160.45 160.45 0 0 0-2.2-27.68c7.4=
2-17.77 22.34-38.8 51.37-38.8 35.13 0 52.2 23.31 52.2 71.28V588z"></path></=
svg></a><h4 class=3D"as b at au sg"><div class=3D"v sh n cc si sj"><h4 clas=
s=3D"as b dd de sk"><a href=3D"https://medium.com/about?autoplay=3D1&so=
urce=3Dpost_page-----9e333c8a01f3--------------------------------" class=3D=
"dg dh br bs bt bu bv bw bx bd rj by sc sd" rel=3D"noopener">About</a></h4>=
<h4 class=3D"as b dd de sk"><a href=3D"https://help.medium.com/hc/en-us?sou=
rce=3Dpost_page-----9e333c8a01f3--------------------------------" class=3D"=
dg dh br bs bt bu bv bw bx bd rj by sc sd" rel=3D"noopener">Help</a></h4><h=
4 class=3D"as b dd de sk"><a href=3D"https://policy.medium.com/medium-terms=
-of-service-9db0094a1e0f?source=3Dpost_page-----9e333c8a01f3---------------=
-----------------" class=3D"dg dh br bs bt bu bv bw bx bd rj by sc sd" rel=
=3D"noopener">Legal</a></h4></div></h4></div><div class=3D"ab sl sm sj"><h4=
class=3D"as b dd de sg">Get the Medium app</h4></div><div class=3D"ab sl s=
n sj so"><div class=3D"ar s"><a href=3D"https://itunes.apple.com/app/medium=
-everyones-stories/id828256236?pt=3D698524&mt=3D8&ct=3Dpost_page&am=
p;source=3Dpost_page-----9e333c8a01f3--------------------------------" clas=
s=3D"dg dh br bs bt bu bv bw bx bd sa sb by sc sd" rel=3D"noopener nofollow=
"><img alt=3D"A button that says 'Download on the App Store', and if clicke=
d it will lead you to the iOS App store" class=3D"" src=3D"https://miro.med=
ium.com/max/270/1*Crl55Tm6yDNMoucPo1tvDg.png" width=3D"135" height=3D"41"><=
/a></div><div class=3D"s"><a href=3D"https://play.google.com/store/apps/det=
ails?id=3Dcom.medium.reader&source=3Dpost_page-----9e333c8a01f3--------=
------------------------" class=3D"dg dh br bs bt bu bv bw bx bd sa sb by s=
c sd" rel=3D"noopener nofollow"><img alt=3D"A button that says 'Get it on, =
Google Play', and if clicked it will lead you to the Google Play store" cla=
ss=3D"" src=3D"https://miro.medium.com/max/270/1*W_RAPQ62h0em559zluJLdQ.png=
" width=3D"135" height=3D"41"></a></div></div></div></div></div></div></div=
></div></div>