Tự code ứng dụng Video Call như Zoom chỉ với 120 dòng code

Gần đây nhu cầu video call, họp online khá nhiều. Hôm nay, mình sẽ chỉ các bạn cách tự code ra ứng dụng video tương tự như Zoom. Ứng dụng này có đủ các tính năng như tạo room, join room, share màn hình nhưng chỉ cần 120 dòng Code, nhờ sử dụng Stringee API nha.
Ứng dụng demo tại: stg-vid-call.glitch.me.
Source Code: glitch.com/edit/#!/stg-vid-call
Code xong đem ra gọi gấu luôn, bạn nào không có gấu vẫn test được.
1. Đăng kí account Stringee và tạo project mới - bit.ly/3jD3aYi
2. Clone dự án mẫu - glitch.com/edit/#!/stringee-t...
3. Xem document - github.com/stringeecom/web-sd...
4. Code theo hướng dẫn trên clip
5. Các bạn muốn tích hợp tính năng này trên di động có thể ghé channel của Stringee ha: / @stringeevn
Timestamp
00:00 - Giới thiệu về ứng dụng video call và demo
01:28 - Tạo account và project trên Stringee
02:55 - Copy dự án mẫu và bắt đầu code trên Glitch.com
03:55 - Tìm hiểu cách Stringee hoạt động, luồng chương trình
05:26 - Code chức năng tạo Room meeting
08:14 - Code login với userToken
10:33 - Quay và hiển thị video từ webcam
12:45 - Lắng nghe event và hiển thị video
15:45 - Sửa UI cho đẹp, thêm RoomID và URL
18:33 - Thêm chức năng share màn hình
20:08 - Demo chương trình bằng cách gọi cho gấu
21:00 - Tổng kết, giới thiệu lại Stringee
Nhớ subscribe cho mình nhe: bit.ly/codedaotube
Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer - lập trình viên thứ thiệt.
Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 VÀ T6 hàng tuần nha!
Ghé thăm mình tại:
Blog: toidicodedao.com/
Fanpage: / toidicodedao
#stringee #zoom_clone #code_cung_code_dao

Chuyện kể rằng, ngày xửa ngày xưa, có 1 thanh niên có 1 con gấu lớn và 1 con gấu nhỏ. Một ngày nọ, gấu lớn đòi giữ hết acc Zoom Facebook, Zalo của thanh niên. Vốn là lập trình viên, anh thanh niên không hề sợ hãi, viết 120 dòng code trong 20 phút làm app gọi cho gấu nhỏ. Mọi chuyện đều êm đẹp cho tới ngày thanh niên làm clip hướng dẫn anh em viết app video call đăng lên KZbin. Chuyện sau đó, nghe nói thanh niên đang viết bài này thì bị gấu lớn đập đầu vào bàn phím sml fjepwi jrnwpapxkgnktrlpaosjcngntrlppalcmngtntjeolalalfkfp?3

[@it1734]

Anh tôi :))

[@freeflowstatee]

Cạo râu hitle đi anh, em nhìn em ngứa quá 🤣🤣🤣

[@saomaket1]

cho m góp ý xíu, sau này mỗi đoạn lệnh code, Code dạo nên cho cái \\ công dụng của nó làm gì vì nhiều ng mới như mình sẽ thấy khó hiểu hoặc ko hiểu đoạn code đó chức năng gì.

[@lililil100]

anh làm thêm clip về : biến fb thành con bot đi anh

[@xuhie137]

anh ơi, anh làm clip để hướng dẫn xóa cái wup.exe ở máy tính

[@MrMaxBeatboxer]

Giỏi quá bạn Hoàng ơi , tuy mình làm bên mạng máy tính nhưng rất hay theo dõi các video về Dev của Hoàng . Cuốn hút và muốn mở mang 1 lĩnh vực mới ở tuổi 25 ^^

[@Everyonecanplaypiano]

Thấy bài là vô liền Hoàng ơi :D mình cũng dân dev web

[@nguyenminhhieu2287]

kênh nghe tiếng việt cho người mới bắt đầu

[@MinhNguyen-rc8lc]

Cảm ơn anh đã làm những clip thú vị và bổ ích như vầy . Chúc anh mạnh khỏe.

[@techcodesmartly2547]

Xem video bác cho có động lực code :)) chứ lâu cũng nãn

[@manhhoangg]

em là sv cntt năm nhất thấy cuốn thực sự

[@vanphuc9793]

Cảm ơn anh

[@triaotrong1063]

