Είναι το WebRTC χωρίς κανένα διακομιστή που δεν είναι καν δυνατός διακομιστής σηματοδότησης

Περίληψη

Το WebRTC είναι μια σουίτα εξαρτημάτων που επιτρέπει στα μέσα ενημέρωσης σε πραγματικό χρόνο και στα κανάλια δεδομένων μεταξύ των προγραμμάτων περιήγησης. Ωστόσο, απαιτεί ακόμα μια υπηρεσία backend για ορισμένες λειτουργίες. Σε αυτό το άρθρο, θα διερευνήσουμε τους λόγους για τους οποίους είναι απαραίτητη μια υπηρεσία backend, τα στοιχεία και το υλικό που εμπλέκονται στη δημιουργία WebRTC, υποστηριζόμενων κωδικοποιητών ήχου και βίντεο και της σημασίας ενός καταλόγου και διακομιστή αναισθητοποίησης.

1. Τι είναι το webrtc?

Το WebRTC είναι μια σουίτα εξαρτημάτων που επιτρέπει στους προγραμματιστές να δημιουργούν μέσα ενημέρωσης σε πραγματικό χρόνο και κανάλια δεδομένων μεταξύ των προγραμμάτων περιήγησης. Δημιουργήθηκε από την Google και περιέχει βασικά στοιχεία που αποστέλλονται σε Chrome, Firefox, Opera και Microsoft Edge (ORTC).

2. Γιατί χρειάζεστε ακόμα μια υπηρεσία backend?

Παρά τις δυνατότητες του WebRTC, απαιτείται υπηρεσία backend για ορισμένες λειτουργίες. Για παράδειγμα, για να καλέσετε κάποιον, πρέπει να γνωρίζετε τη διεύθυνσή τους, η οποία είναι συνήθως δυναμική. Αυτές οι πληροφορίες πρέπει να αποθηκευτούν και να διαχειριστούν σε διακομιστή. Επιπλέον, μια υπηρεσία backend μπορεί να παρακολουθεί όλες τις συσκευές για έναν χρήστη και να τους ειδοποιήσει για εισερχόμενες κλήσεις.

3. Ποια εξαρτήματα και υλικό εμπλέκονται στη δημιουργία WebRTC?

Το WebRTC βοηθά στη δημιουργία του φυσικού περιβάλλοντος, όπως κάμερες, ηχεία και μικρόφωνα, καθώς και άλλα υλικό όπως η ακύρωση Echo και το υλικό ακύρωσης φόντου. Βοηθά επίσης στη διαμόρφωση του δικτύου χρησιμοποιώντας αναισθητοποίηση (Utilities Session Traversal Utilities για NAT).

4. Ποιοι κωδικοποιητές ήχου υποστηρίζονται από το WebRTC?

Το WebRTC υποστηρίζει διάφορους κωδικοποιητές ήχου, συμπεριλαμβανομένων των G711, ILBC και OPUS. Το Opus είναι ένας μεταβλητής κωδικοποιητή υψηλής ποιότητας που χρησιμοποιείται ευρέως στο WebRTC.

5. Ποιοι κωδικοποιητές βίντεο υποστηρίζονται από το WebRTC?

Το WebRTC υποστηρίζει τους κωδικοποιητές VP8 και VP9, ​​οι οποίοι είναι παραλλαγές χωρίς δικαιώματα της Google του H.264/h.265. Υποστηρίζει επίσης h.264.

6. Γιατί οι κωδικοποιητές ήχου είναι σημαντικοί στο WebRTC?

Οι κωδικοποιητές ήχου χειρίζονται εργασίες, όπως απώλεια πακέτων, κωδικοποίηση και αποκωδικοποίηση ήχου, διόρθωση σφαλμάτων, ακύρωση θορύβου, ακύρωση ηχώ και ισοπέδωση όγκου. Συμβάλλουν στη δημοτικότητα του WebRTC σε κινητές συσκευές και επιτραπέζιους υπολογιστές.

7. Ποιος είναι ο κατάλογος του ποιος είναι διαθέσιμος για κλήση?

Για να ξεκινήσετε μια κλήση, πρέπει να γνωρίζετε τη διεύθυνση του παραλήπτη. Ο κατάλογος χρησιμεύει ως δυναμικές λευκές σελίδες, επιτρέποντας στους χρήστες να κάνουν check in με διακομιστή και να παρέχουν στοιχεία επικοινωνίας. Αυτό μπορεί να εφαρμοστεί χρησιμοποιώντας XMPP, SIP ή προσαρμοσμένα πρωτόκολλα.

