האם WebRTC ללא שום שרת אפילו לא שרת איתות אפשרי

סיכום

WebRTC היא חבילת רכיבים המאפשרת ערוצי מדיה ונתונים בזמן אמת בין דפדפנים. עם זאת, זה עדיין דורש שירות Backend עבור פונקציות מסוימות. במאמר זה נבחן את הסיבות לכך ששירות Backend נחוץ, הרכיבים והחומרה המעורבים בהגדרת WebRTC, הקודקים של השמע והווידיאו הנתמכים, וחשיבותו של שרת ספרייה ושרת הלם.

1. מה זה webrtc?

WebRTC היא חבילה של רכיבים המאפשרת למפתחים להקים ערוצי מדיה ונתונים בזמן אמת בין הדפדפנים. זה נוצר על ידי גוגל ומכיל רכיבי מפתח שנשלחים ב- Chrome, Firefox, Opera ו- Microsoft Edge (ORTC).

2. מדוע אתה עדיין צריך שירות Backend?

למרות היכולות של WebRTC, שירות Backend נדרש לפונקציות מסוימות. לדוגמה, כדי להתקשר למישהו, אתה צריך לדעת את הכתובת שלו, שהיא בדרך כלל דינמית. מידע זה צריך להיות מאוחסן ולנהל בשרת. בנוסף, שירות Backend יכול לעקוב אחר כל המכשירים למשתמש ולהודיע ​​להם על שיחות נכנסות.

3. אילו רכיבים וחומרה מעורבים בהגדרת WEBRTC?

WebRTC עוזר בהקמת הסביבה הפיזית, כמו מצלמות, רמקולים ומיקרופונים, כמו גם חומרה אחרת כמו ביטול הד וחומרת ביטול רקע. זה גם מסייע בהגדרת התצורה של הרשת באמצעות Stun (Session Traversal Utilities עבור NAT).

4. אילו קודקי שמע נתמכים על ידי webrtc?

WEBRTC תומך בקודקי שמע שונים כולל G711, ILBC ו- OPUS. אופוס הוא קודקוד משתנה באיכות גבוהה הנמצא בשימוש נרחב ב- WebRTC.

5. אילו קודקים בווידיאו נתמכים על ידי Webrtc?

WEBRTC תומך ב- VP8 ו- VP9 Codecs, שהם הווריאציות ללא תמלוגים של גוגל של H.264/h.265. זה גם תומך ב- H.264.

6. מדוע קודקי שמע חשובים ב- WebRTC?

Codecs Audio מטפל במשימות כמו אובדן מנות, קידוד ופענוח של שמע, תיקון שגיאות, ביטול רעש, ביטול הד, ופילוס נפח. הם תורמים לפופולריות של WebRTC במכשירים ניידים ושולחנות עבודה ניידים.

7. מה הספרייה של מי זמין להתקשר?

על מנת להתחיל שיחה, עליך לדעת את הכתובת של הנמען. הספרייה משמשת כדפים לבנים דינאמיים, ומאפשרת למשתמשים לבצע צ’ק -אין עם שרת ולספק מידע ליצירת קשר. ניתן ליישם זאת באמצעות פרוטוקולים XMPP, SIP או מותאם אישית.

8. מדוע אתה זקוק לשרת הלם?

שרת Stun (Session Traversal Utilities עבור NAT) עוזר לקבוע את כתובת ה- IP החיצונית של מכשיר ובודק אם שני מכשירים יכולים לתקשר ישירות. זה ממלא תפקיד מכריע בקביעת קשרים בין עמיתים.

9. מהו שרת פנייה?

אם אין אפשרות להפעלה של עמיתים לעמית בגלל מגבלות חומת האש, יש צורך בתור (חצייה באמצעות ממסרים סביב NAT). זה עוזר להעביר נתונים בין מכשירים על ידי עקיפת מגבלות חומת אש.

10. מדוע שתשקול להשתמש בשירות Backend כמו sinch?

הגדרת ושמירה על שרתים לאיתות, הלם וסיבוב יכולה להיות מורכבת ויקרה. סינץ ‘, כספק שירותי Backend, מציע פתרונות מדרגיים וחסכוניים. הם מטפלים במיליארד דקות בשנה ומספקים SDKs WebRTC מיטביים למכשירים שונים ותנאי רשת שונים.

11. הוא webrtc רק על backend?