Pro quá a ơi

[@blinkkeebs]

tks anh, để em gắn vào project clone slack của em xem ntn :D

[@forexx7870]

Hay quá

[@triettruong8200]

Ủng hộ API Việt

[@light3933]

Quả râu đc đó ông

[@nikolaipham5121]

xem phải để x0.75 mới tiêu hóa được...bắn rap truất quá...vid sau anh tăng tốc độ rap lên nha

[@mmo_thinkbig]

Hello anh code dạo đẹp trai nhưng vẫn kém em một chút

[@huynhminhanh8950]

♥

[@hoangvacban]

đc anh ơi

[@o-wess3259]

Nguồn học chính của em là KZbin mong anh làm nhiều dự án hay như này ạ, ủng hộ anh 😁

[@MrKiemsi]

A Hoàng ơi, có cách nào mình vừa stream nhưng vẫn có thanh thời gian như youtube và có thể lùi thời gian lại để xem stream 5-10p trước không ạ? E xin cám ơn

[@tika5495]

Hay v~

[@TuanNguyen-np4bn]

Anh ơi, anh review 1 số trung tâm học onl chất lượng được không ạ. Hiện tại em đang muốn học tư duy lập trình sau đó học tiếp back end. Anh trả lời giúp em với ạ. Em cảm ơn anh

[@binusegoogle]

Quá nhanh và quá nguy hiểm. Ai nghĩ đây là kênh tutorial thì bỏ đi nhé

[@TN-mr3yy]

cao râu ông ơi :D

[@hoangtoan5921]

Ngành mạng máy tính có ổn k a và cần những gì ạ

[@vangia7124]

anh ơi, em dùng vue/cli em npm install thư viện stringee nó k có cái hàm stringeevideo, mà dùng cdn thì bị lỗi, phải làm sao vậy anh ? Mong anh reply

[@Nguyenthanhloc]

A hướng dẫn làm code trắc nghiệm đi ạ. E cảm ơn

[@hungvi5298]

Thanks

[@huynhnam2327]

Rất mê code, xem nhiều video của a Hoàng. Nhưng ngành mình học và làm chả liên quan gì đến công nghệ thông tin cả... Tuy xem k hiểu nhưng vẫn thích xem

[@nhochamvui6070]

Hé mấy cái clone app này coi hay

[@ngocanhbui316]

Có cách nào share màn hình, share cả âm thanh không a?

[@xiaocatcat]

Cảm giác mấy ông code gà gà sẽ thất nghiệp mất. Hahaha

[@moonnight8403]

Hello ah

[@phamhuynhtien1993]

A hoàng Idol cho e làm đệ a vs. Tới bao h e vs đạt cảnh giới như a 🥰🥰

[@Android-ol8gc]

tạo nội bộ trong cùng wifi mới dùng đc thì làm sao ạ?

[@hoannguyen1934]

A có tài liệu cho lập trình android làm callvideo dùng webrtc ko ạ

[@quanghuy.1993]

Anh nghĩ sao về đồng tiền ảo ví dụ như bitcoin trong tương lai và nghề hot nhất trong tương lai có phải là quản trị mạng .Mong anh làm 1 vlog nói về 2 vấn đề này .

Quản trị mạng h chưa hot và sau này cũng ko hot đâu e :))

[@nhunguyenhoang528]

anh zai ra clip về lt android đi anh ,e mới tìm hiểu mà đuối quá

[@nguyenphucminh8363]

Anh có thể làm video hướng dẫn tích hợp thanh toán online qua Ngân lượng hay paypal được không ạ ?

À nếu nhiều bạn quan tâm a sẽ làm nhé

[@tonny2024]

Hoàng sinh năm mấy, và làm được mấy năm rồi mà giỏi thế

[@hoangvan9353]

Anh ơi anh có cách viết code để lấy phụ đề trên gitsub k anh ơi

[@huonghip3698]

cao rau cho dep trai anh oi :v

[@trantranhanhbao7680]

Hello A ^^

[@luuduytoan3819]

api này chỉ xài được đúng 1 tháng à anh ơi =))

[@tuanvu.12thg2]

Anh ơi vậy làm sao để thêm chat vào trang web của mình ạ

[@oanhieu2593]

các ac cho e hỏi mình làm tính năng trong hộp bình luân hiện dấu ... khi có ai đó đang bình luận thì mình sử dụng thuộc tính hay script như thế nào ạ

[@buiminh5458]

