วิธีใช้ hooks สำหรับ webrtc ใน React?

WebRTC หรือการสื่อสารเวลาจริงของเว็บได้ปฏิวัติวิธีที่เราสื่อสารบนเว็บ มันช่วยให้การแบ่งปันเสียงวิดีโอและการแบ่งปันข้อมูลระหว่างเบราว์เซอร์โดยไม่จำเป็นต้องใช้ปลั๊กอิน ในทางกลับกัน React เป็นไลบรารี JavaScript ยอดนิยมสำหรับการสร้างส่วนต่อประสานผู้ใช้ เมื่อคุณรวมเทคโนโลยีที่ทรงพลังทั้งสองนี้มันสามารถนำไปสู่แอพพลิเคชั่นที่ยอดเยี่ยมบางอย่างเช่นแอพการประชุมทางวิดีโอแพลตฟอร์มสตรีมมิ่งสดและอื่น ๆ และนี่คือที่ที่ตะขอมีประโยชน์มาก! ในฐานะผู้จัดหาตะขอฉันจะแบ่งปันวิธีการใช้ hooks สำหรับ webrtc ใน React

การทำความเข้าใจพื้นฐานของ WEBRTC

ก่อนที่เราจะดำดิ่งลงไปในการใช้ตะขอให้ไปดูพื้นฐานของ WEBRTC อย่างรวดเร็ว WebRTC ส่วนใหญ่ประกอบด้วยสามส่วนประกอบสำคัญ: MediaStream (สำหรับการเข้าถึงกล้องของผู้ใช้และไมโครโฟน), RTCPeerConnection (สำหรับการสร้างการเชื่อมต่อระหว่างเพื่อน) และ RTCDatachannel (สำหรับการส่งและรับข้อมูล)

MediaStream ช่วยให้คุณสามารถเข้าถึงอุปกรณ์สื่อของผู้ใช้ ตัวอย่างเช่นคุณสามารถใช้เพื่อรับวิดีโอและเสียงจากเว็บแคมและไมโครโฟนของผู้ใช้ RTCPeerConnection รับผิดชอบในการสร้างการเชื่อมต่อโดยตรงระหว่างสองเพื่อน มันจัดการกับสิ่งที่เครือข่ายระดับต่ำทั้งหมดเช่นการเจรจาต่อรองการเชื่อมต่อจัดการผู้สมัครน้ำแข็งและสร้างความมั่นใจในการถ่ายโอนข้อมูลที่เชื่อถือได้ RTCDatachannel ใช้สำหรับการส่งและรับข้อมูลโดยพลการเช่นข้อความหรือไฟล์

ทำไมต้องใช้ hooks สำหรับ webrtc ใน React?

Hooks in React เป็นเกม - ผู้เปลี่ยน พวกเขาให้คุณใช้สถานะและคุณสมบัติการตอบสนองอื่น ๆ โดยไม่ต้องเขียนชั้นเรียน เมื่อพูดถึง WebRTC ใน React ตะขอสามารถทำให้รหัสง่ายขึ้นทำให้เป็นโมดูลมากขึ้นและทดสอบได้ง่ายขึ้น ด้วย hooks คุณสามารถจัดการสถานะที่ซับซ้อนของการเชื่อมต่อ WEBRTC เช่นสถานะของการเชื่อมต่อเพียร์สตรีมสื่อและช่องข้อมูลในวิธีที่มีการจัดระเบียบมากขึ้น

การตั้งค่าโครงการ React

สิ่งแรกสิ่งแรกคุณต้องตั้งค่าโครงการ React ใหม่ คุณสามารถใช้แอพ Create React เพื่อบูตโปรเจ็กต์ใหม่ได้อย่างรวดเร็ว เปิดเทอร์มินัลของคุณและเรียกใช้คำสั่งต่อไปนี้:

NPX Create - React - App WebRTC - HOOK - ตัวอย่าง CD WEBRTC - HOOK - ตัวอย่าง

สิ่งนี้จะสร้างโครงการ React ใหม่ในไดเรกทอรีที่เรียกว่าwebrtc - hook - ตัวอย่างและนำทางคุณไปยังไดเรกทอรีนั้น

การสร้างตะขอที่กำหนดเองสำหรับ webrtc

ทีนี้มาเริ่มสร้างตะขอที่กำหนดเองสำหรับ WEBRTC เบ็ดแรกที่เราจะสร้างคือการเข้าถึงสตรีมสื่อของผู้ใช้