לא, webrtc כרוך בהיבטים חזיתיים וגם של Backend. SINCH, למשל, מתאים ומגדיר את התצורה של WEBRTC SDK כדי להבטיח ביצועים מיטביים בין מכשירים ותנאי רשת. הם מיישמים תכונות כמו Opus אדפטיביים כדי להתאים את איכות ההקלטה על בסיס מדדים איכותיים מתנועה.

12. מהם היתרונות של שימוש בסינץ ‘?

SINCH מציע מומחיות בתקשורת בזמן אמת ומספק SDKs WebRTC מותאמים אישית, קודקים אופטימליים ורשת מבוזרת. התמחור שלהם עבור העברת נתונים הוא חסכוני והם מבטיחים תקשורת עם חורבן נמוך באמצעות שרתים ממוקמים אסטרטגית.

13. כמה בולט חביון רשת בשיחה?

כ -250 מ ‘של חביון רשת מורגש במהלך שיחה. גורמים כמו חביון רשת, זמן עיבוד וקידוד נתונים יכולים לתרום לחביון הכללי.

14. אילו פונקציונליות מספק שירות Backend ב- WebRTC?

שירות Backend מטפל במשימות כגון ניהול ספריות, איתות, הלם והפנה לניהול שרת ומעקב אחר מכשירים למשתמשים.

15. מה הופך את WebRTC לפופולרי במכשירים ניידים ושולחן עבודה?

התמיכה של WebRTC בקודקי שמע ווידאו, יחד עם קלות השימוש ויכולות בזמן אמת, תורמת לפופולריות שלה במכשירים ניידים ושולחן עבודה ניידים.

האם WebRTC ללא שום שרת אפילו לא שרת איתות אפשרי

לאחר מכן, פתח שתי כרטיסיות בדפדפן שלך (או בשני דפדפנים שונים), והכניסה Localhost: 7000. כאמור, עדיף שיהיה שתי מצלמות זמינות לדוגמה זו לעבוד. אם הכל הולך טוב, אתה אמור לראות הוצאת וידאו אחת בכל אחת מהלשוניות.

Webrtc ולמה אתה עדיין צריך שירות Backend

הצטרף לקהילת Dzone וקבל את חווית החבר המלאה.

מאמר זה הופיע במקור בבלוג SINCH מאת כריסטיאן ג’נסן.

מה זה webrtc?

WebRTC היא חבילה של רכיבים המבוססים מכמה חידושים מחברות שגוגל קנתה בשנת 2010. WebRTC מאפשר למפתח להגדיר ערוצי מדיה ונתונים בזמן אמת בין שני דפדפנים (או מוביילים אם אתה מרכיב את זה בשביל זה). הוא מכיל כמה רכיבי מפתח וכולם נשלחים בכרום, פיירפוקס ואופרה, וגרסה שלה קיימת במיקרוסופט’S קצה הדפדפן החדש (ORTC).

הגדרת זרמי נתונים וחומרה

WebRTC מסייע בהגדרת גם את הסביבה הפיזית (כמו מצלמות, רמקולים ומיקרופונים) וחומרה אחרת (כגון ביטול הד וחומרת ביטול רקע – אלה שתמצאו בעיקר במוביילים), ובנוסף עוזרים להבין את הרשת יחד עם הלם.

קודקי שמע וקודקי וידאו

אחד היתרונות העיקריים המשתמשים ב- WebRTC על פני תוכנה אחרת כאשר התמודדות עם שמע ווידאו בזמן אמת הוא קוד פתוח/קודקים בחינם של גוגל חביבה מספיק כדי לשלוח.

Codecs Audio

• G711, המשמש ברשתות טלפון רגילות
• ILBC, מקודד פס צר ישן, המשמש גם ברשתות טלפון
• Opus, משתנה באיכות גבוהה ו (תמיכה בקודקוס אדפטיבי) שהוא החדש ביותר ב- Codec המשמש ב- WebRTC.

יש יותר נשלחים, אבל אלה העיקריים והכי נפוצים.

Codecs וידאו

• VP8 ובקרוב VP9, ​​זהו גוגל’וריאציה של H ללא תמלוגים H.264/h.265 Codec
• ח.264 (נוסף בשנת 2015 כהסכם ל- ORTC)

Codecs Audio עושים הרבה מהעבודה עבורך, דואגים לאובדן מנות, קידוד ופענוח של שמע, תיקון שגיאות, ביטול רעש, ביטול הד, פילוס נפח ועוד. העובדה שהוא מכיל Codecs גם הופכת אותו לפופולרי מאוד במכשירים ניידים ושולחנות עבודה.