Anh ơi có nền tảng nào giúp mình xây dựng được 1 tòa nhà 3D ko anh

[@SheronMusicOfficial]

Adu vjp

[@dungvuongdinhtrung1977]

Làm code đặt xe như grap được không ạ. đặt 3 điểm đến đón 3 điểm đi.

[@taptlifestartuppodcast6899]

Có thể code Python để làm như thế dc không nhỉ?

[@tongkienphi2644]

kinh, tốc độ nói ngang ngửa bài Côn Đồ Trên Con Đò =)))

[@tuanluu8103]

bạn này nói nhanh quá , nghe chưa kịp nảy số :D

[@hannguyeninh3546]

Dạ chào anh, anh cho em hỏi làm sao để mình lấy được luồng video stream đấy ra được ạ. Ví dụ như mỗi 1s em lấy luồng video này rồi gửi liên tục sang python để xử lý trong model AI. Em cảm ơn anh ạ

[@manhkienton3403]

Anh ơi em cũng đang làm về một project tương tự, anh có thể cho em hỏi anh giải quyết được chưa ạ

[@duyminh1860]

anh ơi sao code ko chạy nữa vậy anh tới cái bước tạo id cho phòng r á mà em bấm thử creat room thì nó ko ra id như của anh mong anh rep em

[@daotran2637]

mình search doc ko thấy có class StringeeVideo nhỉ?

[@chungvan8792]

Mọi người cho hỏi cũng video call, mà bên app desktop có lib hay framework nào hỗ trợ mạnh ko ạ ? Java càng tốt ạ !

[@phucminh9372]

Anh ơi, em có thử nhưng khi người khác vào nhưng chỉ có 1 người thôi là sao ạ, Mong anh trả lời

[@hoanglamtranvan9799]

anh ơi sao em chạy chương trình mà nó không thấy cam trong khi nó vẫn báo là đang join và cam đang chạy

[@mobifonexuantuan9471]

Bạn hưóng dẫn cho soft xác minh video call ekyc mobifone ảnh quá màn hình đt đi bạn

[@nornnorn2783]

làm sao để share màn hình có âm thanh vậy anh ?

[@hidro27-10]

anh nên đi thi rap Việt

[@minhhuynh362]

Ae chi mình hỏi, khi call có bị người khác thấy đc ko nhỉ?

[@binhnguyentruong1549]

Cho mình hỏi là dùng ứng dụng này có đòi hỏi cấu hình serser cao ko ?

Server nhà người ta lo nên mình không cần server em.

[@TripleT96]

Ông này trước khi làm coder ổng làm rapper fast flow à

[@thananhtuan3891]

Này viết theo a nhưng ở trên visual code dùng angular đc ko vậy anh.. em cảm ơn

Được em, nhưng phải tự dựng https ở local nhé

[@anthonytran7002]

Hay. Phạm Huy Hoàng ông TRÙM viết Codes. Viết Codes như viết văn.

[@_blackdaiin1637]

Đm anh Ráp nhanh quá . Nhưng mà video hay lắm anh

[@hoale1285]

Anh ơi, bình thường anh nói cũng nhanh vậy hả? nhanh dữ hèn.

[@TungNguyenThanh-nq1ie]

Học code 10 ngón đã :))

[@gamez1029]

code này là dùng ngôn ngữ gì vậy a

[@ngotrongphong1760]

anh Hoàng ơi lập trình nên dùng hệ điều hành Windows hay Linux ạ ?

Cái nào cũng đc e

[@tranthuatofficial1968]

Để quả râu nhìn ghê vl , cạo đi a ơi

[@nltmtool8700]

room id lấy ở đâu thế anh

[@phamuc1010]

Hiện tại anh đang làm ở công ty nào ạ. Và có phải ở vietnam ko??

Ko em

[@duycuongnguyen1203]

Bn có thể cạo râu ko. Nhìn ức chế qá :))) Vô coi thôi chứ pt Pascal là cùng :)))

[@saomaket1]

cho m góp ý xíu, sau này mỗi đoạn lệnh code, Code dạo nên cho cái \\ công dụng của nó làm gì vì nhiều ng mới như mình sẽ thấy khó hiểu hoặc ko hiểu đoạn code đó chức năng gì.

Cảm ơn góp ý của bạn nhé

[@onlineentertainmentsunnysp2091]

nhưng mình zô bằng điện thoại thì k load được ban ơi

[@polikaodika]