8. Γιατί χρειάζεστε έναν διακομιστή αναισθητοποίησης?

Ένας διακομιστής αναισθητοποίησης (Session Traversal Utilities for NAT) βοηθά στον προσδιορισμό της εξωτερικής διεύθυνσης IP μιας συσκευής και ελέγχει εάν δύο συσκευές μπορούν να επικοινωνήσουν απευθείας. Διαδραματίζει κρίσιμο ρόλο στην καθιέρωση συνδέσεων μεταξύ των συνομηλίκων.

9. Τι είναι ένας διακομιστής στροφών?

Εάν μια συνεδρία από ομοτίμους δεν είναι δυνατή λόγω περιορισμών τείχους προστασίας, απαιτείται στροφή (Traversal aless Around Nat) Server. Βοηθά στην αναμετάδοση δεδομένων μεταξύ συσκευών παρακάμπτοντας περιορισμούς τείχους προστασίας.

10. Γιατί πρέπει να εξετάσετε τη χρήση μιας υπηρεσίας backend όπως το Sinch?

Η δημιουργία και η διατήρηση διακομιστών για σηματοδότηση, αναισθητοποίηση και στροφή μπορεί να είναι πολύπλοκες και ακριβές. Το Sinch, ως πάροχος υπηρεσιών backend, προσφέρει κλιμακούμενες και οικονομικά αποδοτικές λύσεις. Χειρίζονται ένα δισεκατομμύριο λεπτά ετησίως και παρέχουν βελτιστοποιημένα SDK WebRTC για διαφορετικές συσκευές και συνθήκες δικτύου.

11. Είναι μόνο το webrtc για το backend?

Όχι, το WebRTC περιλαμβάνει πτυχές Frontend και Backend. Το Sinch, για παράδειγμα, προσαρμόζει και ρυθμίζει το WebRTC SDK για να εξασφαλίσει τη βέλτιστη απόδοση σε συσκευές και συνθήκες δικτύου. Εφαρμόζουν χαρακτηριστικά όπως το Adaptive Opus για την προσαρμογή της ποιότητας εγγραφής με βάση τις μετρήσεις ποιότητας από την κυκλοφορία.

12. Ποια είναι τα οφέλη από τη χρήση του Sinch?

Το Sinch προσφέρει εμπειρογνωμοσύνη σε επικοινωνίες σε πραγματικό χρόνο και παρέχει προσαρμοσμένες SDK WebRTC, βελτιστοποιημένους κωδικοποιητές και κατανεμημένο δίκτυο. Η τιμολόγησή τους για τη μεταφορά δεδομένων είναι οικονομικά αποδοτική και εξασφαλίζουν επικοινωνία χαμηλής καθυστέρησης μέσω διακομιστών στρατηγικά εντοπισμού.

13. Πόσο αξιοσημείωτη είναι η καθυστέρηση του δικτύου σε μια συνομιλία?

Περίπου 250ms καθυστέρησης δικτύου είναι αξιοσημείωτη κατά τη διάρκεια μιας συνομιλίας. Παράγοντες όπως η καθυστέρηση του δικτύου, ο χρόνος επεξεργασίας και η κωδικοποίηση δεδομένων μπορούν να συμβάλουν στη συνολική λανθάνουσα κατάσταση.

14. Ποιες λειτουργίες παρέχει μια υπηρεσία backend στο WebRTC?

Μια υπηρεσία backend χειρίζεται εργασίες, όπως διαχείριση καταλόγων, σηματοδότηση, διαχείριση αναισθητοποίησης και μετατρέπει τη διαχείριση διακομιστών και παρακολούθηση συσκευών για χρήστες.

15. Τι κάνει το WebRTC δημοφιλές σε κινητές συσκευές και επιτραπέζιους υπολογιστές?

Η υποστήριξη της WebRTC για κωδικοποιητές ήχου και βίντεο, μαζί με την ευκολία χρήσης και τις δυνατότητες σε πραγματικό χρόνο, συμβάλλει στη δημοτικότητά του σε κινητές συσκευές και επιτραπέζιους υπολογιστές.

Είναι το WebRTC χωρίς κανένα διακομιστή που δεν είναι καν δυνατός διακομιστής σηματοδότησης

