{"id":99508,"date":"2025-02-28T21:18:43","date_gmt":"2025-02-28T17:48:43","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/"},"modified":"2025-02-28T21:18:43","modified_gmt":"2025-02-28T17:48:43","slug":"build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/","title":{"rendered":"\u06cc\u06a9 \u06a9\u0644\u0648\u0646 \u0645\u0644\u0627\u0642\u0627\u062a Google \u0631\u0627 \u0628\u0627 Strapi 5 \u0648 Next.js \u0628\u0633\u0627\u0632\u06cc\u062f &#8211; \u0642\u0633\u0645\u062a 2"},"content":{"rendered":"<div data-article-id=\"2303653\" id=\"article-body\">\n<p>\u0628\u0647 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634 \u06a9\u0644\u0648\u0646 Google Meet \u0645\u0627 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 WeBRTC \u0648 Socket.io \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0645\u0631\u062c\u0639 \u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0637\u0631\u062d \u06a9\u0644\u06cc \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0648\u0628\u0644\u0627\u06af \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%86%D8%B5%D8%A8_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7\" >\u0646\u0635\u0628 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B3%D8%B1%D9%88%D8%B1_WebSocket\" >\u062a\u0646\u0638\u06cc\u0645 \u0633\u0631\u0648\u0631 WebSocket<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D9%87%D9%85%D8%B3%D8%A7%D9%84%D8%A7%D9%86_%D8%AF%D8%B1_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C_%D8%AF%D8%B1_Strapi_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 Strapi \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#Socketio_Server_%D8%B1%D8%A7_%D8%A8%D8%A7_Strapi_Initialize_%DA%A9%D9%86%DB%8C%D8%AF\" >Socket.io Server \u0631\u0627 \u0628\u0627 Strapi Initialize \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D9%84%D8%B3%D9%87_%D9%88%DB%8C%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\" >\u0627\u062c\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0644\u0633\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%AA%D8%A7%D9%82_%DA%A9%D9%86%D9%81%D8%B1%D8%A7%D9%86%D8%B3_%D9%88%DB%8C%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\" >\u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0627\u062a\u0627\u0642 \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D8%B5%D9%81%D8%AD%D9%87\" >\u0627\u062c\u0631\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DA%86%D8%AA_%D8%AF%D8%B1_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%86%D8%AA_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0624\u0644\u0641\u0647 \u0686\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%DA%86%D8%AA_%D8%B1%D8%A7_%D8%A8%D9%87_%DA%A9%D9%84%DB%8C%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C%D8%A7%D9%86_%D9%85%D8%AA%D8%B5%D9%84_%D8%A8%D8%A7_Strapi_%D9%BE%D8%AE%D8%B4_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0686\u062a \u0631\u0627 \u0628\u0647 \u06a9\u0644\u06cc\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u062a\u0635\u0644 \u0628\u0627 Strapi \u067e\u062e\u0634 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%86%D8%AA_%D8%B1%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0645\u0624\u0644\u0641\u0647 \u0686\u062a \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%AC%D9%84%D8%B3%D8%A7%D8%AA\" >\u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062c\u0644\u0633\u0627\u062a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_Controls_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0624\u0644\u0641\u0647 Controls \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%B1%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0645\u0624\u0644\u0641\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%AC%D9%84%D8%B3%D9%87\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%84%DB%8C%D8%B3%D8%AA_%D8%B4%D8%B1%DA%A9%D8%AA_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86\" >\u0627\u062c\u0631\u0627\u06cc \u0644\u06cc\u0633\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D9%88_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\" >\u0627\u062f\u063a\u0627\u0645 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0647\u0627\u06cc\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%DA%A9%D8%AF_%D9%85%D9%86%D8%A8%D8%B9_GitHub\" >\u06a9\u062f \u0645\u0646\u0628\u0639 GitHub<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/build-a-google-meet-clone-with-strapi-5-and-nextjs-part-2-4p86\/#%D9%BE%D8%A7%DB%8C%D8%A7%D9%86_%D8%B3%D8%B1%DB%8C_%D9%88_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u067e\u0627\u06cc\u0627\u0646 \u0633\u0631\u06cc \u0648 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  \u0646\u0635\u0628 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u0627\u0632 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a 1 \u0627\u0632 \u0622\u0646\u062c\u0627 \u062e\u0627\u0631\u062c \u0634\u062f\u06cc\u0645 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 Webrtc \u0648 Socket.io \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062c\u0644\u0648\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>socket.io-client @types\/webrtc simple-peer @types\/simple-peer\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0631\u0648\u0698\u0647 \u062c\u0644\u0648\u06cc \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0631\u062f\u06cc\u0645:<\/p>\n<ul>\n<li>\n<p>Socket.io-Client: \u0645\u0634\u062a\u0631\u06cc \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0631\u0646\u0627\u0645\u0647 Realtime<\/li>\n<li>\n<p>@Types\/Webrtc: \u062a\u0639\u0627\u0631\u06cc\u0641 TypeScript \u0628\u0631\u0627\u06cc Webrtc.<\/li>\n<li>\n<p>Simple-Peer: \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u0648\u0628\u0627\u06cc\u0644 \u06af\u0631\u0648\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u06a9\u062b\u0631 \u0686\u0647\u0627\u0631 \u0646\u0641\u0631 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062a\u0645\u0627\u0633 \u0635\u0648\u062a\u06cc \u0648 \u062a\u0635\u0648\u06cc\u0631\u06cc WEBRTC \u0628\u0647 \u0647\u0645\u062a\u0627 \u0628\u0647 \u0647\u0645\u062a\u0627 \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0634\u062e\u0635\u06cc\u062a \u0628\u06cc \u0646\u0638\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062a\u0642\u0627\u0628\u0644 \u0627\u062b\u0628\u0627\u062a \u06a9\u0646\u0646\u062f.<\/li>\n<li>\n<p>@Types\/Simple-Peer: \u062a\u0639\u0627\u0631\u06cc\u0641 TypeScript \u0628\u0631\u0627\u06cc Peer Simple.<\/li>\n<\/ul>\n<p>\u0628\u0631\u0627\u06cc Backend Strapi \u060c \u0628\u0633\u062a\u0647 Socket.io \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd<\/span> ..\/google-meet-clone-backend\nnpm <span class=\"nb\">install <\/span>socket.io\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B3%D8%B1%D9%88%D8%B1_WebSocket\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u0633\u0631\u0648\u0631 WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0648\u0644 \u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>socket.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0631 <code>config<\/code> \u067e\u0648\u0634\u0647 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"k\">default <\/span><span class=\"p\">({<\/span> <span class=\"nx\">env<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">enabled<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">config<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">port<\/span><span class=\"p\">:<\/span> <span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nf\">int<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">SOCKET_PORT<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1337<\/span><span class=\"p\">),<\/span>\n    <span class=\"na\">cors<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">origin<\/span><span class=\"p\">:<\/span> <span class=\"nf\">env<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">SOCKET_CORS_ORIGIN<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">*<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\n      <span class=\"na\">methods<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">GET<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">POST<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>socket<\/code> \u062f\u0631 <code>api<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc API \u0633\u0648\u06a9\u062a. \u062f\u0631 <code>api\/socket<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>services<\/code> \u0648 \u0627\u0644\u0641 <code>socket.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0631 <code>services<\/code> \u067e\u0648\u0634\u0647 <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B4%D9%86%D9%88%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D9%87%D9%85%D8%B3%D8%A7%D9%84%D8%A7%D9%86_%D8%AF%D8%B1_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C_%D8%AF%D8%B1_Strapi_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 Strapi \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0637\u0639\u0647 \u0647\u0627\u06cc \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>api\/socket\/services\/socket.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u0627\u062a\u0635\u0627\u0644 \u0633\u0648\u06a9\u062a \u060c \u0648 \u0627\u06cc\u062c\u0627\u062f \u0647\u0645\u0647 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc \u0628\u0639\u062f\u06cc \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Core<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@strapi\/strapi<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">MeetingParticipant<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">socketId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">username<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Meeting<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">participants<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Map<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">MeetingParticipant<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">lastActivity<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default <\/span><span class=\"p\">({<\/span> <span class=\"nx\">strapi<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">strapi<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Core<\/span><span class=\"p\">.<\/span><span class=\"nx\">Strapi<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Store active meetings and their participants<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">activeMeetings<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nb\">Map<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Meeting<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"c1\">\/\/ Cleanup inactive meetings periodically<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">cleanupInterval<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">now<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">();<\/span>\n      <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meetingId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">now<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">lastActivity<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">1000<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">60<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">60<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"c1\">\/\/ 1 hour timeout<\/span>\n          <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"mi\">1000<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">60<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">15<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">initialize<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">eventHub<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">socket.ready<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">io<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">strapi<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nx\">io<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">io<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Socket.IO is not initialized<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"nx\">io<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">connection<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"na\">socket<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">handshake<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">;<\/span>\n          <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span>\n            <span class=\"s2\">`Client connected - Socket: <\/span><span class=\"p\">${<\/span><span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"s2\">, User: <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">, Meeting: <\/span><span class=\"p\">${<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n          <span class=\"p\">);<\/span>\n\n          <span class=\"c1\">\/\/ Initialize meeting if it doesn't exist<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">has<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n              <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Map<\/span><span class=\"p\">(),<\/span>\n              <span class=\"na\">lastActivity<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">(),<\/span>\n            <span class=\"p\">});<\/span>\n          <span class=\"p\">}<\/span>\n\n          <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">join-meeting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">({<\/span> <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n              <span class=\"c1\">\/\/ Get user data with username<\/span>\n              <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">strapi<\/span>\n                <span class=\"p\">.<\/span><span class=\"nf\">query<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">plugin::users-permissions.user<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n                <span class=\"p\">.<\/span><span class=\"nf\">findOne<\/span><span class=\"p\">({<\/span>\n                  <span class=\"na\">where<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">},<\/span>\n                  <span class=\"na\">select<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">username<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n                <span class=\"p\">});<\/span>\n\n              <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span><span class=\"s2\">`User <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\"> joining meeting <\/span><span class=\"p\">${<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n\n              <span class=\"kd\">const<\/span> <span class=\"nx\">meeting<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n              <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n              <span class=\"c1\">\/\/ Add participant to meeting with both ID and username<\/span>\n              <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(),<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">socketId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">});<\/span>\n              <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">lastActivity<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">();<\/span>\n\n              <span class=\"c1\">\/\/ Join socket room<\/span>\n              <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n\n              <span class=\"c1\">\/\/ Get current participants with their usernames<\/span>\n              <span class=\"kd\">const<\/span> <span class=\"nx\">currentParticipants<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span>\n                <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">entries<\/span><span class=\"p\">()<\/span>\n              <span class=\"p\">)<\/span>\n                <span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(([<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">())<\/span>\n                <span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(([<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n                  <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n                  <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n                <span class=\"p\">}));<\/span>\n\n              <span class=\"c1\">\/\/ Send current participants to the joining user<\/span>\n              <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">participants-list<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">currentParticipants<\/span><span class=\"p\">);<\/span>\n\n              <span class=\"c1\">\/\/ Notify others about the new participant<\/span>\n              <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">).<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-joined<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(),<\/span>\n                <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">});<\/span>\n\n              <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span>\n                <span class=\"s2\">`Current participants in meeting <\/span><span class=\"p\">${<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">}<\/span><span class=\"s2\">:`<\/span><span class=\"p\">,<\/span>\n                <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">entries<\/span><span class=\"p\">()).<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span>\n                  <span class=\"p\">([<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n                    <span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n                    <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n                  <span class=\"p\">})<\/span>\n                <span class=\"p\">)<\/span>\n              <span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error in join-meeting:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">});<\/span>\n\n          <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">message<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meetingId<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">).<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n          <span class=\"p\">});<\/span>\n\n          <span class=\"kd\">const<\/span> <span class=\"nx\">meeting<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">to<\/span><span class=\"p\">,<\/span> <span class=\"k\">from<\/span><span class=\"p\">,<\/span> <span class=\"nx\">signal<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span>\n              <span class=\"s2\">`Forwarding <\/span><span class=\"p\">${<\/span><span class=\"nx\">signal<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span><span class=\"p\">}<\/span><span class=\"s2\"> signal from <\/span><span class=\"p\">${<\/span><span class=\"k\">from<\/span><span class=\"p\">}<\/span><span class=\"s2\"> to <\/span><span class=\"p\">${<\/span><span class=\"nx\">to<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n            <span class=\"p\">);<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">targetSocket<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span>\n              <span class=\"nx\">to<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">()<\/span>\n            <span class=\"p\">)?.<\/span><span class=\"nx\">socketId<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">targetSocket<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">io<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"nx\">targetSocket<\/span><span class=\"p\">).<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">signal<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"k\">from<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(),<\/span>\n              <span class=\"p\">});<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`No socket found for user <\/span><span class=\"p\">${<\/span><span class=\"nx\">to<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">});<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">handleDisconnect<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">meeting<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"c1\">\/\/ Find and remove the disconnected user<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">disconnectedUserId<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span>\n              <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">entries<\/span><span class=\"p\">()<\/span>\n            <span class=\"p\">).<\/span><span class=\"nf\">find<\/span><span class=\"p\">(([<\/span><span class=\"nx\">_<\/span><span class=\"p\">,<\/span> <span class=\"nx\">socketId<\/span><span class=\"p\">])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">socketId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)?.[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">disconnectedUserId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">(<\/span><span class=\"nx\">disconnectedUserId<\/span><span class=\"p\">);<\/span>\n              <span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">lastActivity<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">();<\/span>\n\n              <span class=\"c1\">\/\/ Notify others about the user leaving<\/span>\n              <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">).<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-left<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">disconnectedUserId<\/span><span class=\"p\">,<\/span>\n              <span class=\"p\">});<\/span>\n\n              <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span>\n                <span class=\"s2\">`User <\/span><span class=\"p\">${<\/span><span class=\"nx\">disconnectedUserId<\/span><span class=\"p\">}<\/span><span class=\"s2\"> left meeting <\/span><span class=\"p\">${<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n              <span class=\"p\">);<\/span>\n              <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span>\n                <span class=\"s2\">`Remaining participants:`<\/span><span class=\"p\">,<\/span>\n                <span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"k\">from<\/span><span class=\"p\">(<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nf\">keys<\/span><span class=\"p\">())<\/span>\n              <span class=\"p\">);<\/span>\n\n              <span class=\"c1\">\/\/ Clean up empty meetings<\/span>\n              <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">meeting<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">.<\/span><span class=\"nx\">size<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nx\">activeMeetings<\/span><span class=\"p\">.<\/span><span class=\"k\">delete<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">);<\/span>\n                <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span>\n                  <span class=\"s2\">`Meeting <\/span><span class=\"p\">${<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">}<\/span><span class=\"s2\"> closed - no participants remaining`<\/span>\n                <span class=\"p\">);<\/span>\n              <span class=\"p\">}<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">};<\/span>\n\n          <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">disconnect<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleDisconnect<\/span><span class=\"p\">);<\/span>\n          <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">leave-meeting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleDisconnect<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Conference socket service initialized successfully<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"nf\">destroy<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">cleanupInterval<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Socketio_Server_%D8%B1%D8%A7_%D8%A8%D8%A7_Strapi_Initialize_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  Socket.io Server \u0631\u0627 \u0628\u0627 Strapi Initialize \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0633\u067e\u0633 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>src\/index.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 Socket.io \u060c \u062a\u0646\u0638\u06cc\u0645 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0648 \u062e\u0644\u0627\u0642\u06cc\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0627\u062f\u063a\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 \u0633\u0648\u06a9\u062a \u0628\u0627 Strapi:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Core<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@strapi\/strapi<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Server<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">SocketServer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">socket.io<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">SocketConfig<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">cors<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">origin<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[];<\/span>\n    <span class=\"nl\">methods<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[];<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">register<\/span><span class=\"p\">({<\/span> <span class=\"nx\">strapi<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">strapi<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Core<\/span><span class=\"p\">.<\/span><span class=\"nx\">Strapi<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">socketConfig<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">config<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">socket.config<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">SocketConfig<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">socketConfig<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Invalid Socket.IO configuration<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nx\">httpServer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">listening<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">io<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">SocketServer<\/span><span class=\"p\">(<\/span><span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">server<\/span><span class=\"p\">.<\/span><span class=\"nx\">httpServer<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">cors<\/span><span class=\"p\">:<\/span> <span class=\"nx\">socketConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">cors<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n\n      <span class=\"p\">(<\/span><span class=\"nx\">strapi<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">).<\/span><span class=\"nx\">io<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">io<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">eventHub<\/span><span class=\"p\">.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">socket.ready<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">},<\/span>\n\n  <span class=\"nf\">bootstrap<\/span><span class=\"p\">({<\/span> <span class=\"nx\">strapi<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">strapi<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Core<\/span><span class=\"p\">.<\/span><span class=\"nx\">Strapi<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">socketService<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nf\">service<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">api::socket.socket<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">initialize<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">socketService<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"k\">typeof<\/span> <span class=\"nx\">socketService<\/span><span class=\"p\">.<\/span><span class=\"nx\">initialize<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">function<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">socketService<\/span><span class=\"p\">.<\/span><span class=\"nf\">initialize<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">strapi<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Socket service or initialize method not found<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D9%84%D8%B3%D9%87_%D9%88%DB%8C%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0644\u0633\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u0633\u0648\u06a9\u062a \u0648 \u0648\u0642\u0627\u06cc\u0639 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062c\u0644\u0633\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u062a\u0627\u0642 \u0647\u0627\u06cc \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062c\u0644\u0633\u0627\u062a \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%AA%D8%A7%D9%82_%DA%A9%D9%86%D9%81%D8%B1%D8%A7%D9%86%D8%B3_%D9%88%DB%8C%D8%AF%DB%8C%D9%88%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0627\u062a\u0627\u0642 \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u062a\u0627\u0642 \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>src\/app\/meetings\/[id]\/page.tsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useParams<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/navigation<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">SimplePeer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">simple-peer<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">io<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Socket<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">socket.io-client<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getCookie<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">cookies-next<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/types<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">ExtendedSimplePeer<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">SimplePeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">Instance<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">_pc<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RTCPeerConnection<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Peer<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">peer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">SimplePeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">Instance<\/span>\n  <span class=\"nx\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n  <span class=\"nx\">stream<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">MediaStream<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ConferenceRoom<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">params<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useParams<\/span><span class=\"p\">()<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">peers<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setPeers<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Peer<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([])<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">stream<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setStream<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MediaStream<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">socketRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Socket<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">userVideo<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLVideoElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">peersRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Peer<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([])<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUser<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isConnected<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsConnected<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">screenStream<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setScreenStream<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MediaStream<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isScreenSharing<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsScreenSharing<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">cookieValue<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">getCookie<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">auth-storage<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">cookieValue<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">parsedAuthState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nc\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">cookieValue<\/span><span class=\"p\">))<\/span>\n        <span class=\"nf\">setUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">parsedAuthState<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error parsing auth cookie:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[])<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">cleanupPeers<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">peer<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nx\">peer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">destroy<\/span><span class=\"p\">()<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span>\n      <span class=\"nf\">setPeers<\/span><span class=\"p\">([])<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nf\">cleanupPeers<\/span><span class=\"p\">()<\/span>\n\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">io<\/span><span class=\"p\">(<\/span><span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_STRAPI_URL<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">meetingId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">},<\/span>\n      <span class=\"na\">transports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">websocket<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n      <span class=\"na\">reconnection<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">reconnectionAttempts<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">connect<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setIsConnected<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Socket connected:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">disconnect<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setIsConnected<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Socket disconnected<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">mediaDevices<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">getUserMedia<\/span><span class=\"p\">({<\/span> <span class=\"na\">video<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"na\">audio<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">setStream<\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stream<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">join-meeting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">meetingId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">signal<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Received signal from:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Signal type:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">signal<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span><span class=\"p\">)<\/span>\n          <span class=\"kd\">let<\/span> <span class=\"nx\">peer<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">peer<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Creating new peer for signal from:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">newPeer<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createPeer<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">,<\/span> <span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n            <span class=\"nx\">peer<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">peer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newPeer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span>\n            <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">peer<\/span><span class=\"p\">)<\/span>\n            <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n          <span class=\"p\">}<\/span>\n\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">signal<\/span><span class=\"p\">(<\/span><span class=\"nx\">signal<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error processing signal:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">participants-list<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">participants<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Received participants list:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">participants<\/span><span class=\"p\">)<\/span>\n\n          <span class=\"nf\">cleanupPeers<\/span><span class=\"p\">()<\/span>\n          <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n        <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-joined<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">username<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">New user joined:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Creating non-initiator peer for new user:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n              <span class=\"kd\">const<\/span> <span class=\"nx\">peer<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createPeer<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">,<\/span> <span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n              <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">})<\/span>\n              <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-left<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">User left:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">peerIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">findIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peerIndex<\/span> <span class=\"o\">!==<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">[<\/span><span class=\"nx\">peerIndex<\/span><span class=\"p\">].<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">destroy<\/span><span class=\"p\">()<\/span>\n            <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">splice<\/span><span class=\"p\">(<\/span><span class=\"nx\">peerIndex<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n            <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">})<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">((<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error accessing media devices:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">})<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">leave-meeting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">meetingId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">})<\/span>\n\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">participants-list<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-joined<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">user-left<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">disconnect<\/span><span class=\"p\">()<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">stream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">track<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">())<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nf\">cleanupPeers<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">])<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span>\n\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">media-state-change<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"kd\">type<\/span><span class=\"p\">,<\/span> <span class=\"nx\">enabled<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">media-state-change<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nf\">createPeer<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MediaStream<\/span><span class=\"p\">,<\/span> <span class=\"nx\">initiator<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">):<\/span> <span class=\"nx\">SimplePeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">Instance<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Creating peer connection - initiator: <\/span><span class=\"p\">${<\/span><span class=\"nx\">initiator<\/span><span class=\"p\">}<\/span><span class=\"s2\">, userId: <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">peer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">SimplePeer<\/span><span class=\"p\">({<\/span>\n      <span class=\"nx\">initiator<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">trickle<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">stream<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">config<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">iceServers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n          <span class=\"p\">{<\/span> <span class=\"na\">urls<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stun:stun.l.google.com:19302<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n          <span class=\"p\">{<\/span> <span class=\"na\">urls<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">stun:global.stun.twilio.com:3478<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">],<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">signal<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Sending signal to <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">, type: <\/span><span class=\"p\">${<\/span><span class=\"nx\">signal<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n      <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">signal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">signal<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">to<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">from<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">connect<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Peer connection established with <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">stream<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">incomingStream<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Received stream from <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">, tracks:`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">incomingStream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTracks<\/span><span class=\"p\">())<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">peerIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">findIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peerIndex<\/span> <span class=\"o\">!==<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">[<\/span><span class=\"nx\">peerIndex<\/span><span class=\"p\">].<\/span><span class=\"nx\">stream<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">incomingStream<\/span>\n        <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">error<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Peer error with <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">:`<\/span><span class=\"p\">,<\/span> <span class=\"nx\">err<\/span><span class=\"p\">)<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">peerIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">findIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peerIndex<\/span> <span class=\"o\">!==<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">[<\/span><span class=\"nx\">peerIndex<\/span><span class=\"p\">].<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">destroy<\/span><span class=\"p\">()<\/span>\n        <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">splice<\/span><span class=\"p\">(<\/span><span class=\"nx\">peerIndex<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n        <span class=\"nf\">setPeers<\/span><span class=\"p\">([...<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">])<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">close<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Peer connection closed with <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">peer<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col gap-4 p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-sm text-gray-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isConnected<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Connected to server<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Disconnected from server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"cm\">\/* <participantlist\/> *\/<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">video<\/span>\n            <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">autoPlay<\/span>\n            <span class=\"nx\">muted<\/span>\n            <span class=\"nx\">playsInline<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full rounded-lg bg-gray-900<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">You<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">peers<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">PeerVideo<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">peer<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">peer<\/span><span class=\"p\">}<\/span> <span class=\"nx\">userId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">stream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">stream<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">PeerVideo<\/span><span class=\"p\">({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">peer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">SimplePeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">Instance<\/span><span class=\"p\">;<\/span> <span class=\"nl\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">stream<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">MediaStream<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ref<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLVideoElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stream<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">handleStream<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">incomingStream<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MediaStream<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">incomingStream<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">stream<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleStream<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">stream<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleStream<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">])<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">video<\/span> <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">}<\/span> <span class=\"nx\">autoPlay<\/span> <span class=\"nx\">playsInline<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full rounded-lg bg-gray-900<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0622\u0646\u0686\u0647 \u06a9\u062f \u0641\u0648\u0642 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u06a9\u062f \u0641\u0648\u0642 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0645\u06cc \u06a9\u0646\u062f <strong>webrtc<\/strong> \u0648 Socket.io \u0686\u062a \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0647\u0645\u062a\u0627 \u0628\u0647 \u0647\u0645\u062a\u0627. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <strong>\u0633\u0627\u062f\u0647<\/strong> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u062a\u0635\u0627\u0644\u0627\u062a WEBRTC \u060c \u062d\u0641\u0638 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc\u0627\u0644\u062a \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u060c \u0648 <code>peersRef<\/code> \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u062a\u0635\u0644. <\/li>\n<li>\u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0635\u0648\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0648\u0644\u06cc\u0647 \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f <code>getUserMedia<\/code>\u060c \u0633\u067e\u0633 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0633\u0648\u06a9\u062a \u0631\u0627 \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f <code>join-meeting<\/code>\u0628\u0627 <code>signal<\/code>\u0628\u0627 <code>user-joined<\/code>\u0648\u062a <code>user-left<\/code> \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc. <\/li>\n<li>\u062f\u0631 <code>createPeer<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u062a\u0648\u0646 \u0641\u0642\u0631\u0627\u062a \u0627\u0633\u062a \u060c \u0627\u06cc\u062c\u0627\u062f \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u062c\u062f\u06cc\u062f \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u0628\u0627 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u06cc\u062e \u0628\u0631\u0627\u06cc Nat Traversal \u0636\u0645\u0646 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u0645\u0627\u0646\u0646\u062f <code>signal<\/code>\u0628\u0627 <code>connect<\/code>\u0628\u0627 <code>stream<\/code>\u0648\u062a <code>error<\/code>\u0628\u0634\u0631 <\/li>\n<li>\u062c\u0631\u06cc\u0627\u0646 \u0647\u0627\u06cc \u0648\u06cc\u062f\u0626\u0648\u06cc\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>userVideo<\/code> Ref \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u062d\u0644\u06cc \u0648 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 <code>PeerVideo<\/code> \u0645\u0624\u0644\u0641\u0647 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631 \u060c \u06a9\u0647 \u0639\u0646\u0627\u0635\u0631 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0641\u0631\u062f\u06cc \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>socket.current<\/code> \u0628\u0631\u0627\u06cc \u062d\u0641\u0638 \u0627\u062a\u0635\u0627\u0644 WebSocket \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>useEffect's<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627\u0632\u06af\u0634\u062a \u060c \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0646\u0627\u0628\u0648\u062f\u06cc \u062a\u0645\u0627\u0645 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u0648 \u062c\u0631\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u0647 \u0647\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0646\u0627\u0628\u0648\u062f\u06cc \u0645\u0624\u0644\u0641\u0647 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<\/ul>\n<p><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D8%B5%D9%81%D8%AD%D9%87\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0646\u06af\u0627\u0645 \u062a\u0645\u0627\u0633 \u060c \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u0646\u062f \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0634\u062a\u0631\u0627\u06a9 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0647 \u0627\u062a\u0627\u0642 \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/...<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ScreenShare<\/span><span class=\"p\">,<\/span> <span class=\"nx\">StopScreenShare<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">lucide-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">ExtendedSimplePeer<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">SimplePeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">Instance<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">_pc<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RTCPeerConnection<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/...<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ConferenceRoom<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/...<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">screenStream<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setScreenStream<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MediaStream<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isScreenSharing<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsScreenSharing<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span> \n\n\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">toggleScreenShare<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isScreenSharing<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">screen<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nb\">navigator<\/span><span class=\"p\">.<\/span><span class=\"nx\">mediaDevices<\/span><span class=\"p\">.<\/span><span class=\"nf\">getDisplayMedia<\/span><span class=\"p\">({<\/span>\n          <span class=\"na\">video<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">audio<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"c1\">\/\/ Handle when the user clicks the \"Stop sharing\" button in the browser<\/span>\n        <span class=\"nx\">screen<\/span><span class=\"p\">.<\/span><span class=\"nf\">getVideoTracks<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">ended<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">stopScreenSharing<\/span><span class=\"p\">();<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"nf\">setScreenStream<\/span><span class=\"p\">(<\/span><span class=\"nx\">screen<\/span><span class=\"p\">);<\/span>\n        <span class=\"nf\">setIsScreenSharing<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ Replace video track for all peers<\/span>\n        <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">videoTrack<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">screen<\/span><span class=\"p\">.<\/span><span class=\"nf\">getVideoTracks<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">extendedPeer<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peer<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">ExtendedSimplePeer<\/span><span class=\"p\">;<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">sender<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">extendedPeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">_pc<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">getSenders<\/span><span class=\"p\">()<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">s<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">s<\/span><span class=\"p\">.<\/span><span class=\"nx\">track<\/span><span class=\"p\">?.<\/span><span class=\"nx\">kind<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">video<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">sender<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">sender<\/span><span class=\"p\">.<\/span><span class=\"nf\">replaceTrack<\/span><span class=\"p\">(<\/span><span class=\"nx\">videoTrack<\/span><span class=\"p\">);<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"c1\">\/\/ Replace local video<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">screen<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error sharing screen:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">stopScreenSharing<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">stopScreenSharing<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">screenStream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">screenStream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">track<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">());<\/span>\n      <span class=\"nf\">setScreenStream<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">setIsScreenSharing<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Revert to camera video for all peers<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">videoTrack<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getVideoTracks<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">extendedPeer<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">peer<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">ExtendedSimplePeer<\/span><span class=\"p\">;<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">sender<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">extendedPeer<\/span><span class=\"p\">.<\/span><span class=\"nx\">_pc<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">getSenders<\/span><span class=\"p\">()<\/span>\n            <span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">s<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">s<\/span><span class=\"p\">.<\/span><span class=\"nx\">track<\/span><span class=\"p\">?.<\/span><span class=\"nx\">kind<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">video<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">sender<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">sender<\/span><span class=\"p\">.<\/span><span class=\"nf\">replaceTrack<\/span><span class=\"p\">(<\/span><span class=\"nx\">videoTrack<\/span><span class=\"p\">);<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">});<\/span>\n\n        <span class=\"c1\">\/\/ Revert local video<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">userVideo<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">srcObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stream<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/...<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col gap-4 p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-sm text-gray-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isConnected<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Connected to server<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Disconnected from server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">video<\/span>\n            <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">autoPlay<\/span>\n            <span class=\"nx\">muted<\/span>\n            <span class=\"nx\">playsInline<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full rounded-lg bg-gray-900<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">You<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">peers<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">PeerVideo<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">peer<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">peer<\/span><span class=\"p\">}<\/span> <span class=\"nx\">userId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">stream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">stream<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">{<\/span><span class=\"cm\">\/* added this button to handle the start screen and stop sharing. *\/<\/span><span class=\"p\">}<\/span>\n\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n        <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toggleScreenShare<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">15rem<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isScreenSharing<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">StopCircleIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-5 h-5<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"nx\">Stop<\/span> <span class=\"nx\">Sharing<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ScreenShare<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-5 h-5<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"nx\">Share<\/span> <span class=\"nx\">Screen<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"c1\">\/\/<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u06a9\u062f \u0641\u0648\u0642:<\/p>\n<ul>\n<li>\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 <code>toggleScreenShare<\/code> \u0648\u062a <code>stopScreenSharing<\/code> \u062a\u0648\u0627\u0628\u0639 \u060c \u06a9\u062c\u0627 <code>toggleScreenShare<\/code> \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc <code>navigator.mediaDevices.getDisplayMedia<\/code> \u0628\u0631\u0627\u06cc \u0636\u0628\u0637 \u0635\u0641\u062d\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 <code>MediaStream<\/code>\u060c \u0630\u062e\u06cc\u0631\u0647 \u0622\u0646 \u062f\u0631 <code>screenStream<\/code> \u062d\u0627\u0644\u062a \u0648 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0648\u0636\u0639\u06cc\u062a \u0622\u0646 \u0628\u0627 <code>isScreenSharing<\/code>\u0628\u0634\u0631 <\/li>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u060c \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0622\u0647\u0646\u06af \u0647\u0627\u06cc \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0647\u0645\u0633\u0627\u0644\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 RTCPeerConnection&#39;s \u0645\u06cc \u0634\u0648\u062f <code>getSenders().replaceTrack<\/code> \u0631\u0648\u0634 \u060c \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0646\u0686\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u0632 \u062f\u0648\u0631\u0628\u06cc\u0646 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0635\u0641\u062d\u0647 \u0645\u06cc \u0628\u06cc\u0646\u062f. <\/li>\n<li>\u062f\u0631 <code>stopScreenSharing<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0631\u062f\u0646 \u062a\u0645\u0627\u0645 \u0622\u0647\u0646\u06af \u0647\u0627\u06cc \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0628\u0627\u0632\u06af\u0634\u062a \u0647\u0645\u0647 \u0628\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u062f\u0648\u0631\u0628\u06cc\u0646 \u060c \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\n<img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F30luq7bmbn93ll3iuuk4.png\" alt=\"\u0627\u062c\u0631\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634. png\" loading=\"lazy\" width=\"800\" height=\"421\" title=\"\">\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%DA%86%D8%AA_%D8%AF%D8%B1_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0686\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0645\u0627\u0633 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u06af\u067e \u0628\u0632\u0646\u0646\u062f. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%86%D8%AA_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0624\u0644\u0641\u0647 \u0686\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0686\u062a \u062f\u0631 <code>src\/components\/meeting\/chat.tsx<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useAuthStore<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/store\/auth-store<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Socket<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">socket.io-client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/types<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">ChatProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">socketRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">MutableRefObject<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Socket<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Changed from RefObject to MutableRefObject<\/span>\n  <span class=\"nl\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">meetingId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Message<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">username<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Chat<\/span><span class=\"p\">({<\/span> <span class=\"nx\">socketRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meetingId<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">ChatProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">messages<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setMessages<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Message<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([]);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">newMessage<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNewMessage<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isExpanded<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsExpanded<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">chatRef<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLDivElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">socket<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">socket<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">handleChatMessage<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Message<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setMessages<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">]);<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleChatMessage<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">socket<\/span><span class=\"p\">?.<\/span><span class=\"nf\">off<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleChatMessage<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">chatRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">chatRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">scrollTop<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">chatRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">scrollHeight<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">messages<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">sendMessage<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FormEvent<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">socket<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">socket<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">newMessage<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">())<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Message<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(),<\/span>\n      <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">newMessage<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">(),<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">message<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nf\">setMessages<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">]);<\/span>\n    <span class=\"nf\">setNewMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fixed right-4 bottom-4 w-80 bg-white rounded-lg shadow-lg flex flex-col border<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-3 border-b flex justify-between items-center cursor-pointer<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setIsExpanded<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isExpanded<\/span><span class=\"p\">)}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h3<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-medium text-gray-600<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Chat<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h3<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-500 hover:text-gray-700<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">isExpanded<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\u25bc<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\u25b2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">isExpanded<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">chatRef<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1 overflow-y-auto p-4 space-y-4 max-h-96<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">messages<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">message<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n                <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">index<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`flex <\/span><span class=\"p\">${<\/span>\n                  <span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">()<\/span>\n                    <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">justify-end<\/span><span class=\"dl\">\"<\/span>\n                    <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">justify-start<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n              <span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n                  <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`max-w-xs px-4 py-2 rounded-lg <\/span><span class=\"p\">${<\/span>\n                    <span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">()<\/span>\n                      <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-blue-600 text-white<\/span><span class=\"dl\">\"<\/span>\n                      <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bg-gray-400<\/span><span class=\"dl\">\"<\/span>\n                  <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n                <span class=\"o\">&gt;<\/span>\n                  <span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">()<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xs font-medium mb-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                      <span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"p\">)}<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">break-words<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>                  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xs opacity-75 block mt-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"p\">{<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">.<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">).<\/span><span class=\"nf\">toLocaleTimeString<\/span><span class=\"p\">()}<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"p\">))}<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">form<\/span> <span class=\"nx\">onSubmit<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">sendMessage<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-4 border-t<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex gap-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span>\n                <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">newMessage<\/span><span class=\"p\">}<\/span>\n                <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setNewMessage<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1 px-3 py-2 border rounded-lg text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Type a message...<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"o\">\/&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n                <span class=\"kd\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">submit<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors<\/span><span class=\"dl\">\"<\/span>\n                <span class=\"nx\">disabled<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\">!<\/span><span class=\"nx\">newMessage<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">()}<\/span>\n              <span class=\"o\">&gt;<\/span>\n                <span class=\"nx\">Send<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/form<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Chat<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%DA%86%D8%AA_%D8%B1%D8%A7_%D8%A8%D9%87_%DA%A9%D9%84%DB%8C%D9%87_%D9%85%D8%B4%D8%AA%D8%B1%DB%8C%D8%A7%D9%86_%D9%85%D8%AA%D8%B5%D9%84_%D8%A8%D8%A7_Strapi_%D9%BE%D8%AE%D8%B4_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0686\u062a \u0631\u0627 \u0628\u0647 \u06a9\u0644\u06cc\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u062a\u0635\u0644 \u0628\u0627 Strapi \u067e\u062e\u0634 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0633\u0648\u06a9\u062a Strapi \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>api\/socket\/services\/socket.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u06af\u067e \u0628\u0647 \u06a9\u0644\u06cc\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u062a\u0635\u0644 \u062f\u0631 \u062c\u0644\u0633\u0647.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/...<\/span>\n<span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">message<\/span><span class=\"p\">,<\/span> <span class=\"nx\">meetingId<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">socket<\/span><span class=\"p\">.<\/span><span class=\"nf\">to<\/span><span class=\"p\">(<\/span><span class=\"nx\">meetingId<\/span><span class=\"p\">).<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">chat-message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n<span class=\"c1\">\/\/...<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%86%D8%AA_%D8%B1%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0624\u0644\u0641\u0647 \u0686\u062a \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0633\u067e\u0633 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>app\/meetings\/[id]\/page.tsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 <strong>\u06af\u067e<\/strong> \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a \u0634\u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/...<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Chat<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/meeting\/chat<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/...<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ConferenceRoom<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"c1\">\/\/...<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col gap-4 p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-sm text-gray-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isConnected<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Connected to server<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Disconnected from server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">video<\/span>\n            <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">autoPlay<\/span>\n            <span class=\"nx\">muted<\/span>\n            <span class=\"nx\">playsInline<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full rounded-lg bg-gray-900<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">You<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">peers<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">PeerVideo<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">peer<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">peer<\/span><span class=\"p\">}<\/span> <span class=\"nx\">userId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">stream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">stream<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n        <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toggleScreenShare<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">width<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">15rem<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isScreenSharing<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">StopCircleIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-5 h-5<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"nx\">Stop<\/span> <span class=\"nx\">Sharing<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ScreenShare<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-5 h-5<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"nx\">Share<\/span> <span class=\"nx\">Screen<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">)}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Chat<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">user<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">User<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">meetingId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">}<\/span>\n      <span class=\"sr\">\/&gt;{\" \"<\/span><span class=\"err\">}\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibvu84app79lku82cbkk.png\" alt=\"\u0631\u0646\u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0686\u062a. png\" loading=\"lazy\" width=\"800\" height=\"489\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%AC%D9%84%D8%B3%D8%A7%D8%AA\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062c\u0644\u0633\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0645\u06cc \u0686\u06cc\u0632\u0647\u0627 \u0631\u0627 \u06a9\u0645\u06cc \u062c\u0644\u0648\u062a\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0631\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0634\u0628\u06cc\u0647 Google Meeting \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0631\u06a9\u0632\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062c\u0647\u0634 \u0648 \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f\u0646 \u0645\u06cc\u06a9\u0631\u0648\u0641\u0648\u0646 \u060c \u062e\u0627\u0645\u0648\u0634 \u0648 \u0631\u0648\u0634\u0646 \u06a9\u0631\u062f\u0646 \u0641\u06cc\u0644\u0645 \u060c \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0648 \u062a\u0631\u06a9 \u062c\u0644\u0633\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_Controls_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0624\u0644\u0641\u0647 Controls \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0631 <code>src\/components\/meeting\/controls.tsx<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/navigation<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">Mic<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">MicOff<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Video<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">VideoOff<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">ScreenShare<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">StopCircleIcon<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">Phone<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">lucide-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Socket<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">socket.io-client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">ControlsProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">stream<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MediaStream<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">screenStream<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MediaStream<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isScreenSharing<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">socketRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">MutableRefObject<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Socket<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">peersRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">MutableRefObject<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">any<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">meetingId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">onScreenShare<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Controls<\/span><span class=\"p\">({<\/span>\n  <span class=\"nx\">stream<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">screenStream<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">isScreenSharing<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">socketRef<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">peersRef<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">onScreenShare<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}:<\/span> <span class=\"nx\">ControlsProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">router<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRouter<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isAudioEnabled<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsAudioEnabled<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isVideoEnabled<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsVideoEnabled<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">toggleAudio<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAudioTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">track<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nx\">enabled<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isAudioEnabled<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nf\">setIsAudioEnabled<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isAudioEnabled<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Notify peers about audio state change<\/span>\n      <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">media-state-change<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">audio<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">enabled<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isAudioEnabled<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">toggleVideo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getVideoTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">track<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nx\">enabled<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isVideoEnabled<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"nf\">setIsVideoEnabled<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isVideoEnabled<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Notify peers about video state change<\/span>\n      <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">media-state-change<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">video<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">enabled<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isVideoEnabled<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLeave<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Stop all tracks<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">stream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">track<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">());<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">screenStream<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">screenStream<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTracks<\/span><span class=\"p\">().<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">track<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">track<\/span><span class=\"p\">.<\/span><span class=\"nf\">stop<\/span><span class=\"p\">());<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Clean up peer connections<\/span>\n    <span class=\"nx\">peersRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">peer<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nx\">peer<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nx\">peer<\/span><span class=\"p\">.<\/span><span class=\"nf\">destroy<\/span><span class=\"p\">();<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Notify server<\/span>\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">emit<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">leave-meeting<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">meetingId<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ Disconnect socket<\/span>\n    <span class=\"nx\">socketRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">?.<\/span><span class=\"nf\">disconnect<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/meetings<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fixed bottom-0 left-0 right-0 bg-white border-t p-4 shadow-lg<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">max-w-4xl mx-auto flex justify-center gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toggleAudio<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`p-3 rounded-full transition-colors <\/span><span class=\"p\">${<\/span>\n            <span class=\"nx\">isAudioEnabled<\/span> \n              <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-gray-600 hover:bg-gray-500<\/span><span class=\"dl\">'<\/span> \n              <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-red-500 hover:bg-red-600 text-white<\/span><span class=\"dl\">'<\/span>\n          <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isAudioEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Mute<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Unmute<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">isAudioEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">Mic<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">24<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt; : <micoff size=\"&lt;\/span\"><span class=\"se\">{24}<\/span><span class=\"sr\"> \/<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toggleVideo<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`p-3 rounded-full transition-colors <\/span><span class=\"p\">${<\/span>\n            <span class=\"nx\">isVideoEnabled<\/span> \n              <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-gray-600 hover:bg-gray-500<\/span><span class=\"dl\">'<\/span> \n              <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-red-500 hover:bg-red-600 text-white<\/span><span class=\"dl\">'<\/span>\n          <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isVideoEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Stop Video<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Start Video<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">isVideoEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">Video<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">24<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt; : <videooff size=\"&lt;\/span\"><span class=\"se\">{24}<\/span><span class=\"sr\"> \/<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onScreenShare<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"s2\">`p-3 rounded-full transition-colors <\/span><span class=\"p\">${<\/span>\n            <span class=\"nx\">isScreenSharing<\/span> \n              <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-blue-500 hover:bg-blue-600 text-white<\/span><span class=\"dl\">'<\/span> \n              <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">bg-gray-600 hover:bg-gray-600<\/span><span class=\"dl\">'<\/span>\n          <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isScreenSharing<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Stop Sharing<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Share Screen<\/span><span class=\"dl\">'<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">isScreenSharing<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">StopCircleIcon<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">24<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ScreenShare<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">24<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span>\n          <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">handleLeave<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-3 rounded-full bg-red-500 hover:bg-red-600 text-white transition-colors<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Leave Meeting<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Phone<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">24<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rotate-[135deg]<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/videooff><\/span><\/micoff><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%A4%D9%84%D9%81%D9%87_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%B1%D8%A7_%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0624\u0644\u0641\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>app\/meetings\/[id]\/page.tsx<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 <strong>\u06a9\u0646\u062a\u0631\u0644 \u06a9\u0631\u062f\u0646<\/strong> \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a \u0634\u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/...<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Controls<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/meeting\/controls<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/...<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ConferenceRoom<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"c1\">\/\/...<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col gap-4 p-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-sm text-gray-500<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">isConnected<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Connected to server<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Disconnected from server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">relative<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">video<\/span>\n            <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userVideo<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">autoPlay<\/span>\n            <span class=\"nx\">muted<\/span>\n            <span class=\"nx\">playsInline<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full rounded-lg bg-gray-900<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Controls<\/span>\n            <span class=\"nx\">stream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">stream<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">screenStream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">screenStream<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">isScreenSharing<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">isScreenSharing<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">socketRef<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">peersRef<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">peersRef<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">meetingId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">userId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">id<\/span><span class=\"p\">.<\/span><span class=\"nf\">toString<\/span><span class=\"p\">()<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onScreenShare<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">toggleScreenShare<\/span><span class=\"p\">}<\/span>\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">You<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">{<\/span><span class=\"nx\">peers<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(({<\/span> <span class=\"nx\">peer<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stream<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">PeerVideo<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">peer<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">peer<\/span><span class=\"p\">}<\/span> <span class=\"nx\">userId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span> <span class=\"nx\">stream<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">stream<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Chat<\/span>\n        <span class=\"nx\">socketRef<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">socketRef<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">user<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">user<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">User<\/span><span class=\"p\">}<\/span>\n        <span class=\"nx\">meetingId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">string<\/span><span class=\"p\">}<\/span>\n      <span class=\"sr\">\/&gt;{\" \"<\/span><span class=\"err\">}\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/...<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa21uuif4falspvsa7jm4.png\" alt=\"controls component.png \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"480\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%AC%D9%84%D8%B3%D9%87\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u060c \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u062c\u0644\u0633\u0647 \u060c \u0648 \u062f\u06cc\u062f\u0646 \u0644\u06cc\u0633\u062a \u0647\u0645\u0647 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u06a9\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0645\u0627\u0633 \u067e\u06cc\u0648\u0633\u062a\u0647 \u0627\u0646\u062f \u060c \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. <\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0645\u0644\u0627\u0642\u0627\u062a \u062f\u0631 <code>src\/store\/meeting-store.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">create<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zustand<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Participant<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">username<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isAudioEnabled<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isVideoEnabled<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isScreenSharing<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isHost<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">MeetingState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">participants<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Record<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Participant<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">addParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">participant<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Participant<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">removeParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">updateParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updates<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Partial<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Participant<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">updateMediaState<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"kd\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">audio<\/span><span class=\"dl\">'<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">video<\/span><span class=\"dl\">'<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">screen<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">enabled<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">clearParticipants<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">useMeetingStore<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">create<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">MeetingState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">((<\/span><span class=\"kd\">set<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n  <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"p\">{},<\/span>\n\n  <span class=\"na\">addParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">participant<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">set<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n      <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">[<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">]:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">participant<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">isAudioEnabled<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">isVideoEnabled<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">isScreenSharing<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">[<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">],<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">})),<\/span>\n\n  <span class=\"na\">removeParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">set<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">removed<\/span><span class=\"p\">,<\/span> <span class=\"p\">...<\/span><span class=\"nx\">rest<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"nx\">rest<\/span> <span class=\"p\">};<\/span>\n    <span class=\"p\">}),<\/span>\n\n  <span class=\"na\">updateParticipant<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updates<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">set<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n      <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">],<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">updates<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">})),<\/span>\n\n  <span class=\"na\">updateMediaState<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"kd\">type<\/span><span class=\"p\">,<\/span> <span class=\"nx\">enabled<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">set<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n      <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">],<\/span>\n          <span class=\"p\">[<\/span><span class=\"kd\">type<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">audio<\/span><span class=\"dl\">'<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">isAudioEnabled<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> \n           <span class=\"kd\">type<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">video<\/span><span class=\"dl\">'<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">isVideoEnabled<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">isScreenSharing<\/span><span class=\"dl\">'<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">enabled<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">})),<\/span>\n\n  <span class=\"na\">clearParticipants<\/span><span class=\"p\">:<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span>\n    <span class=\"nf\">set<\/span><span class=\"p\">({<\/span> <span class=\"na\">participants<\/span><span class=\"p\">:<\/span> <span class=\"p\">{}<\/span> <span class=\"p\">}),<\/span>\n<span class=\"p\">}));<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0622\u0646\u0686\u0647 \u06a9\u062f \u0641\u0648\u0642 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u0648\u0636\u0639\u06cc\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 <code>Participant<\/code> \u0631\u0627\u0628\u0637 \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0634\u0646\u0627\u0633\u0647 \u060c \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 (\u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0648\u062a\u06cc \u060c \u0648\u06cc\u062f\u0626\u0648 \u0648 \u0635\u0641\u062d\u0647). <\/li>\n<li>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 <code>addParticipant<\/code> \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0627\u0644\u0627\u062a \u0645\u062a\u062d\u062f\u0647 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u060c \u0648\u0635\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u062f\u0631 <code>removeParticipant<\/code> \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u062e\u0631\u06cc\u0628 \u0634\u06cc\u0621 \u067e\u0627\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u062f\u0631 <code>updateParticipant<\/code> \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u062c\u0632\u0626\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0647\u0631 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u062f.<\/li>\n<li>\u062f\u0631 <code>updateMediaState<\/code> \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0635\u0648\u062a\u06cc\/\u062a\u0635\u0648\u06cc\u0631\u06cc\/\u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u062f\u0631 <code>clearParticipants<\/code> \u062a\u0645\u0627\u0645 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u067e\u0627\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D9%84%DB%8C%D8%B3%D8%AA_%D8%B4%D8%B1%DA%A9%D8%AA_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc \u0644\u06cc\u0633\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 <code>meeting-store<\/code> \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u062c\u0644\u0633\u0647. \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0644\u06cc\u0633\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>src\/components\/meeting\/participant-list.tsx<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">'<\/span><span class=\"s1\">use client<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Mic<\/span><span class=\"p\">,<\/span> <span class=\"nx\">MicOff<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Video<\/span><span class=\"p\">,<\/span> <span class=\"nx\">VideoOff<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ScreenShare<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Users<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ChevronDown<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ChevronUp<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">lucide-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useMeetingStore<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/store\/meeting-store<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ParticipantList<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isExpanded<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsExpanded<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">participants<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMeetingStore<\/span><span class=\"p\">((<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">participants<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">participantCount<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">keys<\/span><span class=\"p\">(<\/span><span class=\"nx\">participants<\/span><span class=\"p\">).<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fixed left-4 bottom-5 w-80 bg-white rounded-lg shadow-lg border z-50<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> \n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-3 border-b flex justify-between items-center cursor-pointer<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setIsExpanded<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isExpanded<\/span><span class=\"p\">)}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">Users<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">text-gray-600<\/span><span class=\"dl\">'<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-medium text-gray-600<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Participants <\/span><span class=\"p\">({<\/span><span class=\"nx\">participantCount<\/span><span class=\"p\">})<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-500 hover:text-gray-700<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">isExpanded<\/span> <span class=\"p\">?<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">ChevronUp<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">20<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt; : <chevrondown size=\"&lt;\/span\"><span class=\"se\">{20}<\/span><span class=\"sr\"> \/<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">isExpanded<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">max-h-96 overflow-y-auto p-4 space-y-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">values<\/span><span class=\"p\">(<\/span><span class=\"nx\">participants<\/span><span class=\"p\">).<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">participant<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n              <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span>\n              <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center justify-between p-2 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center gap-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">font-medium text-gray-600<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">isHost<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"nx\">Host<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"p\">)}<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex gap-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">isAudioEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Mic<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-green-500<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">MicOff<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-red-500<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">)}<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">isVideoEnabled<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">Video<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-green-500<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">VideoOff<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-red-500<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">)}<\/span>\n                <span class=\"p\">{<\/span><span class=\"nx\">participant<\/span><span class=\"p\">.<\/span><span class=\"nx\">isScreenSharing<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                  <span class=\"o\">&lt;<\/span><span class=\"nx\">ScreenShare<\/span> <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"mi\">16<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-blue-500<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n                <span class=\"p\">)}<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">))}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"p\">)}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/chevrondown><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u0628\u0631\u0646\u0627\u0645\u0647\/\u062c\u0644\u0633\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f\/[id]\/page.tsx \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 <code>ParticipantList<\/code> \u0645\u0624\u0644\u0641\u0647:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc1u0zuzxjbv8l6rur2fo.png\" alt=\"\u0627\u062c\u0631\u0627\u06cc \u0644\u06cc\u0633\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646. png\" loading=\"lazy\" width=\"800\" height=\"454\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D9%88_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0627\u062f\u063a\u0627\u0645 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0646\u0647\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 Clone Google Meet \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js \u0648 Strapi \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>Backend Strapi \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>google-meet-backend\nnpm run develop\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ol>\n<li>Next.js Frontend \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>google-meet-frontend\nnpm run dev\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D9%85%D9%86%D8%A8%D8%B9_GitHub\"><\/span>\n<p>  \u06a9\u062f \u0645\u0646\u0628\u0639 GitHub<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u062f \u0645\u0646\u0628\u0639 \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062f\u0631 GitHub \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a. \u0644\u0637\u0641\u0627\u064b \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u062f \u0628\u0627\u0637\u0646 Strapi \u062f\u0631 \u0622\u0646 \u0633\u0627\u06a9\u0646 \u0627\u0633\u062a <code>main<\/code> \u0634\u0627\u062e\u0647 \u0648 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u062f\u0631 <code>part_3<\/code> \u0627\u0632 repo<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%D8%A7%DB%8C%D8%A7%D9%86_%D8%B3%D8%B1%DB%8C_%D9%88_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u067e\u0627\u06cc\u0627\u0646 \u0633\u0631\u06cc \u0648 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0648\u0628\u0644\u0627\u06af &#8220;\u0633\u0627\u062e\u062a \u06cc\u06a9 \u06a9\u0644\u0648\u0646 \u0645\u0644\u0627\u0642\u0627\u062a \u0628\u0627 Google \u0628\u0627 Strapi 5 \u0648 Next.js&#8221; \u060c \u0645\u0627 \u06cc\u06a9 \u06a9\u0644\u0648\u0646 \u06a9\u0627\u0645\u0644 Google Meet \u0631\u0627 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0633\u0627\u062e\u062a\u06cc\u0645:<\/p>\n<ul>\n<li>\u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Webrtc<\/li>\n<li>\u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634<\/li>\n<li>\u0642\u0627\u0628\u0644\u06cc\u062a \u0686\u062a<\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647<\/li>\n<\/ul>\n<p>Strapi 5 \u0627\u06a9\u0646\u0648\u0646 \u0632\u0646\u062f\u0647 \u0627\u0633\u062a. \ud83d\udc49 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0633\u0627\u062e\u062a\u0646!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647 \u0642\u0633\u0645\u062a \u0622\u062e\u0631 \u0633\u0631\u06cc \u0622\u0645\u0648\u0632\u0634 \u06a9\u0644\u0648\u0646 Google Meet \u0645\u0627 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u060c \u06a9\u0646\u0641\u0631\u0627\u0646\u0633 \u0648\u06cc\u062f\u06cc\u0648\u06cc\u06cc \u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0686\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 WeBRTC \u0648 Socket.io \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0645\u0631\u062c\u0639 \u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0637\u0631\u062d \u06a9\u0644\u06cc \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0648\u0628\u0644\u0627\u06af \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f: \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u060c &hellip;<\/p>\n","protected":false},"author":2,"featured_media":99509,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-99508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/99508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=99508"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/99508\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/99509"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=99508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=99508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=99508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}