{"id":325779,"date":"2021-06-30T21:00:36","date_gmt":"2021-06-30T21:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=325779"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=325779","title":{"rendered":"\u0412\u0438\u0434\u0435\u043e\u0447\u0430\u0442 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Twilio Sync"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6e1\/fbf\/690\/6e1fbf6909c5348590d591a18acbd555.jpg\" width=\"780\" height=\"440\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043b\u044e\u0434\u0435\u0439 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0430\u0442 \u043d\u0443\u0436\u0435\u043d \u0432\u0447\u0435\u0440\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043d\u0443\u043b\u044f \u0443\u0436\u0435 \u043f\u043e\u0437\u0434\u043d\u043e. \u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 \u043a\u0443\u0440\u0441\u0430 \u043e <a href=\"https:\/\/skillfactory.ru\/frontend?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FR&amp;utm_term=regular&amp;utm_content=300621\">Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/a>, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Twilio. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 Github, \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0447\u0430\u0442\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c \u0432 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u2014 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0430\u0442\u0430.<\/p>\n<hr>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h3>\n<p>\u0427\u0442\u043e \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0443\u0447\u0451\u0442\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c Twilio. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0435\u0441\u044c <a href=\"https:\/\/www.twilio.com\/referral\/D4tqHM\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 10 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0440\u0435\u0434\u0438\u0442\u0430 Twilio \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u0443\u044e \u0443\u0447\u0451\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> (\u0432\u0435\u0440\u0441\u0438\u044f 14.16.1 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435) \u0438 <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0438\u0437 <a href=\"https:\/\/github.com\/adjeim\/video-note-collab.git\">\u044d\u0442\u043e\u0433\u043e<\/a> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043a\u043e\u0434 \u0432\u0438\u0434\u0435\u043e\u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u043e\u0434, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435, \u0433\u0434\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0442\u043a\u0443 <a href=\"https:\/\/github.com\/adjeim\/video-note-collab\/tree\/start\">start<\/a>:<\/p>\n<pre><code class=\"bash\">git clone -b start https:\/\/github.com\/adjeim\/video-note-collab.git<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">cd video-note-collab npm install<\/code><\/pre>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b .env \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u044b \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">cp .env.template .env <\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b .env \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0438\u043c\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<pre><code class=\"bash\">TWILIO_ACCOUNT_SID TWILIO_SYNC_SERVICE_SID TWILIO_API_KEY_SID TWILIO_API_KEY_SECRET<\/code><\/pre>\n<p>\u041d\u0430\u0439\u0442\u0438 \u0441\u0432\u043e\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Twilio, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Twilio Sync Service \u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Twilio API Keys. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 TWILIO_SYNC_SERVICE_SID \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SID \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u0432\u0435\u043b\u0438 \u0441\u0432\u043e\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 Express:<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/ \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/44a\/220\/86d\/44a22086d30fcc20ef25b87a9b4f6ac6.png\" width=\"800\" height=\"240\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u0431\u0440\u0430\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0435. \u041f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u0430, \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u0432\u043e\u0434\u0430 \u0438\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u0440\u0435\u043f\u0438\u043d\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/ \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043d\u0438\u0445, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ec\/057\/b78\/6ec057b78e538ca2d9b3dad600e857cb.png\" width=\"800\" height=\"144\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u042d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <a href=\"https:\/\/www.twilio.com\/docs\/sync\">Twilio Sync<\/a> \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0417\u0434\u0435\u0441\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 Sync, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f notepad. \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f Sync \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u0415\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 &lt;textarea&gt;. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n<p>\u0418\u0434\u0435\u044f \u0437\u0434\u0435\u0441\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 \u0438\u0434\u0435\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a Google Docs \u0438\u043b\u0438 Notion. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c <a href=\"https:\/\/www.twilio.com\/sync\/use-cases\">\u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c <\/a>\u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443<\/p>\n<h3>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043c\u0430\u043a\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u2014 \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 public\/index.html \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e Tailwind CSS \u0438 Twilio Sync \u0443\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;head&gt;, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Twilio Video, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"xml\">&lt;html&gt;   &lt;head&gt;     &lt;meta name='viewport' content='width=device-width, initial-scale=1.0' \/&gt;     &lt;link href='https:\/\/unpkg.com\/tailwindcss@^2\/dist\/tailwind.min.css' rel='stylesheet'&gt;     &lt;script type=\"text\/javascript\" src=\"https:\/\/media.twiliocdn.com\/sdk\/js\/sync\/v2.0\/twilio-sync.min.js\"&gt;&lt;\/script&gt;     &lt;script src='https:\/\/sdk.twilio.com\/js\/video\/releases\/2.15.0\/twilio-video.min.js'&gt;&lt;\/script&gt;     &lt;title&gt;Video Collaboration with Notes&lt;\/title&gt;   &lt;\/head&gt;<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;body&gt;. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;form&gt;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043c\u043d\u0430\u0442\u0435.<\/p>\n<pre><code class=\"xml\">  &lt;body class='bg-grey-100 p-10 flex flex-wrap container'&gt;     &lt;form id='login' class='w-full max-h-20 flex items-center py-2'&gt;         &lt;input class='appearance-none bg-transparent border-b border-green-500 mr-3 py-1 px-2 focus:outline-none'             id='identity' type='text' placeholder='Enter your name...' required&gt;         &lt;button id='joinOrLeaveRoom' class='bg-green-500 hover:bg-green-700 text-white py-1 px-4 rounded' type='submit'&gt;           Join Video Call         &lt;\/button&gt;     &lt;\/form&gt;     &lt;textarea id='notepad' class='h-44 w-full shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt; <\/code><\/pre>\n<p>\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;textarea&gt;. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"xml\">    &lt;\/form&gt;     &lt;textarea disabled id='notepad' class='bg-gray-200 h-140 w-6\/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 &lt;textarea&gt; \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;div&gt; \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432\u0438\u0434\u0435\u043e&nbsp; \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432:<\/p>\n<pre><code class=\"xml\">    &lt;textarea disabled id='notepad' class='bg-gray-200 h-140 w-6\/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt;     &lt;div id='container' class='w-5\/12  bg-green-100'&gt;       &lt;div id='participantsContainer'&gt;         &lt;div id='localParticipant'&gt;           &lt;div id='localVideoTrack' class='participant'&gt;&lt;\/div&gt;         &lt;\/div&gt;         &lt;div id='remoteParticipants'&gt;           &lt;!-- Remote participants will be added here as they join the call --&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u043e \u0432\u0438\u0434\u0435\u043e \u043a\u043e\u0434.<\/p>\n<h3>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 index.js \u0432 \u0441\u0432\u043e\u0451\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0447\u0442\u043e \u043a \u044d\u0442\u0438\u043c \u0442\u043e\u043a\u0435\u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d SyncGrant. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e, \u0432\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f VideoGrant.<\/p>\n<p>\u041f\u043e\u0434 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043e\u0439 \u0434\u043b\u044f SyncGrant \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0434\u043b\u044f VideoGrant. \u041f\u043e\u043a\u0430 \u0432\u044b \u0432 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c JSON \u0438\u0437 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 express.json():<\/p>\n<pre><code class=\"javascript\">const AccessToken = require('twilio').jwt.AccessToken; const SyncGrant = AccessToken.SyncGrant; const VideoGrant = AccessToken.VideoGrant;  app.use(express.json());<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c \u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0438\u043c\u044f \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 POST. \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 VideoGrant \u043a \u0442\u043e\u043a\u0435\u043d\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u0430.<\/p>\n<pre><code class=\"javascript\">app.post('\/token', async (req, res) =&gt; {   if (!req.body.identity || !req.body.room) {     return res.status(400);   }    \/\/ Get the user's identity from the request   const identity = req.body.identity;    \/\/ Create a 'grant' identifying the Sync service instance for this app.   const syncGrant = new SyncGrant({       serviceSid: process.env.TWILIO_SYNC_SERVICE_SID   });    \/\/ Create a video grant   const videoGrant = new VideoGrant({     room: req.body.room   })    \/\/ Create an access token which we will sign and return to the client,   \/\/ containing the grant we just created and specifying their identity.   const token = new AccessToken(       process.env.TWILIO_ACCOUNT_SID,       process.env.TWILIO_API_KEY_SID,       process.env.TWILIO_API_KEY_SECRET,   );    token.addGrant(syncGrant);   token.addGrant(videoGrant);   token.identity = identity;    \/\/ Serialize the token to a JWT string and include it in a JSON response   res.send({       identity: identity,       token: token.toJwt()   }); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u0442\u043e\u043a\u0435\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043a \u0432\u0438\u0434\u0435\u043e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0440\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434 \u0432\u0438\u0434\u0435\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432<\/h3>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 public\/index.html \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u0434 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0442\u0435\u0433\u0435 &lt;script&gt; \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0430\u0439\u043b\u0430. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u043d\u043e\u0442. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e \u0442\u043e\u043a\u0435\u043d \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u0434\u0451\u0442 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u0438 \u043d\u0430\u0436\u043c\u0451\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abJoin Video Call\u00bb \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u0417\u0430\u0442\u0435\u043c \u044d\u0442\u043e\u0442 \u0442\u043e\u043a\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0443 \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0443. \u0427\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0432\u0430\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 notepad \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;script&gt;   const notepad = document.getElementById('notepad');   const localVideoTrack = document.getElementById('localVideoTrack');   const login = document.getElementById('login');   const identityInput = document.getElementById('identity');   const joinLeaveButton = document.getElementById('joinOrLeaveRoom');   const localParticipant = document.getElementById('localParticipant');   const remoteParticipants = document.getElementById('remoteParticipants');    let connected = false;   let room;   let syncDocument;   let twilioSyncClient;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d \u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0443. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e addLocalVideo \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"javascript\">  const addLocalVideo = async () =&gt; {     const videoTrack = await Twilio.Video.createLocalVideoTrack();     const trackElement = videoTrack.attach();     localVideoTrack.appendChild(trackElement);   };<\/code><\/pre>\n<p>\u0412\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0430\u0439\u043b\u0430, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c &lt;script&gt;:<\/p>\n<pre><code class=\"xml\">  addLocalVideo(); &lt;\/script&gt;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u0438\u043c\u0435\u043d\u0435\u043c connectOrDisconnect, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abJoin Video Call\u00bb. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0449\u0451 \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d \u043a \u0437\u0432\u043e\u043d\u043a\u0443, \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442 \u0438\u0445. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d, \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442 \u0435\u0433\u043e. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 addLocalVideo:<\/p>\n<pre><code class=\"javascript\">  const connectOrDisconnect = async (event) =&gt; {     event.preventDefault();     if (!connected) {       const identity = identityInput.value;       joinLeaveButton.disabled = true;       joinLeaveButton.innerHTML = 'Connecting...';        try {         await connect(identity);       } catch (error) {         console.log(error);         alert('Failed to connect to video room.');         joinLeaveButton.innerHTML = 'Join Video Call';         joinLeaveButton.disabled = false;       }     }     else {       disconnect();     }   };<\/code><\/pre>\n<p>\u041d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c &lt;script&gt; \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432 \u0444\u043e\u0440\u043c\u0443 \u0432\u0445\u043e\u0434\u0430. \u042d\u0442\u043e\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c connectOrDisconnect \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043e\u0440\u043c\u0443:<\/p>\n<pre><code class=\"javascript\">  \/\/ Add listener   notepad.addEventListener('keyup', (event) =&gt; {      \/\/ Define array of triggers to sync (space, enter, and punctuation)     \/\/ Otherwise sync will fire every time     const syncKeys = [32, 13, 8, 188, 190];      if (syncKeys.includes(event.keyCode)) {       syncNotepad(twilioSyncClient);     }   })    login.addEventListener('submit', connectOrDisconnect);<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0431\u043b\u043e\u043a fetch(&#8216;\/token&#8217;) \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043c\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 \u0444\u043e\u0440\u043c\u0443, \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442 \u044d\u0442\u043e\u0433\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442:<\/p>\n<pre><code class=\"javascript\">  const connect = async (identity) =&gt; {     const response = await fetch('\/token', {       method: 'POST',       headers: {         'Content-Type': 'application\/json',       },       body: JSON.stringify({'identity': identity, room: 'My Video Room'})     });      const data = await response.json();     const token = data.token;      \/\/ Set up sync document     twilioSyncClient = new Twilio.Sync.Client(token);     notepad.disabled = false;     notepad.classList.remove('bg-gray-200');      syncDocument = await twilioSyncClient.document('notepad');      \/\/ Load the existing Document     notepad.value = syncDocument.data.content || '';      \/\/ Listen to updates on the Document     syncDocument.on('updated', (event) =&gt; {        \/\/ Update the cursor position       let cursorStartPos = notepad.selectionStart;       let cursorEndPos = notepad.selectionEnd;        notepad.value = event.data.content;        \/\/ Reset the cursor position       notepad.selectionEnd = cursorEndPos;        console.log('Received Document update event. New value:', event.data.content);     })      \/\/ Set up the video room     room = await Twilio.Video.connect(token);      const identityDiv = document.createElement('div');     identityDiv.setAttribute('class', 'identity');     identityDiv.innerHTML = identity;     localParticipant.appendChild(identityDiv);      room.participants.forEach(participantConnected);     room.on('participantConnected', participantConnected);     room.on('participantDisconnected', participantDisconnected);     connected = true;      joinLeaveButton.innerHTML = 'Leave Video Call';     joinLeaveButton.disabled = false;     identityInput.style.display = 'none';   }; <\/code><\/pre>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u043a \u0437\u0432\u043e\u043d\u043a\u0443, \u044d\u0442\u0430 \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043c\u043d\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f room. \u0412\u0438\u0434\u0435\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u0432\u0438\u0434\u0435\u043e\u0432\u0441\u0442\u0440\u0435\u0447\u0435 \u0438\u043b\u0438 \u0432\u044b\u0439\u0434\u0443\u0442 \u0438\u0437 \u043d\u0435\u0451. \u041a\u043d\u043e\u043f\u043a\u0430 \u00abJoin Video Call\u00bb \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u00abLeave Video Call\u00bb, \u0430 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u0438\u043c\u0435\u043d\u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u044b\u0442\u043e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435:<\/p>\n<pre><code class=\"javascript\">const disconnect = () =&gt; {     room.disconnect();      let removeParticipants = remoteParticipants.getElementsByClassName('participant');      while (removeParticipants[0]) {       remoteParticipants.removeChild(removeParticipants[0]);     }      joinLeaveButton.innerHTML = 'Join Video Call';     connected = false;     identityInput.style.display = 'inline-block';     localParticipant.removeChild(localParticipant.lastElementChild);          syncDocument.close();     twilioSyncClient = null;     notepad.value = '';     notepad.disabled = true;     notepad.classList.add('bg-gray-200');   }; <\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f disconnect \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430 \u043e\u0442 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abLeave Video Call\u00bb. \u041e\u043d\u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430 \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043d\u043e\u0432\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 false, \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0438\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430, \u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u00abLeave Video Call\u00bb \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u00abJoin Video Call\u00bb. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0438\u0449\u0435\u043d \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0442\u043e-\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u043e\u0442 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430, \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u043b\u044e\u0447\u0451\u043d \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043a \u0437\u0432\u043e\u043d\u043a\u0443 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043d\u0435\u0433\u043e. \u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 ParticipantConnected, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u043e\u0432\u044b\u0439 &lt;div&gt; \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0438 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u044f \u0438\u0445 \u0432\u0438\u0434\u0435\u043e \u0438 \u0430\u0443\u0434\u0438\u043e\u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043a &lt;div&gt;, \u0435\u0441\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u043d\u0438\u0445.<\/p>\n<p>\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u043f\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435, \u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u043c\u0438\u0441\u044f \u043a \u0430\u0443\u0434\u0438\u043e- \u0438 \u0432\u0438\u0434\u0435\u043e\u0434\u043e\u0440\u043e\u0436\u043a\u0430\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0430\u0443\u0434\u0438\u043e- \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u043e\u0440\u043e\u0436\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e participantConnected \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0432\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 public\/index.html:<\/p>\n<pre><code class=\"javascript\">  const participantConnected = (participant) =&gt; {     const participantDiv = document.createElement('div');     participantDiv.setAttribute('id', participant.sid);     participantDiv.setAttribute('class', 'participant');      const tracksDiv = document.createElement('div');     participantDiv.appendChild(tracksDiv);      const identityDiv = document.createElement('div');     identityDiv.setAttribute('class', 'identity');     identityDiv.innerHTML = participant.identity;     participantDiv.appendChild(identityDiv);      remoteParticipants.appendChild(participantDiv);      participant.tracks.forEach(publication =&gt; {       if (publication.isSubscribed) {         trackSubscribed(tracksDiv, publication.track);       }     });     participant.on('trackSubscribed', track =&gt; trackSubscribed(tracksDiv, track));     participant.on('trackUnsubscribed', trackUnsubscribed);   }; <\/code><\/pre>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e ParticipantDisconnected \u0434\u043b\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u043f\u043e\u043a\u0438\u0434\u0430\u0435\u0442 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043e\u043a. \u042d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430 \u043f\u043e \u0435\u0433\u043e sid (\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443) \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0435\u0433\u043e div \u0438\u0437 DOM. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e participantDisconnected \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0434 \u0432\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 ParticipantConnected:<\/p>\n<pre><code class=\"javascript\">  const participantDisconnected = (participant) =&gt; {     document.getElementById(participant.sid).remove();   };<\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0430\u0443\u0434\u0438\u043e- \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430 \u0438\u043b\u0438 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043d\u0438\u0445. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 trackSubscribed \u0438 trackUnsubscribed \u0432 public\/index.html \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f participantDisconnected:<\/p>\n<pre><code class=\"javascript\">  const trackSubscribed = (div, track) =&gt; {     const trackElement = track.attach();     div.appendChild(trackElement);   };    const trackUnsubscribed = (track) =&gt; {     track.detach().forEach(element =&gt; {       element.remove()     });   };<\/code><\/pre>\n<p>\u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u0441 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0430\u0439\u0442, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435, \u0441 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u043e\u043c \u0441\u043b\u0435\u0432\u0430 \u0438 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430 \u0441\u043f\u0440\u0430\u0432\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b98\/7bb\/3b8\/b987bb3b8edc182bce23a4c21b99008c.png\" width=\"800\" height=\"628\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u00abJoin Video Call\u00bb. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u043f\u043e\u0434 \u0432\u0438\u0434\u0435\u043e. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0435. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/ \u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u0435\u0441\u044c \u043a \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0443 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0434\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0438 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u043e\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce6\/882\/2dc\/ce68822dc1fd2b564878637d854cdc48.png\" width=\"800\" height=\"638\"><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0432\u0435\u0434\u0451\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<h3>\u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438?<\/h3>\n<p>\u0423 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439: \u043e\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0438\u0441\u044c\u043c\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0434\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u0438\u0434\u0435\u043e\u0432\u0441\u0442\u0440\u0435\u0447\u0438. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434, \u043f\u0440\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 \u044d\u0442\u043e\u0433\u043e <a href=\"https:\/\/github.com\/adjeim\/video-note-collab\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/a> GitHub.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442 \u0432 \u0432\u0435\u0431\u0435. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0435\u0431 \u0432 \u0441\u0438\u043b\u0443 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043e\u043d \u0434\u0430\u0432\u043d\u043e \u0443\u0436\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u0438\u043f\u0435\u0440\u0442\u0435\u043a\u0441\u0442\u043e\u043c \u2014 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043d\u0430\u0443\u0447\u043d\u044b\u0445 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0430 \u0437\u0430\u0440\u0435 \u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043e\u0442 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0448 \u043a\u0443\u0440\u0441 \u043e <a href=\"https:\/\/skillfactory.ru\/frontend?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FR&amp;utm_term=regular&amp;utm_content=300621\">Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/a>, \u0430 \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c \u0438 \u0435\u0441\u0442\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u0435\u0442\u044c \u0433\u043b\u0443\u044e\u0436\u0435, \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u0443\u0440\u0441\u0443 \u043e <a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FPW&amp;utm_term=regular&amp;utm_content=300621\">Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/a> \u043d\u0430 Python, \u0433\u0434\u0435 \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0432\u0441\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0430\u0440\u044c\u0435\u0440\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u043c \u044f\u0437\u044b\u043a\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8f9\/fdc\/3f8\/8f9fdc3f8dfad3a664d2e2fc28b8ba8d.png\" width=\"1000\" height=\"200\"><figcaption><\/figcaption><\/figure>\n<p><a href=\"https:\/\/skillfactory.ru\/courses\/?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_ALLCOURSES&amp;utm_term=regular&amp;utm_content=300621\">\u0423\u0437\u043d\u0430\u0439\u0442\u0435<\/a>, \u043a\u0430\u043a \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0438&nbsp;\u0432&nbsp;\u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u0445 \u0438\u043b\u0438 \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u0445&nbsp;\u0441&nbsp;\u043d\u0443\u043b\u044f:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/dstpro?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DSPR&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Data Scientist<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/dataanalystpro?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DAPR&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Data Analyst<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/skillfactory.ru\/dataengineer?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DEA&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u043f\u043e&nbsp;Data Engineering<\/a><\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0438 \u0438 \u043a\u0443\u0440\u0441\u044b<\/summary>\n<div class=\"spoiler__content\">\n<p><strong>\u041f\u0420\u041e\u0424\u0415\u0421\u0421\u0418\u0418<\/strong><\/p>\n<ul>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/python-fullstack-web-developer?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FPW&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Fullstack-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430&nbsp;Python<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/java?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_JAVA&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Java-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/java-qa-engineer?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_QAJA&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f QA-\u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u043d\u0430&nbsp;JAVA<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/frontend?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FR&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/cybersecurity?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_HACKER&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u042d\u0442\u0438\u0447\u043d\u044b\u0439 \u0445\u0430\u043a\u0435\u0440<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/cplus?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_CPLUS&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f C++ \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/game-dev?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_GAMEDEV&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0433\u0440 \u043d\u0430&nbsp;Unity<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/webdev?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_WEBDEV&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/iosdev?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_IOSDEV&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441&nbsp;\u043d\u0443\u043b\u044f<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/android?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_ANDR&amp;utm_term=regular&amp;utm_content=300621\">\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441&nbsp;\u043d\u0443\u043b\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041a\u0423\u0420\u0421\u042b<\/strong><\/p>\n<ul>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/ml-programma-machine-learning-online?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_ML&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u043f\u043e&nbsp;Machine Learning<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/ml-and-dl?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_MLDL&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u00abMachine Learning \u0438&nbsp;Deep Learning\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/math-stat-for-ds#syllabus?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_MAT&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u00ab\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0434\u043b\u044f Data Science\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/math_and_ml?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_MATML&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u00ab\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0438&nbsp;Machine Learning \u0434\u043b\u044f Data Science\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/python-for-web-developers?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_PWS&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u00abPython \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/algo?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_algo&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u00ab\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0438&nbsp;\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445\u00bb<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/analytics?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_SDA&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u043f\u043e&nbsp;\u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/p>\n<\/li>\n<li>\n<p>  <a href=\"https:\/\/skillfactory.ru\/devops?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_DEVOPS&amp;utm_term=regular&amp;utm_content=300621\">\u041a\u0443\u0440\u0441 \u043f\u043e&nbsp;DevOps<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/565450\/\"> https:\/\/habr.com\/ru\/company\/skillfactory\/blog\/565450\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0432\u0430\u0448\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043b\u044e\u0434\u0435\u0439 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0430\u0442 \u043d\u0443\u0436\u0435\u043d \u0432\u0447\u0435\u0440\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043d\u0443\u043b\u044f \u0443\u0436\u0435 \u043f\u043e\u0437\u0434\u043d\u043e. \u0412 \u044d\u0442\u043e\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0442\u0430\u0440\u0442\u0443 \u043a\u0443\u0440\u0441\u0430 \u043e <a href=\"https:\/\/skillfactory.ru\/frontend?utm_source=infopartners&amp;utm_medium=habr&amp;utm_campaign=habr_FR&amp;utm_term=regular&amp;utm_content=300621\">Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/a>, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Twilio. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0434\u0432\u0435 \u0432\u0435\u0442\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 Github, \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0447\u0430\u0442\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c \u0432 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435, \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u2014 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0430\u0442\u0430.<\/p>\n<hr>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h3>\n<p>\u0427\u0442\u043e \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0443\u0447\u0451\u0442\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c Twilio. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0435\u0441\u044c <a href=\"https:\/\/www.twilio.com\/referral\/D4tqHM\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 10 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0440\u0435\u0434\u0438\u0442\u0430 Twilio \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u0443\u044e \u0443\u0447\u0451\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> (\u0432\u0435\u0440\u0441\u0438\u044f 14.16.1 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435) \u0438 <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0438\u0437 <a href=\"https:\/\/github.com\/adjeim\/video-note-collab.git\">\u044d\u0442\u043e\u0433\u043e<\/a> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043a\u043e\u0434 \u0432\u0438\u0434\u0435\u043e\u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u043e\u0434, \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435, \u0433\u0434\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0442\u043a\u0443 <a href=\"https:\/\/github.com\/adjeim\/video-note-collab\/tree\/start\">start<\/a>:<\/p>\n<pre><code class=\"bash\">git clone -b start https:\/\/github.com\/adjeim\/video-note-collab.git<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">cd video-note-collab npm install<\/code><\/pre>\n<p>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b .env \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u044b \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">cp .env.template .env <\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b .env \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0438\u043c\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<pre><code class=\"bash\">TWILIO_ACCOUNT_SID TWILIO_SYNC_SERVICE_SID TWILIO_API_KEY_SID TWILIO_API_KEY_SECRET<\/code><\/pre>\n<p>\u041d\u0430\u0439\u0442\u0438 \u0441\u0432\u043e\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 Twilio, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Twilio Sync Service \u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 Twilio API Keys. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 TWILIO_SYNC_SERVICE_SID \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SID \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u0432\u0435\u043b\u0438 \u0441\u0432\u043e\u0438 \u0443\u0447\u0451\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 Express:<\/p>\n<pre><code class=\"bash\">npm start<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/ \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0443:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u0431\u0440\u0430\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u0432 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0435. \u041f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u0430, \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u0432\u043e\u0434\u0430 \u0438\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u0440\u0435\u043f\u0438\u043d\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u0432\u0442\u043e\u0440\u043e\u0435 \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/localhost:3000\/ \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043d\u0438\u0445, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u042d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <a href=\"https:\/\/www.twilio.com\/docs\/sync\">Twilio Sync<\/a> \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0417\u0434\u0435\u0441\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 Sync, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f notepad. \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f Sync \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u0415\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 &lt;textarea&gt;. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/p>\n<p>\u0418\u0434\u0435\u044f \u0437\u0434\u0435\u0441\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 \u0438\u0434\u0435\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a Google Docs \u0438\u043b\u0438 Notion. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c <a href=\"https:\/\/www.twilio.com\/sync\/use-cases\">\u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c <\/a>\u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443<\/p>\n<h3>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043c\u0430\u043a\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u2014 \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 public\/index.html \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e Tailwind CSS \u0438 Twilio Sync \u0443\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;head&gt;, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Twilio Video, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"xml\">&lt;html&gt;   &lt;head&gt;     &lt;meta name='viewport' content='width=device-width, initial-scale=1.0' \/&gt;     &lt;link href='https:\/\/unpkg.com\/tailwindcss@^2\/dist\/tailwind.min.css' rel='stylesheet'&gt;     &lt;script type=\"text\/javascript\" src=\"https:\/\/media.twiliocdn.com\/sdk\/js\/sync\/v2.0\/twilio-sync.min.js\"&gt;&lt;\/script&gt;     &lt;script src='https:\/\/sdk.twilio.com\/js\/video\/releases\/2.15.0\/twilio-video.min.js'&gt;&lt;\/script&gt;     &lt;title&gt;Video Collaboration with Notes&lt;\/title&gt;   &lt;\/head&gt;<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;body&gt;. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;form&gt;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u043a\u043e\u043c\u043d\u0430\u0442\u0435.<\/p>\n<pre><code class=\"xml\">  &lt;body class='bg-grey-100 p-10 flex flex-wrap container'&gt;     &lt;form id='login' class='w-full max-h-20 flex items-center py-2'&gt;         &lt;input class='appearance-none bg-transparent border-b border-green-500 mr-3 py-1 px-2 focus:outline-none'             id='identity' type='text' placeholder='Enter your name...' required&gt;         &lt;button id='joinOrLeaveRoom' class='bg-green-500 hover:bg-green-700 text-white py-1 px-4 rounded' type='submit'&gt;           Join Video Call         &lt;\/button&gt;     &lt;\/form&gt;     &lt;textarea id='notepad' class='h-44 w-full shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt; <\/code><\/pre>\n<p>\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;textarea&gt;. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"xml\">    &lt;\/form&gt;     &lt;textarea disabled id='notepad' class='bg-gray-200 h-140 w-6\/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 &lt;textarea&gt; \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;div&gt; \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432\u0438\u0434\u0435\u043e&nbsp; \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432:<\/p>\n<pre><code class=\"xml\">    &lt;textarea disabled id='notepad' class='bg-gray-200 h-140 w-6\/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1\/2'&gt;&lt;\/textarea&gt;     &lt;div id='container' class='w-5\/12  bg-green-100'&gt;       &lt;div id='participantsContainer'&gt;         &lt;div id='localParticipant'&gt;           &lt;div id='localVideoTrack' class='participant'&gt;&lt;\/div&gt;         &lt;\/div&gt;         &lt;div id='remoteParticipants'&gt;           &lt;!-- Remote participants will be added here as they join the call --&gt;         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432, \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u043e \u0432\u0438\u0434\u0435\u043e \u043a\u043e\u0434.<\/p>\n<h3>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 index.js \u0432 \u0441\u0432\u043e\u0451\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0447\u0442\u043e \u043a \u044d\u0442\u0438\u043c \u0442\u043e\u043a\u0435\u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d SyncGrant. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e, \u0432\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f VideoGrant.<\/p>\n<p>\u041f\u043e\u0434 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043e\u0439 \u0434\u043b\u044f SyncGrant \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 \u0434\u043b\u044f VideoGrant. \u041f\u043e\u043a\u0430 \u0432\u044b \u0432 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0430\u0440\u0441\u0438\u0442\u044c JSON \u0438\u0437 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 express.json():<\/p>\n<pre><code class=\"javascript\">const AccessToken = require('twilio').jwt.AccessToken; const SyncGrant = AccessToken.SyncGrant; const VideoGrant = AccessToken.VideoGrant;  app.use(express.json());<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u0440\u043e\u0443\u0442\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c \u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0438\u043c\u044f \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u043c\u043d\u0430\u0442\u044b \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 POST. \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435 VideoGrant \u043a \u0442\u043e\u043a\u0435\u043d\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u0430.<\/p>\n<pre><code class=\"javascript\">app.post('\/token', async (req, res) =&gt; {   if (!req.body.identity || !req.body.room) {     return res.status(400);   }    \/\/ Get the user's identity from the request   const identity = req.body.identity;    \/\/ Create a 'grant' identifying the Sync service instance for this app.   const syncGrant = new SyncGrant({       serviceSid: process.env.TWILIO_SYNC_SERVICE_SID   });    \/\/ Create a video grant   const videoGrant = new VideoGrant({     room: req.body.room   })    \/\/ Create an access token which we will sign and return to the client,   \/\/ containing the grant we just created and specifying their identity.   const token = new AccessToken(       process.env.TWILIO_ACCOUNT_SID,       process.env.TWILIO_API_KEY_SID,       process.env.TWILIO_API_KEY_SECRET,   );    token.addGrant(syncGrant);   token.addGrant(videoGrant);   token.identity = identity;    \/\/ Serialize the token to a JWT string and include it in a JSON response   res.send({       identity: identity,       token: token.toJwt()   }); });<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448 \u0442\u043e\u043a\u0435\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043a \u0432\u0438\u0434\u0435\u043e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0440\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434 \u0432\u0438\u0434\u0435\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432<\/h3>\n<p>\u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432 public\/index.html \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u0434 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0442\u0435\u0433\u0435 &lt;script&gt; \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0430\u0439\u043b\u0430. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0442\u043e\u043a\u0435\u043d, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u043d\u043e\u0442. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0432 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e \u0442\u043e\u043a\u0435\u043d \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u0435\u0434\u0451\u0442 \u0441\u0432\u043e\u0451 \u0438\u043c\u044f \u0438 \u043d\u0430\u0436\u043c\u0451\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abJoin Video Call\u00bb \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u0417\u0430\u0442\u0435\u043c \u044d\u0442\u043e\u0442 \u0442\u043e\u043a\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u0443 \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0443. \u0427\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0432\u0430\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 notepad \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435:<\/p>\n<pre><code class=\"javascript\">&lt;script&gt;   const notepad = document.getElementById('notepad');   const localVideoTrack = document.getElementById('localVideoTrack');   const login = document.getElementById('login');   const identityInput = document.getElementById('identity');   const joinLeaveButton = document.getElementById('joinOrLeaveRoom');   const localParticipant = document.getElementById('localParticipant');   const remoteParticipants = document.getElementById('remoteParticipants');    let connected = false;   let room;   let syncDocument;   let twilioSyncClient;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u0447\u0430\u0441\u0442\u044f\u043c \u0432\u0438\u0434\u0435\u043e\u0447\u0430\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d \u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0443. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e addLocalVideo \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0432\u044b\u0448\u0435:<\/p>\n<pre><code class=\"javascript\">  const addLocalVideo = async () =&gt; {     const videoTrack = await Twilio.Video.createLocalVideoTrack();     const trackElement = videoTrack.attach();     localVideoTrack.appendChild(trackElement);   };<\/code><\/pre>\n<p>\u0412\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0430\u0439\u043b\u0430, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c &lt;script&gt;:<\/p>\n<pre><code class=\"xml\">  addLocalVideo(); &lt;\/script&gt;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u0438\u043c\u0435\u043d\u0435\u043c connectOrDisconnect, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0433\u0434\u0430<\/p>\n<\/p>\n<\/hr>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-325779","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=325779"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325779\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}