ສ້າງລະບົບ VideoCall ໄວ້ໃຊ້ເອງແບບTypescriptດ້ວຍ React ແລະ Tokbox

ສະບາຍດີ ພໍ່ແມ່ພິນ້ອງມິດຮັກແຟນເພງ

ມື້ນີ້ເຮົາຊິມີສ້າງລະບົບ VideoCall ນໍາກັນ ເຊີ່ງມັນບໍ່ຍາກແບບທີ່ເຮົາຄິດເລີຍ ໃຊ້ເວລາບໍ່ຮອດຊົ່ວໂມງກໍສາມາດໃຊ້ໄດ້ແທ້ແລ້ວ

ສີ່ງທີ່ເຮົາຕ້ອງກຽມ

1. React Environment ທີ່ກຽມພ້ອມສໍາຫຼັບພັດທະນາreact
2. account ຂອງTokbox

ກ່ອນອື່ນຈະມາອະທິບາຍກ່ອນວ່າtokboxແມ່ນຫຍັງ?

toxboxແມ່ນລະບົບເອົາໄວ້ຮັບ-ສົ່ງສັນຍານພາບແລະສຽງເຊີ່ງມີ api ໃຫ້ເຮົາໃຊ້ ໂດຍເຮົາບໍ່ຕ້ອງມາສຶກສາລະບົບnetworkໄວ້ສົ່ງສັນຍານເອງ ມີແຕ່ເອີ້ນມາໃຊ້ເລີຍກໍຈົບໃນໂຕ ເຊີ່ງຫຼັກການຄ້າຍໆ ການເຮັດແອັບແຜນທີ່ ທີ່ເຮົາບໍ່ຕ້ອງສົ່ງດາວທຽມໄປບັນທຶກຮູບມາເປັນແຜນທີ່ເອງ ມີແຕ່ເອົາapiຂອງgoogle mapມາໃຊ້ກໍຈົບ ທັງໝົດນີ້ຕ້ອງຂອບໃຈແນວຄິດເລື່ອງ api ທີ່ເຮັດໃຫ້ທຸກຢ່າງງ່າຍຂື້ນກວ່າທີ່ມັນຄວນຈະເປັນຫຼາຍ.

ໂດຍFlowຂອງລະບົບເຮົາຈະເປັນປະມານນີ້

ອາທິບາຍຂັ້ນຕອນ

1. ເຮົາຈະເລີ່ມຕາມຮູບທາງເທິງ ເຮົາຊິມາສ້າງໄອດີຂອງTokbox

ໂດຍເຂົ້າໄປລີ້ງນີ້ https://tokbox.com/account/user/signup

ຕື່ມຂໍ້ມູນໃຫ້ຄົບ

ກົດcreate new project ຈາກນັ້ນເລືອກ ສ້າງແບບ opentok api

ຈາກນັ້ນໃສ່ຊື່ໂຄງການແລະເລືອກລະຫັດເປັນvp8 ແລ້ວກົດ create

ຈາກນັ້ນເຮົາຈະໄດ້ api key ແລະ secret ມາໃຫ້ເກັບໄວ້ດີໆ ເພາະຈະໄດ້ໃຊ້ໃນຂັ້ນຕອນຕໍ່ໄປ

ຖືວ່າຈົບຂັ້ນຕອນທີ 1 ໄປຕໍ່ຂັ້ນຕອນຕໍ່ໄປ

2. ສ້າງ session ຂອງtokbox

ບໍ່ຟ້າວງົງໆ ເຮົາກໍາລັງອະທິບາຍວ່າ session ແມ່ນຫຍັງ.

session ຂອງ tokbox ເປັນຄ້າຍໆຫ້ອງ ທີຈິງບໍ່ຄ້າຍດອກໃຫ້ຈິນຕະນາການວ່າມັນເປັນຫ້ອງເລີຍ

ສໍາຫຼັບtokboxກ່ອນຈະvideocallກັນໄດ້ຕ້ອງສ້າງຫ້ອງສໍາຫຼັບການລົມກັນເທື່ອນັ້ນກ່ອນ ຈາກນັ້ນເອົາkeyຂອງຫ້ອງນັ້ນໄປໃຫ້ຄົນສອງຄົນເພື່ອໃຫ້ເຂົ້າມາໃນຫ້ອງໄດ້

ໂດຍໃນບົດຄວາມນີ້ເຮົາຈະສ້າງserverນ້ອຍໆmvp ຊື່ວ່າ server.jsຂື້ນມາເພື່ອສ້າງຫ້ອງແລະແຈກຈ່າຍkey ຂອງຫ້ອງໃຫ້react ທີ່ຈະມາຮ້ອງຂໍໃນອະນາຄົດ

server.js

ຊິເລີ່ມອະທິບາຍຈາກແຖວທີ 11 ເຊີ່ງແມ່ນເອົາapikey ກັບsecretມາຈາກໜ້າໂປເຈັກທີ່ສ້າງຢູ່toxboxກີ້ນີ້ມາໃສ່