Στη συνέχεια, ανοίξτε δύο καρτέλες στο πρόγραμμα περιήγησής σας (ή σε δύο διαφορετικά προγράμματα περιήγησης) και εισάγετε Localhost: 7000. Όπως αναφέρθηκε προηγουμένως, είναι καλύτερο να έχετε δύο κάμερες διαθέσιμες για αυτό το παράδειγμα για εργασία. Εάν όλα πάνε καλά, θα πρέπει να δείτε μια ροή βίντεο σε κάθε μία από τις καρτέλες.

WebRTC και γιατί χρειάζεστε ακόμα μια υπηρεσία backend

Γίνετε μέλος της κοινότητας DZone και λάβετε την πλήρη εμπειρία μέλους.

Αυτό το άρθρο εμφανίστηκε αρχικά στο blog Sinch από τον Christian Jensen.

Τι είναι το webrtc?

Το WebRTC είναι μια σουίτα εξαρτημάτων που βασίζονται σε μερικές καινοτομίες από εταιρείες που αγόρασε το Google το 2010. Το WebRTC επιτρέπει σε έναν προγραμματιστή να δημιουργήσει μέσα ενημέρωσης σε πραγματικό χρόνο και κανάλια δεδομένων μεταξύ δύο προγραμμάτων περιήγησης (ή κινητά, αν τα καταρτίσετε για αυτό). Περιέχει μερικά βασικά συστατικά και όλα αποστέλλονται σε Chrome, Firefox και Opera, και μια έκδοση του IT υπάρχει στη Microsoft’S New Browser Edge (ORTC).

Ρύθμιση ροών δεδομένων και υλικού

Το WebRTC βοηθά στη δημιουργία τόσο του φυσικού περιβάλλοντος (όπως κάμερες, ηχεία και μικρόφωνα) όσο και άλλο υλικό (όπως η ακύρωση της ηχούς και το υλικό ακύρωσης φόντου – αυτά που θα βρείτε κυρίως σε κινητά τηλέφωνα), καθώς και βοηθώντας να καταλάβετε το δίκτυο μαζί με την αναισθητοποίηση.

Κωδικοποιητές ήχου και κωδικοποιητές βίντεο

Ένα από τα κύρια οφέλη που χρησιμοποιούν το WebRTC έναντι άλλου λογισμικού όταν ασχολείστε με τον ήχο και το βίντεο σε πραγματικό χρόνο είναι οι κωδικοποιητές ανοιχτού κώδικα/δικαιώματα που είναι αρκετά ευγενικοί για την αποστολή.

Κωδικοποιητές ήχου

• G711, που χρησιμοποιείται σε κανονικά τηλεφωνικά δίκτυα
• ILBC, παλιά κωδικοποιημένη στενή ζώνη, που χρησιμοποιείται επίσης σε τηλεφωνικά δίκτυα
• Opus, μια μεταβλητή υψηλής ποιότητας και (υποστήριξη για προσαρμοστικό) κωδικοποιητή που είναι ο νεότερος στον κωδικοποιητή που χρησιμοποιείται στο WebRTC.

Υπάρχουν περισσότερα αποστέλλονται, αλλά αυτά είναι τα κύρια και τα πιο ευρέως χρησιμοποιούμενα.

Κωδικοποιητές βίντεο

• VP8 και σύντομα VP9, ​​αυτό είναι το Google’η παραλλαγή ενός ελεύθερου δικαιώματος h.264/h.265 κωδικοποιητής
• H.264 (Προστέθηκε το 2015 ως συμφωνία για το ORTC)

Οι κωδικοποιητές ήχου κάνουν πολλά από τα έργα για εσάς, φροντίζοντας την απώλεια πακέτων, την κωδικοποίηση και την αποκωδικοποίηση του ήχου, τη διόρθωση σφαλμάτων, την ακύρωση του θορύβου, την ακύρωση ηχώ, την ισοπέδωση όγκου και άλλα. Το γεγονός ότι περιέχει κωδικοποιητές το καθιστά επίσης εξαιρετικά δημοφιλές σε κινητές συσκευές και επιτραπέζιους υπολογιστές.

Έτσι, τώρα μπορώ να φτιάξω τη δική μου κλήση με βάση το πρόγραμμα περιήγησης στο Pure JavaScript χρησιμοποιώντας (προσθέστε το αγαπημένο σας πλαίσιο JS Side Client JS). Δυστυχώς, αυτό’Δεν είναι τόσο απλό για να δημιουργήσετε μια κλήση, αφού υπάρχουν δύο βασικά πράγματα που λείπουν εδώ.

Κατάλογος του ποιος είναι διαθέσιμος για κλήση (ή ανακάλυψη από ομοτίμους)