tầm 2-3 tháng trước mình còn dùng với iphone để test được mà bây giờ không được nữa rồi, có ai giúp mình với đc ko :(

[@dungnguyentien2622]

Comment gần đầu

[@Green-kj7wx]

Hóng anh làm về three.js!

À nếu nhiều bạn quan tâm a sẽ làm nhé

[@phucnguyennhu2528]

anh Hoàng lừa em nhé, em nhập lại url i xì trên video mà không được huhu =))

[@nshuyenmuoi3812]

Anh biết code auto tài xỉu không anh

[@tungpham842]

Em sinh năm cuối ở hải phòng. Nhận thấy môi trường cho coder ít, nên em tính sang năm lên HN. Em đang phân vân giữa 2 lựa chọn Unity và Android (unity thì e có sản phẩm riêng). Theo anh e nên chọn cái nào? Em thấy Unity các công ty tuyển thực tập fresher nhiều nhưng Reddit mọi người bảo theo lập trình game là ý tưởng tệ.

A ko làm game nên ko rõ e

[@notendervn]

Làm app giống OBS đi anh

À nếu nhiều bạn quan tâm a sẽ làm nhé

[@quangquang4588]

tui nghĩ ông nên đi thi rapviet đảm bảo vào thẳng vòng cuối luôn

[@phucphan7130]

Bạn ấy quá nhiều thông tin mà muốn truyền tải trong thời gian ngắn! Nể thật, nghe cứ như bị hack speed!

[@nguyenbi5953]

anh ơi cho em hỏi ngôn ngữ anh code trong clip này là gì vậy ạ ?

A dùng JavaScript em

[@nguyenbi5953]

@ vâng em cảm ơn anh

[@Everyonecanplaypiano]

Chrome trên iOS sao không work Hoàng nhỉ, nó không hiện ra được video element. Còn bên Safari trên iOS, khi join room thì work mà chỉ có 1 frame hình xài quài (nó đứng hình ấy), nhưng khi nhìn lên trên Chrome PC thì vẫn thấy cái thằng video element của iOS hoạt động bình thường.

Check lại code video element phải có `playisinline` bạn nhé. Đoạn mình sửa hàm addVideo lúc 19:40 ấy. css-tricks.com/what-does-playsinline-mean-in-web-video/ Còn chrome ios thì mình ko xài nên ko rõ =))

[@Everyonecanplaypiano]

@ chrome vẫn ko đc :D, cảm ơn Hoàng nhe

[@vietangvan2116]

ông rap thế ai theo cho kịp

[@36_nguyenthanhnam41]

Tốc độ 0.75 mới theo dc a ạ :((

[@MoonLight-fe9qf]

ko chơi võ lâm nữa hay sao lai fake người ta thế ông :)))

[@ongHuynhVan]

Cái này mình làm cái share screen. Ai vào là xem được luôn ko cần phải join room hay tạo room được không??

Ko bạn

[@tranvanquang9821]

Đem cái này đi lòe bọn bạn mà chả đứa nào nào nó tin 🤣

Do tụi nó gà nha :))

[@hdsmsmart]

ông nội này cứ 5s edit 1 lần @@

[@levaighetscode6173]

Anh đi thi rap việt đi =)) vừa xem kênh anh lần đầu anh nói anh quá chỉnh lại 0.5 luôn =))

nghe 1 hồi quen phải bật lên 1.5 nghe mới đã nha e =))

[@levaighetscode6173]

@ bật 1.5 thì tắt mọe luôn cho r nghe j nữa =))))

[@Minhbee18]

đề nghị em bỏ râu đi nha, giống hitler quá :))))

[@kiemtienonline8160]

Hd dame wed đi ah

[@phucwall121]

Team xem phần code chả hiểu gì hết :)))) 👇👇👇 😸😸😸😸😸

[@cuongvochi6851]

haiz

[@gamelauchootontiengame5923]

bạn có thể code giúp mình bộ tool reg facebook ko ạ?

Ko

[@gialinhngole7834]

Anh Hoàng ơi có bản nào dùng Free không anh

Cái này đăng kí 1 acc là có 1 lượng credit free đủ dùng 1 thời gian đó e =))

[@gialinhngole7834]

@ Dạ em muốn build cho khách hàng 1 web RTC mà khách hàng không muốn dùng bản có phí thì phải làm sao anh

Thì tự build từ đầu e

[@haiangnguyen6763]

anh chỉ cách làm game bầu cua đi ạ

A có làm vlog hướng dẫn rồi đó e

[@thanhnhatapchai8909]

Code song tạo app call với pồ nhí