אז עכשיו אני יכול לבנות שיחות מבוססות דפדפן משלי ב- JavaScript טהור באמצעות (הוסף כאן את מסגרת JS Side JS המועדפת עליך). למרבה הצער, זה’זה לא כל כך פשוט כדי לקבוע שיחה מכיוון שיש שני דברים עיקריים שחסרים כאן.

מדריך מי זמין להתקשר (או גילוי עמיתים)

כדי להתקשר למישהו, אתה צריך לדעת את הכתובת, ובניגוד למספרי טלפון רגילים, הכתובת באינטרנט היא בעיקר כתובות IP דינאמיות. כדי לפתור זאת, אתה צריך לרשום היכן כולם נמצאים. ניתן לעשות זאת במספר דרכים באמצעות XMPP, SIP, פרוטוקולים מותאמים אישית וכו ‘., אבל הכל מסתכם בכל מי שמוכן לקבל שיחה בודק עם שרת כך או אחרת, ומאפשר לשרת לדעת כיצד ליצור קשר עם אותו עמית (משתמע למשלוח נוסף של הצעה/הזמנה/SDP וכו ‘.).

חשוב על זה כדפים לבנים דינאמיים לחלוטין. זה נעשה בדרך כלל במרווחים מתוזמנים כדי לשמור על חומות אש או דומה לשרת האיתות להודיע ​​ללקוח אם מישהו רוצה לתקשר איתו. אז זו היצירה הראשונה שאתה צריך לבנות על זה.

בשלב הבא אתה בטח רוצה לעקוב אחר כל המכשירים למשתמש מסוים ולהודיע ​​להם בכל המכשירים אם יש שיחה. בעזרת סינץ ‘אנו דואגים לחלק זה עבורך.

שרת הלם

לאחר ששרת האיתות שלך איתר מכשיר ושולח הצעה, אתה זקוק לשרת הלם. שרת הלם יאפשר לקבוע את כתובת ה- IP החיצונית שלך, כמו גם אם שני המכשירים (או יותר) יכולים לדבר זה עם זה ישירות. סינץ ‘ידאג גם לך.

שרת ממסר מדיה (פנה שרת)

אם לא אפשרי הפעלה של עמיתים לעמית (הנתונים שלנו מצביעים על זה בסביבות 25% מהמפגשים), תזדקק לשרת פנייה. שרת הפנייה בעצם יעביר את החלקים עבורך דרך חורים פתוחים בחומת האש בין שני הלקוחות. למה זה קרה? הנפוץ ביותר הוא חומות אש א -סימטריות והאפשרות להכות חורים בנמלים שונים בחומות אש.

בסדר, אבל למה דון’אני מגדיר את זה בעצמי?

ובכן, אתה יכול. זה עשוי להיות קצת יתר על המידה, ועוד יכולת אחת בצוות הפעילות שלך תידרש. תורכם ושרתי הלם ככל הנראה יהיו תחת שימוש בכבדות ויקרים. וכאן נכנסת כלכלה מדרגית. מכיוון ש- SINC.

אתה בטח רוצה שתהיה גם רשת מבוזרת. אם למשל יש לך שרת התור שלך ב- U.ג. והשיחות נמשכות בין לקוחות באירופה, תוסיף חביון רק בגלל שכל התנועה צריכה לחצות את האוקיאנוס. כלל אצבע טוב הוא שסביבות 250 מ”מ מורגשת בשיחה (מידע יותר על מידע שירות כאן). לכן, מבלי להוסיף חביון רשת כלשהו על הלקוח וזמן העיבוד לקידוד הנתונים, אתה בעצם מובטח שיהיה לך יותר מדי חביון בין הלקוחות.

האם זה רק על Backend?

זה’לא רק על Backend. ב- SINCH יש לנו ניסיון רב של תקשורת בזמן אמת, ואנחנו מתאימים ומגדירים את התצורה של WEBRTC SDK שלנו כדי לעבוד בצורה הטובה ביותר בכל המכשירים ובתנאי רשתות שונות. כמה דוגמאות הן יישום אופוס אדפטיבי, אשר יתאים את איכות ההקלטה על בסיס מדדים איכותיים מהתנועה שלנו. אנו יודעים גם באילו קודקים להשתמש בנסיבות ספציפיות, ואילו לבחור כדי למזער את קידוד הניתוח והשהייה ברחבי העולם.

פורסם ב- Dzone באישור כריסטיאן ג’נסן . עיין במאמר המקורי כאן.