นำเข้า {useState, useeffect} from'React '; const usemediastream = () => {const [สตรีม, setstream] = useState (null); const [ข้อผิดพลาด, setError] = useState (null); useeffect (() => {const getMediAstream = async () => {ลอง {const NewsTream = รอ Navigator.mediadevices.getusermedia ({วิดีโอ: จริง, เสียง: true}); setstream (newstream);} catch (err) {seterror (error); ส่งคืน {สตรีม, ข้อผิดพลาด}; - การส่งออกค่าเริ่มต้น usemediastream;

ในเบ็ดนี้เราใช้ไฟล์USSTATEขอเพื่อจัดการสตรีมสื่อและข้อผิดพลาดที่อาจเกิดขึ้น ที่useeffectHook ใช้เพื่อเรียกใช้รหัสที่ร้องขอสตรีมสื่อของผู้ใช้ มันจะทำงานเพียงครั้งเดียวเมื่อส่วนประกอบติดตั้งเนื่องจากอาร์เรย์การพึ่งพาที่ว่างเปล่า

ถัดไปเรามาสร้างเบ็ดสำหรับการจัดการ RTCPeerConnection

นำเข้า {useState, useeffect} from'React '; const usepeerConnection = () => {const [peerconnection, setpeerConnection] = useState (null); const [ข้อผิดพลาด, setError] = useState (null); useEffect (() => {createPeerConnection = () => {ลอง {const newPeerConnection = ใหม่ rtcpeerConnection (); setPeerConnection (newPeerConnection);} catch (err) {setError (err); return {peerconnection, ข้อผิดพลาด}; - การส่งออกค่าเริ่มต้น USEPeerConnection;

เบ็ดนี้สร้าง RTCPeerConnection ใหม่เมื่อส่วนประกอบติดตั้งและจัดการสถานะของการเชื่อมต่อเพียร์และข้อผิดพลาดใด ๆ ที่อาจเกิดขึ้น

ใช้ตะขอในส่วนประกอบ

ตอนนี้เรามีตะขอที่กำหนดเองของเราลองใช้มันในองค์ประกอบที่ตอบสนอง

นำเข้าปฏิกิริยาจาก 'react'; นำเข้า usemediastream จาก './USEMEDIASTREAM'; นำเข้า USEPeerConnection จาก './UsePeerConnection'; const webrtCcomponent = () => {const {สตรีม, ข้อผิดพลาด: streamerror} = usemediastream (); const {peerconnection, ข้อผิดพลาด: peererror} = usepeerConnection (); if (streamerror) {return <div> การเข้าถึง Media Stream: {streamerror.message} </div>; } if (peererror) {return <div> ข้อผิดพลาดการสร้างการเชื่อมต่อเพียร์: {peererror.message} </div>; } if (สตรีม) {return (<div> <video srcobject = {stream} autoplay playsInline /> </div>); } return <div> การโหลด ... </div>; - การส่งออกค่าเริ่มต้น webrtccomponent;

ในองค์ประกอบนี้เรานำเข้าและใช้ตะขอที่กำหนดเองของเรา เราแสดงข้อความแสดงข้อผิดพลาดหากมีปัญหาในการเข้าถึงสตรีมสื่อหรือสร้างการเชื่อมต่อเพียร์ หากสตรีมสื่อพร้อมใช้งานเราจะแสดงองค์ประกอบวิดีโอด้วยสตรีมเป็นแหล่งที่มา

การใช้งานขั้นสูง: ช่องข้อมูลที่มีตะขอ

ลองทำตามขั้นตอนต่อไปและสร้างเบ็ดสำหรับการจัดการ RTCDatachannel

นำเข้า {useState, useeffect} from'React '; const ischedatachannel = (peerconnection) => {const [dataChannel, setDatachannel] = useState (null); const [ข้อความ, setMessage] = useState (''); useeffect (() => {ถ้า (peerconnection) {const newdatachannel = peerconnection.createdataChannel ('แชท'); setDatachannel (newDatachannel); newDatachannel.onMessage = (เหตุการณ์) => {setMessage (Event.data);}; ส่งคืน {datachannel, ข้อความ}; - การส่งออกค่าเริ่มต้นใช้งาน asedatachannel;

เบ็ดนี้สร้างช่องข้อมูลใหม่ในการเชื่อมต่อเพียร์ที่กำหนดและจัดการข้อความที่ได้รับในช่องนั้น

การรวมตะขอของเราในตัวอย่างที่สมบูรณ์ยิ่งขึ้น

ลองใช้ตะขอทั้งหมดของเราในตัวอย่างที่สมบูรณ์ยิ่งขึ้นซึ่งเราสามารถส่งและรับข้อความผ่านช่องข้อมูล

Import React, {useState} From'React '; นำเข้า usemediastream จาก './USEMEDIASTREAM'; นำเข้า USEPeerConnection จาก './UsePeerConnection'; นำเข้าฯลาจาก './usedatachannel'; const webrtcfullexample = () => {const {สตรีม, ข้อผิดพลาด: streamerror} = usemediastream (); const {peerconnection, ข้อผิดพลาด: peererror} = usepeerConnection (); const {datachannel, ข้อความ} = isidatachannel (peerconnection); const [inputMessage, setInputMessage] = useState (''); const sendMessage = () => {if (dataChannel && datachannel.readyState === 'เปิด') {datachannel.send (inputMessage); SetInputMessage (''); - if (streamerror) {return <div> การเข้าถึง Media Stream: {streamerror.message} </div>; } if (peererror) {return <div> ข้อผิดพลาดการสร้างการเชื่อมต่อเพียร์: {peererror.message} </div>; } return (<div> {stream && <video srcobject = {stream} autoplay playsInline />} <div> ข้อความที่ได้รับ: {message} < /div> <อินพุต type = "text" value = {inputMessage} onChange = {(e) => setInputMessage ข้อความ </button> </div>); - ส่งออกค่าเริ่มต้น webrtcfullexample;

ในตัวอย่างนี้เรามีองค์ประกอบวิดีโอที่แสดงสตรีมสื่อของผู้ใช้ส่วนที่จะแสดงข้อความที่ได้รับฟิลด์อินพุตเพื่อพิมพ์ข้อความและปุ่มเพื่อส่ง

ที่ตะขอของเราสามารถเข้ากันได้

ในฐานะซัพพลายเออร์ตะขอเรานำเสนอตะขอที่หลากหลายซึ่งสามารถใช้ในโครงการ WEBRTC ต่างๆ ตัวอย่างเช่นหากคุณกำลังสร้างแอปพลิเคชัน WEBRTC ที่ซับซ้อนมากขึ้นซึ่งเกี่ยวข้องกับส่วนประกอบการติดตั้งบนท่อสี่เหลี่ยมคุณอาจสนใจในของเราเบ็ดสำหรับท่อสี่เหลี่ยม- มันเป็นตะขอคุณภาพสูงที่สามารถใช้เพื่อแนบส่วนประกอบในการตั้งค่า WEBRTC ของคุณอย่างปลอดภัย

หากคุณกำลังทำงานในโครงการ WEBRTC สำหรับแอพพลิเคชั่นที่เกี่ยวข้องกับซุปเปอร์มาร์เก็ตเช่นระบบการจัดการสินค้าคงคลังสดบนชั้นวางซุปเปอร์มาร์เก็ตเบ็ดชั้นวางซุปเปอร์มาร์เก็ตอาจเป็นแบบที่สมบูรณ์แบบ ตะขอเหล่านี้ได้รับการออกแบบให้ทนทานและติดตั้งง่ายเพื่อให้มั่นใจว่าส่วนประกอบ WEBRTC ของคุณจะอยู่ในสถานที่

ห่อและเอื้อมมือออกไป

การใช้ hooks สำหรับ webrtc ใน React สามารถทำให้รหัสของคุณง่ายขึ้นอย่างมากและทำให้แอปพลิเคชัน WEBRTC ของคุณบำรุงรักษาได้มากขึ้น ไม่ว่าคุณจะเป็นผู้เริ่มต้นหรือนักพัฒนาที่มีประสบการณ์ตะขอที่กำหนดเองเหล่านี้สามารถช่วยคุณสร้างโครงการ WEBRTC ที่น่าทึ่ง

หากคุณสนใจเบ็ดสำหรับโครงการ WEBRTC ของคุณเรายินดีที่จะแชทกับคุณ ติดต่อเราเพื่อหารือเกี่ยวกับข้อกำหนดเฉพาะของคุณและดูว่าตะขอของเราสามารถเข้ากับแผนการพัฒนาของคุณได้อย่างไร เรามาที่นี่เพื่อสนับสนุนคุณทุกขั้นตอน

การอ้างอิง

• MDN Web Docs - WebRTC
• ตอบสนองเอกสารอย่างเป็นทางการ