[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-ep-93-webrtc-voice-video-in-websocket-chat-all--*":3,"academy-blog-translations-39tpvv5bbcajwfa":84},{"data":4,"page":72,"perPage":72,"totalItems":72,"totalPages":72},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":78,"keywords":79,"locale":54,"published_at":80,"scheduled_at":13,"school_blog":76,"short_description":81,"slug":82,"status":74,"title":6,"updated":83,"updated_by":13,"views":77},"EP.93 Adding Voice or Video Communication Features in WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>In the modern era of online communication, voice and video chat are essential features for real-time applications. If you’ve already built a WebSocket-based chat system in Go, the next step to enrich user experience is to enable real-time audio and video communication using WebRTC for peer-to-peer streaming and WebSocket for signaling.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>This episode will guide you through the architecture, setup, and best practices for integrating WebRTC with WebSocket in your chat application.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🎯 Why Use WebRTC with WebSocket?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>WebRTC (Web Real-Time Communication) provides peer-to-peer, encrypted real-time audio and video streaming between browsers.\u003C\u002Fli>\u003Cli>WebSocket is used as the signaling channel to exchange the necessary metadata (SDP, ICE candidates) to establish the peer-to-peer connection.\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>Together, they enable:\u003C\u002Fp>\u003Cul>\u003Cli>✅ Low-latency voice and video communication\u003C\u002Fli>\u003Cli>✅ Bandwidth-efficient direct client-to-client streaming\u003C\u002Fli>\u003Cli>✅ Better scalability for multi-user chat rooms\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🧩 System Architecture Overview\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Col>\u003Cli>Client connects to the server via WebSocket for signaling.\u003C\u002Fli>\u003Cli>Clients exchange SDP and ICE candidates through the signaling channel.\u003C\u002Fli>\u003Cli>WebRTC establishes a direct peer-to-peer media stream between clients.\u003C\u002Fli>\u003Cli>WebSocket server handles user presence, signaling coordination, and fallback.\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch3>🔄 Signaling Flow:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext\">User A ---- WebSocket ----> Server ---- WebSocket ----> User B\n(SDP Offer \u002F ICE Candidate)         (SDP Answer \u002F ICE Candidate)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>🛠️ Sample Go Code – Signaling Handler\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func signalingHandler(w http.ResponseWriter, r *http.Request) {\n    conn, err := upgrader.Upgrade(w, r, nil)\n    if err != nil {\n        log.Println(\"Upgrade error:\", err)\n        return\n    }\n    defer conn.Close()\n\n    for {\n        _, msg, err := conn.ReadMessage()\n        if err != nil {\n            log.Println(\"Read error:\", err)\n            break\n        }\n\n        var signal SignalMessage\n        if err := json.Unmarshal(msg, &signal); err == nil {\n            \u002F\u002F Forward signaling message to the target user\n            forwardToUser(signal.TargetID, msg)\n        }\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>\u003Ccode inline=\"\">SignalMessage\u003C\u002Fcode> struct example:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">type SignalMessage struct {\n    Type     string `json:\"type\"`      \u002F\u002F offer, answer, candidate\n    SenderID string `json:\"sender_id\"`\n    TargetID string `json:\"target_id\"`\n    Payload  string `json:\"payload\"`   \u002F\u002F SDP or ICE data\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>🎥 Media Streaming with WebRTC (Client-side Overview)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">const peer = new RTCPeerConnection(config);\n\n\u002F\u002F Send media stream to peer\nnavigator.mediaDevices.getUserMedia({ video: true, audio: true })\n  .then(stream => {\n    localVideo.srcObject = stream;\n    stream.getTracks().forEach(track => peer.addTrack(track, stream));\n  });\n\n\u002F\u002F Send SDP offer via WebSocket\npeer.createOffer().then(offer => {\n  peer.setLocalDescription(offer);\n  socket.send(JSON.stringify({\n    type: \"offer\",\n    target_id: \"user_b\",\n    sender_id: \"user_a\",\n    payload: JSON.stringify(offer)\n  }));\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>📶 Bandwidth Optimization Tips\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>🎧 Use Opus codec for voice, and VP8\u002FVP9 or H.264 for video\u003C\u002Fli>\u003Cli>📐 Adjust bitrate and resolution dynamically based on network conditions\u003C\u002Fli>\u003Cli>📡 Use simulcast or adaptive bitrate (ABR) in multi-user rooms\u003C\u002Fli>\u003Cli>📉 Minimize signaling overhead by compressing messages and using short-lived sessions\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>✅ Best Practices\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>🔒 Use \u003Ccode inline=\"\">HTTPS\u003C\u002Fcode>\u002F\u003Ccode inline=\"\">WSS\u003C\u002Fcode> to protect all signaling and WebSocket communication\u003Cbr>🧱 Implement TURN servers for NAT traversal and fallback\u003Cbr>🎮 Add UI controls for \u003Ccode inline=\"\">mute\u002Funmute\u003C\u002Fcode>, \u003Ccode inline=\"\">camera on\u002Foff\u003C\u002Fcode>, and track user events in real time\u003Cbr>🧪 Test with varied devices, browsers, and network conditions\u003Cbr>📦 Use a mesh or SFU architecture (e.g., \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fmediasoup.org\u002F\">mediasoup\u003C\u002Fa>, \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fjanus.conf.meetecho.com\u002F\">Janus\u003C\u002Fa>) for large-scale video rooms\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 Final Thoughts\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>By integrating WebRTC for media and WebSocket for signaling, your Go-powered WebSocket Chat system can support low-latency, secure, and scalable voice and video calls — a game-changer for collaborative apps, virtual meetings, and online learning platforms.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔥 Challenge Before the Next Episode\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>🎯 Try building a simple WebSocket + WebRTC voice call feature:\u003C\u002Fp>\u003Cul>\u003Cli>Build a WebSocket signaling server in Go\u003C\u002Fli>\u003Cli>Let users create a video room and join by link\u003C\u002Fli>\u003Cli>Exchange SDP offers\u002Fanswers and ICE candidates\u003C\u002Fli>\u003Cli>Test NAT traversal with STUN\u002FTURN\u003C\u002Fli>\u003Cli>Add controls for mic\u002Fcam toggle\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Then share your demo with your dev team and optimize based on feedback!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔜 Next EP.94:\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>\"Building a WebSocket Server That Works with Microservices\"\u003C\u002Fstrong>\u003Cbr>Learn how to scale your WebSocket system by integrating with service meshes, message brokers, and microservice architectures.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"498\" data-end=\"834\">\u003Cstrong>Read more\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp data-start=\"498\" data-end=\"834\">\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-start=\"498\" data-end=\"834\">\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp data-start=\"498\" data-end=\"834\">\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fen\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Eps That Will Make You a Pro Tailwind CSS Overnight\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\">\u003Cstrong>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🔴 YouTube: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUC2eI2RxcA2zbTqZyHyWIfRg\">\u003Cstrong>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\">\u003Cstrong>https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fen\">\u003Cstrong>https:\u002F\u002Fwww.superdevacademy.com\u002Fen\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>\u003C\u002Fp>","158_11zon_cz2hd218ih.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fxyr9jvn993qwoxn\u002F158_11zon_cz2hd218ih.webp","2026-03-04 08:46:27.040Z","",{"keywords":15,"locale":48,"school_blog":58},[16,23,28,33,38,43],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:32:51.346Z","tmzmy6jyz1n35rr","Go Programming","2026-04-10 16:08:01.434Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:46:12.615Z","ex0f61ubqeln8vw","Real-Time Communication","2026-04-10 16:13:10.105Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:45:04.918Z","2oi71a8zf6vf68l","Video Call","2026-04-10 16:12:53.751Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:45:05.158Z","836if8oqwpocqe3","Voice Chat","2026-04-10 16:12:53.881Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:45:05.836Z","37t2tvjs3vvty3x","WebRTC","2026-04-10 16:12:54.088Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"code":49,"collectionId":50,"collectionName":51,"created":52,"flag":53,"id":54,"is_default":55,"label":56,"updated":57},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"category":59,"collectionId":60,"collectionName":61,"expand":62,"id":76,"views":77},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":63},{"blogIds":64,"collectionId":65,"collectionName":66,"created":67,"created_by":13,"id":59,"image":68,"image_alt":13,"image_path":69,"label":70,"name":71,"priority":72,"publish_at":73,"scheduled_at":13,"status":74,"updated":75,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw.png",{"en":71,"th":71},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","39tpvv5bbcajwfa",206,"xyr9jvn993qwoxn",[20,25,30,35,40,45],"2025-09-24 01:41:45.860Z","Learn how to integrate real-time voice and video features into your WebSocket Chat using WebRTC — for smooth, secure, and low-bandwidth communication.","ep-93-webrtc-voice-video-in-websocket-chat","2026-04-25 02:48:04.073Z",{"en":82}]