דעות שהביעו על ידי תורמי Dzone הם שלהם.

האם WebRTC ללא שום שרת אפילו לא שרת איתות אפשרי?

אני מנסה להגדיר תוסף קורדובה ל- iOS שממלא את פונקציות WebRTC מבלי להשתמש בשרת כלשהו וזה יעשה זאת יש להשתמש רק ברשת מקומית. אני יודע שיש את התוסף הזה, שנראה מבטיח אבל יש לי כמה בעיות עם זה. התוכנית שלי היא לא להשתמש בטרון, הלם או כל סוג של שרת איתות. אולי אתה חושב עכשיו: “בסדר זה לא אפשרי. אף איתות אינו שווה לחיבור.“אבל תן לי להסביר קודם. כפי שצוין כאן וכאן אפשר להימנע משימוש בשרת טרון, הלם או קרח. אני חושב שזו דרך טובה להתחיל את הפרויקט שלי אבל עדיין יש שאלה פתוחה. כיצד המכשירים ימצאו זה את זה אם אין איתות כלשהו (בדוגמה הם משתמשים בצומת.שרת JS)? כרגע אני משחק עם הרעיון של קוד QR המכיל את כל המידע הדרוש. בסוף זה צריך להיראות כך (Arrwos שחורים חשובים יותר): הרעיון הוא שכל מי שנכנס לחדר צריך לסרוק קוד QR ב- RP ואז המכשיר מכיר את ה- IP, היציאה וכו ‘. של ה- RP וחיבור WebRTC עם Datachannel יוקם. אני מחפש תשובה כבר ימים, אבל בגלל העובדה (או לפחות אחת הסיבות) ש- WebRTC אפילו לא נתמך ב- iOS באופן טבעי, אין הרבה דוגמאות webrtc בחוץ שעובדות על iOS ואף אחד לרשת מקומית. אז השאלה שלי היא: האם אני בדרך הנכונה או שזה אפילו לא אפשרי? (לא מצאתי דוגמה לכך בשום מקום, אבל אם אני שם את כל הפוסטים שקראתי יחד, אני חושב שזה אמור להיות אפשרי.)

שאל 10 באוגוסט 2017 בשעה 12:38

3,257 3 3 תגי זהב 11 11 תגי כסף 19 19 תגי ברונזה

לא משנה איך אתה פותר גילוי, אבל כדי ליצור חיבור WebRTC, אתה צריך לקבל את ההצעה ולענות על הודעות בין העמיתים איכשהו. ההודעות הללו מכילות אוטומטית מועמדים לקרח אם אתה מחכה לאיסוף הקרח שיסיים קודם. ראה StackOverflow.com/a/29056385/918910.

Webrtc: דוגמה עובדת

לאחרונה הייתי צריך להשתמש ב- WebRTC לפרויקט פשוט. לטכנולוגיה עצמה יתרונות רבים והיא מפותחת כסטנדרט פתוח, ללא צורך בתוספים כלשהם. עם זאת, הייתי די חדש ב- WebRTC והיו לי כמה בעיות להביא את הראש סביב המושגים הבסיסיים, כמו גם ליצור פיתרון עובד. ישנם הדרכות רבות זמינות (כמו זו, שהעניקה השראה לפיתרון שלי). אבל רובם לא שלמים, מיושנים או אילצו אותי להשתמש בכמה שירותי צד ג ‘(ה.ז. Google Firebase), מה שהפך את כל התהליך לסבך יותר להתקנה וקשה יותר להבנה.

החלטתי להרכיב את המידע מכל המשאבים האלה וליצור דוגמה פשוטה ועובדת ליישום WebRTC. זה לא דורש שירותי צד ג ‘אלא אם כן ברצונך להשתמש בהם ברשת ציבורית (ובמקרה זה הבעלות על שרת באמת תעזור). אני מקווה שזה יספק נקודת התחלה טובה לכל מי שמעוניין לחקור את Webrtc.

זה לא הולך להיות הדרכה מלאה לטכנולוגיית Webrtc. תוכלו למצוא שפע של הדרכות והסברים מפורטים בכל האינטרנט, למשל כאן. אתה יכול גם לבדוק את ה- API של WebRTC אם אתה רוצה מידע נוסף. הפוסט הזה רק הולך להראות לך דוגמה אחת אפשרית עבודה של webrtc ולהסביר איך זה עובד.

תיאור כללי

קוד המקור המלא של דוגמה זו זמין ב- GitHub. התוכנית מורכבת משלושה חלקים:

• אפליקציית רשת
• שרת איתות
• פנה לשרת

ה אפליקציית רשת הוא פשוט מאוד: קובץ HTML אחד וקובץ JavaScript אחד (בתוספת תלות אחת: שֶׁקַע.io.JS, הכלול במאגר). זה נועד לעבוד עם שני לקוחות בלבד (שני דפדפני אינטרנט או שתי כרטיסיות של אותו דפדפן). ברגע שתפתח אותו בדפדפן שלך (נבדק ב- Firefox 74), הוא יבקש אישור להשתמש במצלמה ובמיקרופון שלך. לאחר הענקת ההרשאה, הווידיאו והשמע מכל אחת מהלשוניות יוזרמו לזה האחר.

הערה: אתה עלול לחוות כמה בעיות אם תנסה לגשת לאותה מצלמה משתי הכרטיסיות. במבחן שלי, אני’VE השתמשה בשני מכשירים תוך כדי בדיקה במכונה שלי (מצלמת מחשב נייד מובנית ומצלמת רשת USB).

ה שרת איתות משמש על ידי יישומי WebRTC כדי להחליף מידע הנדרש ליצירת קשר ישיר בין עמיתים. אתה יכול לבחור כל טכנולוגיה שאתה רוצה בשביל זה. דוגמה זו משתמשת ב- WebSockets (Python-Socketio ב- Backend ו- שֶׁקַע.io-client בחזית).

ה לפנות שרת נדרש אם ברצונך להשתמש בדוגמה זו ברשת ציבורית. התהליך מתואר עוד יותר בפוסט זה. לבדיקות רשת מקומיות, לא תזדקק לכך.

איתות

שרת האיתות כתוב ב- Python3 ונראה כך:

מתוך AIOHTTP ייבוא ​​אינטרנט ייבוא ​​SOCKECTIO ROOM = 'ROOM' SIO = SOCKECTIO.AsyncServer (cors_lowed_origins = '*') app = web.יישום () sio.צרף (אפליקציה) @sio.Event Async Def Connect (SID, Environ): הדפס ('מחובר', SID) מחכה ל- SIO.פול ('מוכן', חדר = חדר, skip_sid = sid) sio.Enter_room (סיד, חדר) @sio.ניתוק אירועים (SID): SIO.Leave_room (Sid, Room) הדפס ('מנותק', Sid) @sio.Event Async Def Data (SID, נתונים): הדפס ('הודעה מ <>: <>'.פורמט (סיד, נתונים)) ממתין ל- SIO.פול ('נתונים', נתונים, חדר = חדר, skip_sid = sid) אם __name__ == '__MAIN__': WEB.run_app (אפליקציה, יציאה = 9999)

כל לקוח מצטרף לאותו חדר. לפני הכניסה לחדר, א מוּכָן האירוע נשלח לכל הלקוחות שנמצאים כעת בחדר. המשמעות היא שחיבור ה- WebSocket הראשון לא יקבל הודעה (החדר ריק), אך כאשר הקבוע החיבור השני, הראשון יקבל א מוּכָן אירוע, מאותת כי ישנם לפחות שני לקוחות בחדר והחיבור WebRTC יכול להתחיל. מלבד זאת, שרת זה יעביר כל נתונים (נתונים אירוע) שנשלח על ידי שקע אחד לשנייה.

ההתקנה די פשוטה:

איתות CD PIP התקן את AIOHTTT PYTHON-SOCKECTIO PYTHON SERVER.PY

זה יתחיל את שרת האיתות ב Localhost: 9999.

Webrtc

התהליך הפשוט של השימוש ב- WebRTC בדוגמה זו נראה כך:

• שני הלקוחות משיגים את זרמי המדיה המקומיים שלהם
• לאחר קבלת הזרם, כל לקוח מתחבר לשרת האיתות
• ברגע שהלקוח השני מתחבר, הראשון מקבל א מוּכָן אירוע, מה שאומר שניתן לנהל משא ומתן על חיבור WebRTC
• הלקוח הראשון יוצר אובייקט RTCPeerConnection ושולח הצעה ללקוח השני
• הלקוח השני מקבל את ההצעה, יוצר אובייקט RTCPeerConnection ושולח תשובה
• מידע נוסף מוחלף גם, כמו מועמדי קרח
• לאחר המשא ומתן על המשא ומתן על החיבור, נקרא קריאה חוזרת לקבלת זרם מרוחק, וזרם זה משמש כמקור ל וִידֵאוֹ אֵלֵמֶנט.