Προκειμένου να καλέσετε κάποιον, πρέπει να γνωρίζετε τη διεύθυνση και σε αντίθεση με τους κανονικούς αριθμούς τηλεφώνου, η διεύθυνση στο Διαδίκτυο είναι κυρίως δυναμικές διευθύνσεις IP. Για να το λύσετε αυτό, πρέπει να διατηρήσετε την καταγραφή του πού είναι όλοι. Αυτό μπορεί να γίνει με διάφορους τρόπους χρησιμοποιώντας XMPP, SIP, προσαρμοσμένα πρωτόκολλα κ.λπ., Αλλά όλα βράζουν σε αυτό που ο καθένας είναι έτοιμος να λάβει μια κλήση ελέγχου με έναν διακομιστή με τον ένα ή τον άλλο τρόπο και επιτρέπει στον διακομιστή να γνωρίζει πώς να επικοινωνήσει με αυτόν τον ομότιμο (υπονοείται για περαιτέρω παράδοση προσφοράς/πρόσκλησης/SDP κ.λπ.·.

Σκεφτείτε το ως μια εντελώς δυναμική λευκή σελίδες. Αυτό γίνεται συνήθως σε χρονικά διαστήματα για να διατηρήσετε τείχη προστασίας ή παρόμοια ανοιχτά για τον διακομιστή σηματοδότησης για να ειδοποιήσετε τον πελάτη εάν κάποιος θέλει να επικοινωνήσει μαζί του. Έτσι, αυτό είναι το πρώτο κομμάτι που χρειάζεστε για να χτίσετε πάνω από αυτό.

Στη συνέχεια, πιθανότατα θέλετε να παρακολουθείτε όλες τις συσκευές για έναν συγκεκριμένο χρήστη και να τις ενημερώσετε για όλες τις συσκευές εάν υπάρχει κλήση. Χρησιμοποιώντας το Sinch, φροντίζουμε αυτό το μέρος για εσάς.

Διακομιστής αναισθητοποίησης

Αφού ο διακομιστής σηματοδότησης σας εντοπίσει μια συσκευή και στέλνει μια προσφορά, χρειάζεστε έναν διακομιστή αναισθητοποίησης. Ο διακομιστής αναισθητοποίησης θα διευκολύνει τον προσδιορισμό της εξωτερικής σας διεύθυνσης IP καθώς και αν οι δύο (ή περισσότερες) συσκευές μπορούν να μιλήσουν απευθείας στον άλλον. Ο Sinch θα φροντίσει και αυτό για εσάς.

Διακομιστής αναμετάδοσης πολυμέσων (διακομιστής Turn)

Εάν δεν είναι δυνατή μια συνεδρία από ομοτίμους (Peer-to-Peer. Ο διακομιστής Turn θα μετατοπίσει βασικά τα κομμάτια για εσάς μέσω ανοιχτών οπών στο τείχος προστασίας μεταξύ των δύο πελατών. Γιατί συμβαίνει αυτό? Το πιο συνηθισμένο είναι τα ασύμμετρα τείχη προστασίας και η δυνατότητα να χτυπήσουν τρύπες σε διαφορετικές θύρες στα τείχη προστασίας.

Εντάξει, αλλά γιατί ο Ντον’Το έβαλα αυτό τον εαυτό μου?

Λοιπόν, θα μπορούσατε. Αυτό μπορεί να είναι λίγο υπερβολική και θα απαιτείται μια ακόμη ικανότητα στην ομάδα λειτουργίας σας. Οι διακομιστές της σειράς και των αναισθητοποίησης σας πιθανότατα θα είναι σε μεγάλο βαθμό χρησιμοποιούμενες και ακριβές. Και εδώ μπαίνουν τα κλιμακωτά οικονομικά. Δεδομένου ότι η Sinch κάνει πάνω από ένα δισεκατομμύριο λεπτά ετησίως, η τιμολόγησή μας για μεταφορά δεδομένων είναι φθηνότερη από ό, τι οι περισσότερες εταιρείες μπορούν να πάρουν.

Πιθανότατα θέλετε να έχετε επίσης ένα κατανεμημένο δίκτυο. Εάν για παράδειγμα έχετε τον διακομιστή σας στο U στο U.μικρό. Και οι κλήσεις συνεχίζονται μεταξύ των πελατών στην Ευρώπη, θα προσθέσετε λανθάνουσα κατάσταση μόνο και μόνο επειδή όλες οι επισημάνσεις πρέπει να διασχίσουν τον ωκεανό. Ένας καλός κανόνας είναι ότι περίπου 250ms είναι αξιοσημείωτο σε μια συνομιλία (περισσότερες πληροφορίες ποιότητας υπηρεσίας εδώ). Έτσι, χωρίς να προσθέσετε καμία καθυστέρηση δικτύου στον πελάτη και χρόνο επεξεργασίας για να κωδικοποιήσετε τα δεδομένα, είστε βασικά εγγυημένοι ότι έχετε υπερβολική καθυστέρηση μεταξύ των πελατών.

Είναι μόνο για το backend?

Το’όχι μόνο για το backend. Στο Sinch έχουμε τεράστια εμπειρία επικοινωνιών σε πραγματικό χρόνο και προσαρμόζουμε και διαμορφώνουμε το WebRTC SDK για να λειτουργήσουμε το καλύτερο σε όλες τις συσκευές και σε διαφορετικές συνθήκες δικτύων. Μερικά παραδείγματα είναι η εφαρμογή προσαρμοστικού Opus, το οποίο θα προσαρμόσει την ποιότητα εγγραφής με βάση τις μετρήσεις ποιότητας από την κυκλοφορία μας. Γνωρίζουμε επίσης ποιοι κωδικοποιητές θα χρησιμοποιηθούν σε συγκεκριμένες συνθήκες και ποιοι θα επιλέξουν για να ελαχιστοποιηθούν.

Δημοσιεύθηκε στο DZone με άδεια του Christian Jensen . Δείτε το αρχικό άρθρο εδώ.

Οι απόψεις που εκφράζονται από τους συνεισφέροντες της Dzone είναι δικές τους.

Είναι το WebRTC χωρίς κανένα διακομιστή που δεν είναι καν δυνατός διακομιστής σηματοδότησης?

Προσπαθώ να ρυθμίσω ένα plugin A Cordova για iOS που εφαρμόζει τις λειτουργίες WebRTC χωρίς να χρησιμοποιεί κανένα διακομιστή και θα το κάνει να χρησιμοποιηθεί μόνο σε ένα τοπικό δίκτυο. Ξέρω ότι υπάρχει αυτό το plugin, το οποίο φαίνεται πολλά, αλλά έχω κάποια προβλήματα με αυτό. Το σχέδιό μου δεν είναι να χρησιμοποιήσω ένα trun, αναισθητοποίηση ή οποιοδήποτε είδος διακομιστή σηματοδότησης. Ίσως νομίζετε τώρα: “Εντάξει, αυτό δεν είναι δυνατό. Καμία σηματοδότηση δεν ισούται με σύνδεση.“Αλλά επιτρέψτε μου να εξηγήσω πρώτα. Όπως επισημάνθηκε εδώ και εδώ είναι δυνατόν να αποφύγετε τη χρήση ενός διακομιστή Trun, Sund ή Ice. Νομίζω ότι αυτός είναι ένας καλός τρόπος για να ξεκινήσω το έργο μου, αλλά υπάρχει ακόμα μια ανοιχτή ερώτηση. Πώς θα βρίσκουν οι συσκευές ο ένας τον άλλον εάν δεν υπάρχει καμία σηματοδότηση (στο παράδειγμα χρησιμοποιούν έναν κόμβο.Διακομιστής JS)? Αυτή τη στιγμή παίζω με την ιδέα ενός κώδικα QR που περιέχει όλες τις απαραίτητες πληροφορίες. Στο τέλος θα πρέπει να μοιάζει με αυτό (το Black Arrwos είναι πιο σημαντικό): η ιδέα είναι ότι όλοι όσοι μπαίνουν σε ένα δωμάτιο πρέπει να σαρώσουν έναν κώδικα QR στην RP και στη συνέχεια η συσκευή γνωρίζει το IP, τη θύρα κ.λπ. της σύνδεσης RP και WebRTC με ένα Datachannel θα δημιουργηθεί. Έχω ψάξει για μια απάντηση για μέρες τώρα, αλλά λόγω του γεγονότος (ή τουλάχιστον ένας από τους λόγους) ότι το WebRTC δεν υποστηρίζεται καν σε iOS Nativly δεν υπάρχουν πολλά παραδείγματα WebRTC εκεί έξω που δουλεύουν σε iOS και κανέναν για ένα τοπικό δίκτυο. Έτσι, η ερώτησή μου είναι: Είμαι με τον σωστό τρόπο ή δεν είναι ακόμη δυνατό? (Δεν βρήκα κανένα παράδειγμα για αυτό οπουδήποτε, αλλά αν έβαλα όλες τις θέσεις που διάβασα μαζί, νομίζω ότι πρέπει να είναι δυνατόν.·

ρώτησε 10 Αυγούστου 2017 στις 12:38

3,257 3 3 χρυσά κονκάρδες 11 11 ασημένια κονκάρδες 19 19 χάλκινα κονκάρδες

Δεν έχει σημασία πώς επιλύετε την ανακάλυψη, αλλά για να δημιουργήσετε μια σύνδεση WebRTC, πρέπει να λάβετε την προσφορά και να απαντήσετε σε μηνύματα μεταξύ των συνομηλίκων με κάποιο τρόπο. Αυτά τα μηνύματα περιέχουν αυτόματα υποψηφίους πάγου, αν περιμένετε να ολοκληρωθεί η συγκέντρωση πάγου. Δείτε το StackOverflow.com/a/29056385/918910.

WebRTC: Ένα παράδειγμα εργασίας

Πρόσφατα έπρεπε να χρησιμοποιήσω το WebRTC για ένα απλό έργο. Η ίδια η τεχνολογία έχει πολλά πλεονεκτήματα και αναπτύσσεται ως ανοιχτό πρότυπο, χωρίς την ανάγκη για προσθήκες. Ωστόσο, ήμουν αρκετά νέος στο WebRTC και είχα κάποια προβλήματα να πάρει το κεφάλι μου γύρω από τις βασικές έννοιες, καθώς και τη δημιουργία μιας λύσης εργασίας. Υπάρχουν πολλά μαθήματα (όπως αυτό, το οποίο ενέπνευσε τη λύση μου). Αλλά οι περισσότεροι από αυτούς είναι ελλιπείς, παρωχημένοι ή με ανάγκασαν να χρησιμοποιήσω κάποιες υπηρεσίες τρίτων (e.σολ. Google Firebase), το οποίο έκανε μόνο όλη τη διαδικασία πιο περίπλοκη για τη ρύθμιση και πιο δύσκολο να κατανοηθεί.

Αποφάσισα να συγκεντρώσω τις πληροφορίες από όλους αυτούς τους πόρους και να δημιουργήσω ένα απλό, λειτουργικό παράδειγμα μιας εφαρμογής WebRTC. Δεν απαιτεί υπηρεσίες τρίτου μέρους εκτός αν θέλετε να το χρησιμοποιήσετε σε ένα δημόσιο δίκτυο (σε αυτή την περίπτωση που η κατοχή ενός διακομιστή θα βοηθήσει πραγματικά). Ελπίζω ότι θα δώσει ένα καλό σημείο εκκίνησης για όλους όσους ενδιαφέρονται να εξερευνήσουν το WebRTC.

Αυτό δεν πρόκειται να είναι ένα πλήρες σεμινάριο της τεχνολογίας WebRTC. Μπορείτε να βρείτε πολλά μαθήματα και λεπτομερείς εξηγήσεις σε όλο το Διαδίκτυο, για παράδειγμα εδώ. Μπορείτε επίσης να ελέγξετε το API WebRTC εάν θέλετε περισσότερες πληροφορίες. Αυτή η ανάρτηση πρόκειται απλώς να σας δείξει ένα πιθανό παράδειγμα εργασίας του WebRTC και να εξηγήσετε πώς λειτουργεί.

Γενική περιγραφή

Ο πλήρης πηγαίος κώδικας αυτού του παραδείγματος είναι διαθέσιμος στο GitHub. Το πρόγραμμα αποτελείται από τρία μέρη:

• εφαρμογή ιστού
• διακομιστής σηματοδότησης
• Μετατρέψτε τον διακομιστή

ο εφαρμογή ιστού είναι πολύ απλό: ένα αρχείο HTML και ένα αρχείο JavaScript (συν μία εξάρτηση: πρίζα.IO.JS, που περιλαμβάνεται στο χώρο αποθήκευσης). Έχει σχεδιαστεί για να λειτουργεί μόνο με δύο πελάτες (δύο προγράμματα περιήγησης ιστού ή δύο καρτέλες του ίδιου προγράμματος περιήγησης). Μόλις το ανοίξετε στο πρόγραμμα περιήγησής σας (δοκιμασμένο στο Firefox 74), θα ζητήσει άδεια χρήσης της κάμερας και του μικροφώνου σας. Μόλις χορηγηθεί η άδεια, το βίντεο και ο ήχος από κάθε μία από τις καρτέλες θα μεταδοθούν στο άλλο.

Σημείωση: Μπορεί να αντιμετωπίσετε κάποια προβλήματα εάν προσπαθήσετε να αποκτήσετε πρόσβαση στην ίδια κάμερα από τις δύο καρτέλες. Στη δοκιμή μου, εγώ’Χρησιμοποίησε δύο συσκευές κατά τη δοκιμή στο μηχάνημά μου (μια ενσωματωμένη κάμερα φορητού υπολογιστή και μια κάμερα USB).

ο διακομιστής σηματοδότησης χρησιμοποιείται από τις εφαρμογές WebRTC για την ανταλλαγή πληροφοριών που απαιτούνται για τη δημιουργία άμεσης σύνδεσης μεταξύ των συνομηλίκων. Μπορείτε να επιλέξετε οποιαδήποτε τεχνολογία που θέλετε για αυτό. Αυτό το παράδειγμα χρησιμοποιεί websockets (Python-socketio στο backend και πρίζα.IO-client στο Frontend).

ο ΣΤΡΟΦΗ Ο διακομιστής απαιτείται εάν θέλετε να χρησιμοποιήσετε αυτό το παράδειγμα σε ένα δημόσιο δίκτυο. Η διαδικασία περιγράφεται περαιτέρω σε αυτήν την ανάρτηση. Για τοπικές δοκιμές δικτύου, δεν θα το χρειαστείτε.

Σηματοδότηση

Ο διακομιστής σηματοδότησης είναι γραμμένος στο Python3 και μοιάζει με αυτό:

Από το aiohttp import web import socketio room = 'room' sio = socketio.Asyncserver (cors_allowed_origins = '*') app = web.Εφαρμογή () SIO.Attach (App) @sio.Event Async Def Connect (SID, Environ): Εκτύπωση ('Connected', SID) Περιμένετε SIO.Emit ('ready', δωμάτιο = δωμάτιο, skip_sid = sid) sio.enter_room (sid, δωμάτιο) @sio.Αποσυνδέστε το Event Def (SID): SIO.Leave_room (Sid, Room) Print ('Disconnected', Sid) @sio.Εκδήλωση ASYNC DEF DATA (SID, Δεδομένα): Εκτύπωση ('Μήνυμα από <>: <>'.Μορφή (SID, DATA)) Περιμένετε SIO.Emit ('DATA', DATA, ROOM = ROOM, SKIP_SID = SID) Εάν __name__ == '__main__': Web.run_app (app, port = 9999)

Κάθε πελάτης ενώνει το ίδιο δωμάτιο. Πριν εισέλθετε στο δωμάτιο, α έτοιμος Η εκδήλωση αποστέλλεται σε όλους τους πελάτες που βρίσκονται σήμερα στο δωμάτιο. Αυτό σημαίνει ότι η πρώτη σύνδεση websocket δεν θα λάβει κανένα μήνυμα (το δωμάτιο είναι άδειο), αλλά όταν δημιουργηθεί η δεύτερη σύνδεση, η πρώτη θα λάβει ένα έτοιμος εκδήλωση, σηματοδοτώντας ότι υπάρχουν τουλάχιστον δύο πελάτες στο δωμάτιο και η σύνδεση WebRTC μπορεί να ξεκινήσει. Εκτός από αυτό, αυτός ο διακομιστής θα διαβιβάσει οποιαδήποτε δεδομένα (δεδομένα εκδήλωση) που αποστέλλεται από ένα websocket στο άλλο.

Η ρύθμιση είναι αρκετά απλή:

CD σηματοδότηση PIP Εγκατάσταση Aiohttp Python-Socketio Python Server.ΡΥ

Αυτό θα ξεκινήσει τον διακομιστή σηματοδότησης στο Localhost: 9999.

Webrtc

Η απλοποιημένη διαδικασία χρήσης του WebRTC σε αυτό το παράδειγμα μοιάζει με αυτό:

• Και οι δύο πελάτες λαμβάνουν τις τοπικές ροές των μέσων ενημέρωσης
• Μόλις ληφθεί το ρεύμα, κάθε πελάτης συνδέεται με τον διακομιστή σηματοδότησης
• Μόλις συνδεθεί ο δεύτερος πελάτης, ο πρώτος λαμβάνει ένα έτοιμος εκδήλωση, που σημαίνει ότι μπορεί να διαπραγματευτεί η σύνδεση WebRTC
• Ο πρώτος πελάτης δημιουργεί ένα αντικείμενο RTCPEerconnection και στέλνει μια προσφορά στον δεύτερο πελάτη
• Ο δεύτερος πελάτης λαμβάνει την προσφορά, δημιουργεί ένα αντικείμενο RTCPEerconnection και στέλνει μια απάντηση
• Περισσότερες πληροφορίες ανταλλάσσονται επίσης, όπως οι υποψήφιοι πάγου
• Μόλις διαπραγματευτεί η σύνδεση, καλείται μια επανάκληση για λήψη απομακρυσμένης ροής και αυτό το ρεύμα χρησιμοποιείται ως πηγή του βίντεο στοιχείο.

Εάν θέλετε να εκτελέσετε αυτό το παράδειγμα στο LocalHost, ο διακομιστής σηματοδότησης και η εφαρμογή Web είναι το μόνο που χρειάζεστε. Το κύριο μέρος του αρχείου HTML είναι ένα ενιαίο στοιχείο βίντεο (το οποίο η πηγή πρόκειται να ρυθμιστεί αργότερα από το σενάριο):

Το μέρος JavaScript είναι λίγο πιο περίπλοκο και εγώ’θα το εξηγήσω βήμα προς βήμα. Πρώτον, υπάρχουν οι μεταβλητές config:

// Config μεταβλητές const signaling_server_url = 'http: // localhost: 9999'; const pc_config = <>;

Για localhost, PC_CONFIG μπορεί να παραμείνει άδειος και Σηματοδότηση_server_url θα πρέπει να σας δείξει τον διακομιστή σηματοδότησης’Ξεκίνησε στο προηγούμενο βήμα.

Στη συνέχεια, έχουμε τις μεθόδους σηματοδότησης:

αφήστε την υποδοχή = io (σηματοδότηση_SERVER_URL, < autoConnect: false >) πρίζα.στο ('δεδομένα', (δεδομένα) => < console.log('Data received: ',data); handleSignalingData(data); >) πρίζα.στο ('έτοιμο', () => < console.log('Ready'); createPeerConnection(); sendOffer(); >) Αφήστε το sendData = (δεδομένα) => < socket.emit('data', data); >;

Σε αυτό το παράδειγμα, θέλουμε να συνδεθούμε στον διακομιστή σηματοδότησης μόνο αφού λάβουμε την τοπική ροή μέσων, οπότε πρέπει να ορίσουμε . Εκτός από αυτό, έχουμε ένα senddata μέθοδος που εκπέμπει α δεδομένα εκδήλωση και αντιδρούμε στο δεδομένα εκδήλωση με το χειρισμό των εισερχόμενων πληροφοριών κατάλληλα (περισσότερα για αυτό αργότερα). Επίσης, λαμβάνοντας ένα έτοιμος Η εκδήλωση σημαίνει ότι και οι δύο πελάτες έχουν λάβει τις τοπικές ροές μέσων ενημέρωσης και έχουν συνδεθεί με τον διακομιστή σηματοδότησης, ώστε να μπορέσουμε να δημιουργήσουμε μια σύνδεση από την πλευρά μας και να διαπραγματευτούμε μια προσφορά με την απομακρυσμένη πλευρά.

Αφήστε τον υπολογιστή. Αφήστε τους ντόπιους. Αφήστε το remoTeStreamElement = έγγραφο.querySelector ('#remotestream');

Αφήστε το getLocalSstream = () => < navigator.mediaDevices.getUserMedia(< audio: true, video: true >· .τότε ((ροή) => < console.log('Stream found'); localStream = stream; // Connect after making sure that local stream is availble socket.connect(); >· .Catch (σφάλμα => < 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'); >Catch (σφάλμα) < 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); >) >; Αφήστε το SetAndSendLocaldescription = (SessionDescription) => < pc.setLocalDescription(sessionDescription); console.log('Local description set'); sendData(sessionDescription); >;

αφήστε το onicecandidate = (συμβάν) => < if (event.candidate) < console.log('ICE candidate'); sendData(< type: 'candidate', candidate: event.candidate >) >>; αφήστε το oNADDSTREAM = (συμβάν) => < 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 Web Python -m HTTP.διακομιστής 7000

Sudo Apt Εγκατάσταση Coturn Turnserver -a -o -v -n -no -dtls -no -tls -u username: credential -r realmname

const turn_server_url = ': 3478'; const turn_server_username = 'username'; const turn_server_credential = '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 >]>;