ແຖວທີ 12–15 ແມ່ນບອກວ່າຖ້າເລີ່ມຕົ້ນrun serverແລ້ວໃຫ້sessionຫຼືວ່າຫ້ອງມາອັນໜຶ່ງ ແລ້ວsave session idໄວ້ໃນໂຕປ່ຽນທີ່ຊື່ sessionId

ແຖວທີ 17–23 ແມ່ນຖ້າມີການຮ້ອງຂໍຂໍ້ມູນແບບget ເຂົ້າມາທາງpath”/” ແມ່ນໃຫ້ສົ່ງຄ່າ apiKey,sessionId,token ກັບໄປ ເຊີ່ງຄ່າສາມໂຕນີ້ແມ່ນເອົາໄປເພື່ອຈະໄປເຂົ້າຮ່ວມsession(ຫ້ອງ) ທີ່ເຮົາສ້າງມາທາງເທິງ

ແຖວ 24–26 ແມ່ນໃຫ້server runເທິງport ທີ່ກໍານົດໄວ້ທາງເທິງເຊີ່ງໂຕນີ້ແມ່ນ3000

3. ສ້າງUI ຂອງເພື່ອໃຫ້ລະບົບ video call ເຮົາເລີ່ມຕົ້ນ

ເຂົ້າມາເຮົາຈະສ້າງ ເວັບແບບແບບຮຽບງ່າຍດ້ວຍ react-hook ແລະໃຊ້ພາສາ Typescript ເປັນພື້ນຖານ

App.tsx

App.css

ໂດຍຜົນລັບທີ່ໄດ້ກໍຈະປະມານນີ້

Ui

ຈາກນັ້ນກໍໃຫ້ຕິດຕັ້ງpackage ທີ່ຊື່ react-use-opentok ຈາກ

pjchender/react-use-opentok

ແລ້ວcopy code ຕົວຢ່າງມາໃຊ້ຕາມຮູບທາງລຸ່ມເລີຍ ກໍຈະໄດ້ປະມານນີ້

App.tsx

ຮອດຈຸດນີ້ການນໍາເຂົ້າແມ່ນໝົດລະ ເຮົາຊິມາຂຽນlogicໃຫ້ມັນ video callຫາກັນໄດ້

App.tsx

ຈະເຫັນວ່າທີ່ເພີ່ມມາແມ່ນແຖວທີ 34 ຫາແຖວທີ 64

ເຮົາຊິມາອະທິບາຍວ່າມັນແມ່ນຫຍັງ

ເລີ່ມຈາກເຂົ້າມາໃນuseEffect ມັນຊິໄປກວດວ່າ isSessionConnected ມັນເປັນtrueແລ້ວຫຼືບໍ່ ຢູ່ແຖວ 47 ຖ້າເປັນtrueແປວ່າມີການເຊື່ອມຕໍ່ກັບsessionແລ້ວໃຫ້ເລີ່ມຕົ້ນເປີດກ້ອງຂອງໂຕເອງຫຼືpublishເລີຍ ແຕ່ຖ້າມັນຍັງບໍ່ເປັນtrue ໃຫ້ໄປ ເອີ້ນfunctionຊື່ວ່າ fetchTokboxData ມາ

ເຊີ່ງມັນຈະໄປຮ້ອງຂໍຂໍ້ມູນຈາກserverທີ່ເຮົາຂຽນກີ້ນີ້ແລ້ວເອົາຂໍ້ມູນໄປrunໃນfunction ທີ່ຊື່ວ່າ initSessionAndConnectTokbox ເຊີ່ງໃນຫັ້ນມັນຊິເອົາຂໍ້ມູນໄປຂໍເຂົ້າsession ຢູ່ຫັ້ນ ເຊີ່ງທີ່ວ່າມານິແມ່ນຢູ່ໃນແຖວ 34 ຫາແຖວທີ 45

ຫຼັງຈາກນັ້ນແຖວທີ່ 56 ຫາ 64 ກໍຈະເຮັດວຽກ ໂດຍການຖ້າຟັງstream ຫຼືກໍຄືຈໍານວນຂອງຄົນໃນຫ້ອງນັ້ນ ຖ້າມີຫຼາຍກວ່າໜຶ່ງຄົນແປວ່າມີຄົນເຂົ້າມາກໍຈະເຮັດ subscribe ເຂົ້າກັບstreamໂຕນັ້ນ ກໍຄືເອົາກ້ອງຂອງຜູ້ນັ້ນມາໂຊໃນelement ທີ່ຊື່ guestVideo ນັ້ນເອງ ເຊີ່ງຮອດຈຸດນີ້ຖ້າບໍ່ມີຫຍັງຜິດພາດ ທັງສອງຄົນກໍຈະເຫັນໜ້າກັນສົນທະນາກັນໄດ້ເປັນການຈົບຂະບວນການ

Demo

ຂອບໃຈສໍາຫຼັບຄວາມສົນໃຈ

ໃຜສົນໃຈcodeສາມາດໄປເບີ່ງທັງໝົດໄດ້ຢູ່ນິ

cometdigital/cometcall

ແລະວິດີໂອເດໂມສໍາຫຼັບໃຜສົນໃຈ