אם אתה רוצה להריץ דוגמה זו ב- LocalHost, שרת איתות ויישום האינטרנט הוא כל מה שאתה צריך. החלק העיקרי של קובץ HTML הוא אלמנט וידיאו יחיד (איזה מקור עומד להיות מוגדר מאוחר יותר על ידי הסקריפט):

חלק JavaScript הוא קצת יותר מסובך, ואני’להסביר את זה צעד אחר צעד. ראשית, ישנם משתני התצורה:

// משתנים config const signing_server_url = 'http: // localhost: 9999'; const pc_config = <>;

עבור Localhost, PC_CONFIG יכול להישאר ריק, ו איתות_שרון_רל צריך להצביע על שרת האיתות אתה’התחילה בשלב הקודם.

בשלב הבא יש לנו את שיטות האיתות:

תן Socket = IO (איתות_SERVER_URL, < autoConnect: false >); שֶׁקַע.ב ('נתונים', (נתונים) => < console.log('Data received: ',data); handleSignalingData(data); >); שֶׁקַע.ב ('מוכן', () => < console.log('Ready'); createPeerConnection(); sendOffer(); >); תן ל- SendData = (נתונים) => < socket.emit('data', data); >;

בדוגמה זו אנו רוצים להתחבר לשרת האיתות רק לאחר שנקבל את זרם המדיה המקומי, ולכן עלינו להגדיר . חוץ מזה, יש לנו לשלוח נתונים שיטה הפולטת א נתונים אירוע, ואנחנו מגיבים ל נתונים אירוע על ידי טיפול במידע הנכנס כראוי (עוד על כך בהמשך). כמו כן, קבלת א מוּכָן האירוע פירושו ששני הלקוחות השיגו את זרמי המדיה המקומיים שלהם והתחברו לשרת האיתות, כך שנוכל ליצור חיבור בצד שלנו ולנהל משא ומתן על הצעה עם הצד המרוחק.

תן למחשב; תן ל- LocalStream; תן ל- RemoteStreamElement = מסמך.QuerySelector ('#remotestream');

תן getLocalStream = () => < navigator.mediaDevices.getUserMedia(< audio: true, video: true >) .ואז ((זרם) => < console.log('Stream found'); localStream = stream; // Connect after making sure that local stream is availble socket.connect(); >) .לתפוס (שגיאה => < console.error('Stream not found: ', error); >); >

תן CreatePeerConnection = () => < try < pc = new RTCPeerConnection(PC_CONFIG); pc.onicecandidate = onIceCandidate; pc.onaddstream = onAddStream; pc.addStream(localStream); console.log('PeerConnection created'); >לתפוס (שגיאה) < console.error('PeerConnection failed: ', error); >>;

תן ל- SendOffer = () => < console.log('Send offer'); pc.createOffer().then( setAndSendLocalDescription, (error) => < console.error('Send offer failed: ', error); >); >; תן ל- SendAnswer = () => < console.log('Send answer'); pc.createAnswer().then( setAndSendLocalDescription, (error) => < console.error('Send answer failed: ', error); >); >; בואו setandsendlocaldescript < pc.setLocalDescription(sessionDescription); console.log('Local description set'); sendData(sessionDescription); >;

תן ל- OniceCandidate = (אירוע) => < if (event.candidate) < console.log('ICE candidate'); sendData(< type: 'candidate', candidate: event.candidate >); >>; תן ל- onAdddStream = (אירוע) => < console.log('Add stream'); remoteStreamElement.srcObject = event.stream; >;

תן ל- HandlesignalingData = (נתונים) => < switch (data.type) < case 'offer': createPeerConnection(); pc.setRemoteDescription(new RTCSessionDescription(data)); sendAnswer(); break; case 'answer': pc.setRemoteDescription(new RTCSessionDescription(data)); break; case 'candidate': pc.addIceCandidate(new RTCIceCandidate(data.candidate)); break; >>;

// התחל חיבור getLocalStream ();

CD Python -M HTTP.שרת 7000

sudo apt התקן coturn turnserver -a -o -v -n -no -dtls -no -tls -u שם משתמש: תעודה -R תחום

const turn_server_url = ': 3478'; const turn_server_username = 'שם משתמש'; const turn_server_credential = 'תעודה'; const pc_config = < iceServers: [ < urls: 'turn:' + TURN_SERVER_URL + '?transport=tcp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >, < urls: 'turn:' + TURN_SERVER_URL + '?transport=udp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >]>;