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

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

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

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

Για να ελέγξετε την τεχνολογία WebRTC στην υπόθεση και να εκτελέσετε μια απλή ηλεκτρονική εκπομπή σε αυτό, χρησιμοποιήσαμε το διακομιστή στο διακομιστή Flashphoner Webrtc Media & Broadcasting. Στα χαρακτηριστικά, τη δυνατότητα να μεταδίδουν ρεύματα WebRTC σε μία έως πολλές λειτουργίες "(one-to-maany), καθώς και υποστήριξη για τις κάμερες IP και τα συστήματα παρακολούθησης βίντεο μέσω του πρωτοκόλλου RTSP. Σε αυτή την αναθεώρηση, εστιάζουμε στην Web Broadcasts και τα χαρακτηριστικά τους.

Εγκατάσταση του διακομιστή WebRTC Media & Broadcasting

Δεδομένου ότι το σύστημα Server Version δεν ήταν για τα Windows, δεν ήθελε να εγκαταστήσει ένα VMWare + Linux Virtual Type, δοκιμάστε ηλεκτρονικές εκπομπές στο σπίτι του υπολογιστή που δεν λειτουργούσαν. Προκειμένου να εξοικονομήσετε χρόνο αποφασίσματος να λάβει περιπτώσεις σε ένα σύννεφο που φιλοξενεί έτσι:

Ήταν η έκδοση 6.5 Centos X86_64 χωρίς κανένα προ-εγκατεστημένο λογισμικό στο κέντρο δεδομένων του Άμστερνταμ. Έτσι, το μόνο που λάβαμε είναι διαθέσιμο είναι ο διακομιστής και η SSH πρόσβαση σε αυτό. Για όσους είναι εξοικειωμένοι με τις εντολές της κονσόλας Linux, η εγκατάσταση του διακομιστή WebRTC υπόσχεται να πάει εύκολη και ανώδυνα. Έτσι τι κάναμε:

1. Κατεβάστε το αρχείο:

$ wget https: //syt/download-wcs5-server.tar.gz

2. Ανοίγω τις αποσκευές

$ tar -xzf download-wcs5-server.tar.gz

3. Εγκαθιστώ:

$ Cd flashphonerwebcallserver.

Κατά τη διάρκεια της εγκατάστασης της εισαγωγής της διεύθυνσης IP του διακομιστή: xxx.xxx.xxx.xxx

4. Ενεργοποιήστε την άδεια:

$ Cd / usr / τοπικό / flashphonerwebccallserver / bin

$. / Activation.sh

5. Εκτελέστε διακομιστή WCS:

$ Service webcallserver start

6. Ελέγξτε το αρχείο καταγραφής:

$ tail - f /usr/local/flashphonerwebcallserver/logs/flashphoner_manager.log

7. Ελέγξτε ότι υπάρχουν δύο διαδικασίες:

$ PS AUX | Flashphoner GREP.

Η διαδικασία εγκατάστασης ολοκληρώνεται.

Δοκιμές WebRTC Online Broadcasts

Οι μεταδόσεις δοκιμών αποδείχθηκαν απροσδόκητες. Εκτός από το διακομιστή, υπάρχει ένας πελάτης ιστού που αποτελείται από μια δωδεκάδα αρχείων JavaScript, HTML και CSS και αναπτύχθηκε στο φάκελο / VAR / WWW / HTML στη φάση εγκατάστασης. Το μόνο που έπρεπε να γίνει είναι να εισαγάγετε τη διεύθυνση IP του διακομιστή για το Confighphphoner.xml έτσι ώστε ο υπολογιστής-πελάτης Web να μπορεί να συνδεθεί στο διακομιστή HTML5 Websockets. Περιγράφουμε τη διαδικασία δοκιμής.

1. Ανοίξτε τη σελίδα πελάτη δοκιμής Index.html στο πρόγραμμα περιήγησης Chrome:

2. Για να ξεκινήσετε την εκπομπή, πρέπει να κάνετε κλικ στο κουμπί "Έναρξη" στη μέση της οθόνης.
Πριν κάνετε, πρέπει να βεβαιωθείτε ότι η κάμερα web είναι συνδεδεμένη και έτοιμη να εργαστεί. Δεν υπάρχουν ειδικές απαιτήσεις για την κάμερα, για παράδειγμα, χρησιμοποιήσαμε την τυπική κάμερα που ενσωματώνεται στο φορητό υπολογιστή με ανάλυση 1280 × 800.

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

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

Δώστε προσοχή στη σύνδεση στο κάτω πεδίο. Περιέχει το μοναδικό αναγνωριστικό αυτού του νήματος, οπότε ο καθένας μπορεί να ενταχθεί στην προβολή. Αρκεί να ανοίξετε αυτόν τον σύνδεσμο στο πρόγραμμα περιήγησης. Για να το αντιγράψετε στο πρόχειρο, πρέπει να κάνετε κλικ στο κουμπί "Αντιγραφή".

Σε πραγματικές εφαρμογές, όπως οι webinars, οι διαλέξεις, οι ηλεκτρονικές εκπομπές ή οι διαδραστικοί προγραμματιστές τηλεόρασης θα πρέπει να εφαρμόσουν τη διανομή αυτού του αναγνωριστικού σε ορισμένες ομάδες θεατών προκειμένου να συνδεθούν με τις επιθυμητές ροές, αλλά αυτή είναι η λογική της εφαρμογής. Webrtc Media & Broadcasting Server Δεν επηρεάζει, αλλά διανέμει μόνο βίντεο.

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

TEBRTC Αποτελέσματα δοκιμών σε απευθείας σύνδεση διακομιστή μετάφρασης

Κατά τη διάρκεια των δοκιμών, η καθυστέρηση φαινόταν τέλεια. Το Ping στο κέντρο δεδομένων ανήλθε σε περίπου 100 χιλιοστά του δευτερολέπτου και η καθυστέρηση δεν ήταν διακρίσιμη από το μάτι. Από εδώ, μπορεί να θεωρηθεί ότι η πραγματική καθυστέρηση είναι η ίδια 100 συν μείον αρκετές δεκάδες χιλιοστόπεδους για τον καθορισμό χρόνου. Εάν συγκρίνετε με το Flash Video: Σε τέτοιες δοκιμές, το Flash δεν συμπεριφέρεται τόσο καλό όσο το Webrtc. Έτσι, αν σε ένα παρόμοιο δίκτυο για να μετακινήσετε το χέρι σας, τότε η κίνηση στην οθόνη μπορεί να δει μόνο μέσω ενός / δύο δευτερολέπτων.

Όσον αφορά την ποιότητα, σημειώνουμε ότι στις κινήσεις μερικές φορές μπορείτε να διακρίνετε κύβους. Αυτό αντιστοιχεί στη φύση του κωδικοποιητή VP8 και της κύριας εργασίας του - να παρέχει μια σύνδεση βίντεο σε πραγματικό χρόνο με αποδεκτή ποιότητα και χωρίς καθυστερήσεις στην επικοινωνία.

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

Η ποιότητα της εκπομπής αποδείχθηκε αρκετά αποδεκτή για webinars και ηλεκτρονικές εκπομπές. Το μόνο πράγμα που προκάλεσε κάποιες ερωτήσεις είναι η ανάλυση βίντεο. Η κάμερα υποστηρίζει 1280 × 800, αλλά η ανάλυση σχετικά με την εικόνα δοκιμής είναι πολύ παρόμοια με 640 × 480. Προφανώς, το ερώτημα αυτό πρέπει να αποσαφηνιστεί από τους προγραμματιστές.

Δοκιμές βίντεο που μεταδίδονται από την κάμερα Web
μέσω διακομιστή WEBRTC

Το WebRTC (Web Real Time Communications) είναι ένα πρότυπο που περιγράφει τη μετάδοση δεδομένων ήχου ροής, δεδομένων βίντεο και περιεχομένου από το πρόγραμμα περιήγησης και στο πρόγραμμα περιήγησης σε πραγματικό χρόνο χωρίς να εγκατασταθεί plug-ins ή άλλες επεκτάσεις. Το πρότυπο σάς επιτρέπει να ενεργοποιήσετε το πρόγραμμα περιήγησης στον ακροδέκτη τερματικού της τηλεδιάσκεψης βίντεο, ανοίξτε την ιστοσελίδα για να ξεκινήσετε την επικοινωνία.

Τι είναι το Webrtc;

Σε αυτό το άρθρο, θα εξετάσουμε όλα όσα πρέπει να γνωρίζετε για την τεχνολογία Webrtc για έναν συνηθισμένο χρήστη. Εξετάστε τα πλεονεκτήματα και τα μειονεκτήματα του έργου, αποκαλύψτε μερικά μυστικά, θα σας πούμε πώς λειτουργεί, πού και τι εφαρμόζεται ο Webrtc.

Τι πρέπει να ξέρετε για τον WebRTC;

Εξέλιξη προτύπων και τεχνολογιών βίντεο επικοινωνιών

Sergey Yutzaytis, Cisco, Video + Συνέδριο 2016

Πώς λειτουργεί webrtc

Στην πλευρά του πελάτη

• Ο χρήστης ανοίγει μια σελίδα που περιέχει ετικέτα HTML5
• Το πρόγραμμα περιήγησης ζητά πρόσβαση σε μια κάμερα webcam και το μικρόφωνο χρήστη.
• Ο κωδικός Javascript στη σελίδα χρήστη ελέγχει τις παραμέτρους σύνδεσης (διευθύνσεις IP και διακομιστή WebRTC ή άλλους πελάτες WebRTC) για παράκαμψη NAT και τείχος προστασίας.
• Κατά τη λήψη πληροφοριών σχετικά με τον συνομιλητή ή ένα ρεύμα με τη διάσκεψη, το πρόγραμμα περιήγησης αρχίζει να ταιριάζει με τους κωδικοποιημένους ήχου και βίντεο που χρησιμοποιούνται.
• Η διαδικασία κωδικοποίησης και μετάδοσης δεδομένων ροής μεταξύ των πελατών WebRTC (στην περίπτωσή μας, μεταξύ του προγράμματος περιήγησης και του διακομιστή) αρχίζει.

Στο πλάι του διακομιστή WebRTC

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

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

Επίσης, ο διακομιστής WebRTC θα λάβει κίνηση Media από WebRTC Peters και θα μεταφέρει στους συμμετέχοντες στη διάσκεψη που χρησιμοποιούν εφαρμογές για επιτραπέζιους υπολογιστές ή κινητές συσκευές, αν υπάρχουν.

Πλεονεκτήματα του προτύπου

• Δεν απαιτείται εγκατάσταση.
• Πολύ υψηλής ποιότητας επικοινωνία λόγω:
  • Χρησιμοποιώντας σύγχρονα βίντεο (VP8, H.264) και κωδικοποιητές ήχου (Opus).
  • Αυτόματη ρύθμιση της ποιότητας της ροής υπό την κατάσταση της σύνδεσης.
  • Ενσωματωμένο σύστημα ηχώ και θορύβου.
  • Αυτόματη ρύθμιση της ευαισθησίας των μικροφώνων των συμμετεχόντων (ARU).
• Υψηλή ασφάλεια: όλες οι συνδέσεις προστατεύονται και κρυπτογραφούνται σύμφωνα με τα πρωτόκολλα TLS και SRTP.
• Υπάρχει ένας ενσωματωμένος μηχανισμός σύλληψης περιεχομένου, όπως η επιφάνεια εργασίας.
• Η δυνατότητα εφαρμογής οποιασδήποτε διεπαφής διαχείρισης HTML5 και JavaScript.
• Δυνατότητα ενσωμάτωσης μιας διασύνδεσης με τυχόν συστήματα back-end χρησιμοποιώντας websockets.
• Ένα έργο ανοιχτού κώδικα - μπορεί να εφαρμοστεί στο προϊόν ή την υπηρεσία σας.
• Πραγματική εγκάρσια πλατφόρμα: Η ίδια εφαρμογή WebRTC θα λειτουργήσει εξίσου καλά σε οποιοδήποτε λειτουργικό σύστημα, επιφάνεια εργασίας ή κινητό, υπό την προϋπόθεση ότι το πρόγραμμα περιήγησης υποστηρίζει WebRTC. Αυτό εξοικονομεί σημαντικά πόρους για την ανάπτυξη λογισμικού.

Μειονεκτήματα του προτύπου

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

Webrtc μυστικά: Πώς επωφελούνται οι προμηθευτές από την τεχνολογία ιστού

Tsakhi Levent Levi, Bloggeek.me, Video + Συνέδριο 2015

Webrtc για την αγορά VKS

Αύξηση του αριθμού των τερματικών VKS

Η τεχνολογία WebRTC είχε ισχυρό αντίκτυπο στην ανάπτυξη της αγοράς VKS. Αφού εγκαταλείψει τα πρώτα προγράμματα περιήγησης με υποστήριξη WebRTC το 2013, ο πιθανός αριθμός τερματικών σταθμών ανάδειξης σε όλο τον κόσμο αυξήθηκε αμέσως κατά 1 δισεκατομμύριο συσκευές. Στην ουσία, κάθε πρόγραμμα περιήγησης έχει γίνει τερματικό CSM, όχι κατώτερη από τα ανάλογα υλικού του από την άποψη της υποβολής προσφορών.

Χρήση σε εξειδικευμένες λύσεις

Χρησιμοποιώντας διάφορες βιβλιοθήκες JavaScript και WebRTC Cloud Service API σας επιτρέπει να προσθέσετε εύκολα υποστήριξη βίντεο σύνδεσης σε οποιαδήποτε έργα Web. Προηγουμένως, για τη μετάδοση δεδομένων σε προγραμματιστές σε πραγματικό χρόνο, ήταν απαραίτητο να μελετηθούν οι αρχές των πρωτοκόλλων και να χρησιμοποιήσουν τις εξελίξεις άλλων εταιρειών που συχνά απαιτούσαν πρόσθετες αδειοδότηση, οι οποίες αυξήθηκαν το κόστος. Ήδη, ο Webrtc χρησιμοποιείται ενεργά στην "Ιστοσελίδα κλήσης", "Online Support Chat", κλπ.

Ex-Users Skype για Linux

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

Ανταγωνισμός με φλας.

Το WebRTC και το HTML5 έχουν γίνει ένα θανατηφόρο χτύπημα για την τεχνολογία flash, η οποία και ο τέτοιος ανησυχούσε για τα μακριά από τα καλύτερα χρόνια. Από το 2017, τα κορυφαία προγράμματα περιήγησης έπαψαν επίσημα να υποστηρίζουν το Flash and Technology τελικά εξαφανίστηκε από την αγορά. Αλλά πρέπει να δώσετε φλας που οφείλονται, μετά από όλα όσα δημιούργησε την αγορά του Διαδικτύου και τις προτεινόμενες τεχνικές ευκαιρίες για ζωντανές επικοινωνίες σε προγράμματα περιήγησης.

Παρουσίαση βίντεο WebRTC.

Dmitry Odintsov, TrueConf, Video + Διάσκεψη Οκτώβριος 2017

Κωδικοποιητές στο WebRTC.

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

Για να συμπιέσετε την κυκλοφορία ήχου σε κωδικοποιητές WEBRTC, OPUS και G.711.

G.711 - Ο παλαιότερος φωνητικός κωδικοποιητής με υψηλό ρυθμό bit (64 kbps), το οποίο χρησιμοποιείται συχνότερα στα παραδοσιακά συστήματα τηλεφωνίας. Το κύριο πλεονέκτημα είναι το ελάχιστο υπολογιστικό φορτίο λόγω της χρήσης αλγορίθμων φωτός συμπίεσης. Ο κωδικοποιητής χαρακτηρίζεται από χαμηλό επίπεδο συμπίεσης φωνητικού σήματος και δεν πραγματοποιεί πρόσθετη καθυστέρηση ήχου κατά την επικοινωνία μεταξύ χρηστών.

Το G.711 υποστηρίζεται από έναν μεγάλο αριθμό συσκευών. Συστήματα στα οποία χρησιμοποιείται αυτός ο κωδικοποιητής είναι ευκολότερος σε χρήση από εκείνους που βασίζονται σε άλλους κωδικούς ήχου (G.723, G.726, G.728 κ.λπ.). Από την άποψη της ποιότητας G.711, εκτιμήθηκε ότι ο έλεγχος 4.2 στο MOS (μια εκτίμηση στην περιοχή 4-5 είναι η υψηλότερη και η καλή ποιότητα, παρόμοια με την ποιότητα της μετάδοσης φωνητικής κυκλοφορίας στο ISDN και ακόμη υψηλότερο).

Εργο. - Πρόκειται για κωδικοποιητή με χαμηλή καθυστέρηση κωδικοποίησης (2,5 ms έως 60 ms), υποστηρίξτε ένα μεταβλητό bitrate και υψηλό επίπεδο συμπίεσης, το οποίο είναι ιδανικό για τη μετάδοση ενός σήματος ήχου συνεχούς ροής σε δίκτυα με μεταβλητό εύρος ζώνης. Το Opus είναι ένα υβριδικό διάλυμα που συνδυάζει τα καλύτερα χαρακτηριστικά των κωδικοποιητών μετάξι (φωνητική συμπίεση, την επίλυση της παραμόρφωσης της ομιλίας της ανθρώπινης ομιλίας) και Celt (κωδικοποίηση δεδομένων ήχου). Ο κωδικοποιητής είναι σε ελεύθερη πρόσβαση, οι προγραμματιστές που το χρησιμοποιούν, δεν χρειάζεται να καταβάλλουν τις εκπτώσεις σε κατόχους πνευματικών δικαιωμάτων. Σε σύγκριση με άλλους κωδικούς ήχου, ο Opus, κερδίζει αναμφισβήτητα σε πολλούς δείκτες. Εξόφλησε αρκετά δημοφιλείς κωδικοποιητές με χαμηλό bitrate, όπως MP3, Vorbis, AAC LC. Ο Opus αποκαθιστά το πιο κοντά στην αρχική "εικόνα" του ήχου από την AMR-WB και speex. Πίσω από αυτόν τον κωδικοποιητή - το μέλλον, γι 'αυτό και οι τεχνολογίες WebRTC το συμπεριέλαβαν σε υποχρεωτικό φάσμα υποστηριζόμενων ακουστικών.

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

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

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

Πληρωμημένος κωδικοποιητής βίντεο Η.264. Έγινε γνωστός πολύ νωρίτερα από τον συνάδελφό του. Αυτός είναι ένας κωδικοποιητής με υψηλό βαθμό συμπίεσης βίντεο βίντεο διατηρώντας ταυτόχρονα βίντεο υψηλής ποιότητας. Ο υψηλός επιπολασμός αυτού του κωδικοποιητή μεταξύ των συστημάτων υλικού της διάσκεψης βίντεο περιλαμβάνει τη χρήση του στο πρότυπο WebRTC.

Το Google και το Mozilla προωθούν ενεργά τους κωδικοποιητές VP8 και της Microsoft, της Apple και της Cisco - H.264 (για να εξασφαλίσουν τη συμβατότητα με τα παραδοσιακά συστήματα τηλεδιάσκεψης). Και εδώ είναι ένα πολύ μεγάλο πρόβλημα για τους προγραμματιστές των λύσεων Cloud Webrtc, διότι εάν στο συνέδριο όλοι οι συμμετέχοντες χρησιμοποιούν ένα πρόγραμμα περιήγησης, το συνέδριο είναι αρκετό για να αναμίξει μία φορά με έναν κωδικοποιητή και αν υπάρχουν διαφορετικά προγράμματα περιήγησης και υπάρχει σαφάρι / άκρη Τα προγράμματα περιήγησης, τότε το συνέδριο θα πρέπει να κωδικοποιηθεί δύο φορές διαφορετικούς κωδικοποιητές, οι οποίοι θα διπλασιάσουν τις απαιτήσεις του συστήματος για τον διακομιστή πολυμέσων και, ως αποτέλεσμα, το κόστος των συνδρομών στις υπηρεσίες WebRTC.

Webrtc API.

Η τεχνολογία WebRTC βασίζεται σε τρία κύρια API:

• (Υπεύθυνος για την αποδοχή ενός σήματος ήχου προγράμματος περιήγησης ιστού και βίντεο από την επιφάνεια εργασίας ή την επιφάνεια εργασίας του χρήστη).
• Rtcpeerconnection. (υπεύθυνος για τη σύνδεση μεταξύ των προγραμμάτων περιήγησης για την "ανταλλαγή" που λαμβάνονται από την κάμερα, το μικρόφωνο και την επιφάνεια εργασίας, τα διαμερίσματα. Επίσης στα "καθήκοντα" αυτού του API εισέρχονται στην επεξεργασία σήματος (καθαρίζοντας το από τους ξένους, ρυθμίζοντας τον όγκο του μικροφώνου) και τον έλεγχο Οι κωδικοί ήχου και βίντεο που χρησιμοποιούνται).
• Κανάλι RTCDATA (Παρέχει διμερές μετάδοση δεδομένων μέσω της καθιερωμένης σύνδεσης).

Πριν να αποκτήσετε πρόσβαση στο μικρόφωνο και την κάμερα χρήστη, το πρόγραμμα περιήγησης ζητεί την άδεια. Στο Google Chrome, μπορείτε να προσαρμόσετε εκ των προτέρων στην ενότητα "Ρυθμίσεις", στην όπερα και τον Firefox, η επιλογή των συσκευών πραγματοποιείται απευθείας κατά τη στιγμή της πρόσβασης, από την αναπτυσσόμενη λίστα. Το αίτημα ανάλυσης θα εμφανιστεί πάντα όταν χρησιμοποιείτε το πρωτόκολλο HTTP και μία φορά αν χρησιμοποιείτε το HTTPS:

Rtcpeerconnection.. Κάθε πρόγραμμα περιήγησης που συμμετέχει στη διάσκεψη WebRTC πρέπει να έχει πρόσβαση σε αυτό το αντικείμενο. Χάρη στη χρήση του RTCPEERConnection, η MediaDen από ένα πρόγραμμα περιήγησης μπορεί να χρησιμοποιηθεί ακόμη και μέσω οθονών NAT και δικτύου. Για να μεταφέρουν με επιτυχία τμήματα μέσων, οι συμμετέχοντες θα πρέπει να ανταλλάσσουν τα ακόλουθα δεδομένα χρησιμοποιώντας τις μεταφορές, όπως οι υποδοχές ιστού:

• Ο συμμετέχων εκκινητή στέλνει τον δεύτερο συμμετέχοντα της προσφοράς-SDP (δομή δεδομένων, με τα χαρακτηριστικά της ροής των μέσων ενημέρωσης, τις οποίες θα μεταδώσει).
• Ο δεύτερος συμμετέχων αποτελεί την "απάντηση" - απάντηση-SDP και το εμποδίζει στον εκκινητή.
• Στη συνέχεια, η ανταλλαγή υποψηφίων πάγου οργανώνεται μεταξύ των συμμετεχόντων, εάν υπάρχουν (αν οι συμμετέχοντες βρίσκονται πίσω από τις οθόνες NAT ή δικτύων).

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

Κανάλι RTCDATA. Η υποστήριξη πρωτοκόλλου του καναλιού δεδομένων εμφανίστηκε σε προγράμματα περιήγησης σχετικά πρόσφατα, επομένως, αυτό το API μπορεί να προβληθεί αποκλειστικά σε περιπτώσεις χρήσης WebRTC στα προγράμματα περιήγησης Mozilla Firefox 22+ και Google Chrome 26+. Με αυτό, οι συμμετέχοντες μπορούν να μοιράζονται μηνύματα κειμένου στο πρόγραμμα περιήγησης.

Σύνδεση με WebRTC.

Υποστηριζόμενα προγράμματα περιήγησης επιφάνειας εργασίας

• Google Chrome (17+) και όλα τα προγράμματα περιήγησης που βασίζονται στον κινητήρα χρωμίου.
• Mozilla Firefox (18+);
• Όπερα (12+).
• Σαφάρι (11+);

Υποστηριζόμενα κινητά προγράμματα περιήγησης για το Android

• Google Chrome (28+).
• Mozilla Firefox (24+);
• Opera Mobile (12+).
• Σαφάρι (11+).

Webrtc, Microsoft και Internet Explorer

Για πολύ μεγάλο χρονικό διάστημα η Microsoft διατηρεί τη σιωπή σχετικά με την υποστήριξη WebRTC στον Internet Explorer και στο νέο πρόγραμμα περιήγησης άκρων. Οι τύποι από το Redmond δεν επιθυμούν πραγματικά να δώσουν τις τεχνολογίες στους χρήστες ότι δεν ελέγχουν, αυτή είναι μια τέτοια πολιτική. Αλλά σταδιακά η υπόθεση έχει μετατοπιστεί από το νεκρό σημείο, επειδή Το WebRTC ήταν πιο αδύνατο να αγνοηθεί και το έργο ORTC που προέρχεται από το πρότυπο WebRTC ανακοινώθηκε.

Σύμφωνα με τους προγραμματιστές, η ORTC αποτελεί επέκταση του προτύπου WebRTC με ένα βελτιωμένο σύνολο API και HTML5 που βασίζεται στο JavaScript, το οποίο μεταφράζεται σε μια κανονική γλώσσα σημαίνει ότι όλα θα είναι τα ίδια, μόνο για να ελέγξει το πρότυπο και η ανάπτυξή του θα είναι η Microsoft , και όχι το Google. Το σύνολο των κωδικοποιητών επεκτείνεται με υποστήριξη για H.264 και μερικούς κωδικούς ήχου της σειράς G.7XX που χρησιμοποιούνται σε συστήματα τηλεφωνίας και υλικού VKS. Μπορεί να εμφανιστεί ενσωματωμένη υποστήριξη για το RDP (για τη μετάδοση περιεχομένου) και μηνυμάτων. Με την ευκαιρία, οι χρήστες του Internet Explorer δεν είναι τυχεροί, η υποστήριξη ORTC θα είναι μόνο στην άκρη. Λοιπόν, φυσικά, ένα τέτοιο σύνολο πρωτοκόλλων και κωδικοποιητών με χαμηλό αίμα εισάγεται με skype για επιχειρήσεις, η οποία ανοίγει ακόμη περισσότερες επιχειρηματικές εφαρμογές για webrtc.

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

Η διεπαφή RTCPEERConnection είναι μια σύνδεση Peer-to-Peer μεταξύ δύο προγραμμάτων περιήγησης. Για να συνδέσετε τρεις και περισσότερους χρήστες, θα πρέπει να οργανώσουμε ένα δίκτυο ματιών (ένα δίκτυο στο οποίο κάθε κόμβος συνδέεται με όλους τους άλλους κόμβους).
Θα χρησιμοποιήσουμε το ακόλουθο σύστημα:

1. Κατά το άνοιγμα μιας σελίδας, ελέγξτε την παρουσία του αναγνωριστικού του δωματίου μέσα τοποθεσία.hash.
2. Εάν το αναγνωριστικό του δωματίου δεν έχει καθοριστεί, δημιουργούμε ένα νέο
3. Στέλνουμε το διακομιστή σηματοδότησης "το μήνυμα για το τι θέλουμε να ενταχθούν στο καθορισμένο δωμάτιο
4. Ο διακομιστής σηματοδότησης καλεί τους υπόλοιπους πελάτες σε αυτό το δωμάτιο μια νέα ειδοποίηση χρήστη
5. Οι πελάτες που είναι ήδη στο δωμάτιο στείλτε μια προσφορά Newcomer SDP
6. Newbie απαντήσεις για να προσφέρουν "s

0. Σηματοδότηση διακομιστή

Όπως γνωρίζετε, τουλάχιστον webrtc και παρέχει τη δυνατότητα συνδέσεων P2P μεταξύ των περιηγητή, εξακολουθεί να απαιτεί πρόσθετες μεταφορές σε μηνύματα ανταλλαγής υπηρεσιών. Σε αυτό το παράδειγμα, ο διακομιστής Websocket που γράφτηκε στο Node.js χρησιμοποιώντας το Socket.io ενεργεί ως τέτοια μεταφορά.

Var socket_io \u003d απαιτούν ("socket.io"). module.exports \u003d (server) (inf users \u003d (); var io \u003d socket_io (server); io.on ("σύνδεση", λειτουργία (υποδοχή) (// Η επιθυμία ενός νέου χρήστη ενταχθεί στην υποδοχή.On δωμάτιο (" Δωμάτιο ", λειτουργία (μήνυμα) (var json \u003d json.parse (μήνυμα); // προσθέστε μια υποδοχή στη λίστα των χρηστών χρηστών \u003d υποδοχή? Αν (υποδοχή.room! \u003d\u003d undefined) (// αν η υποδοχή είναι ήδη Σε κάποιο δωμάτιο, βγαίνουν από την υποδοχή του. Deave (Socket.Room);) // Εισάγετε την ζητούμενη υποδοχή δωματίου .room \u003d json.room; socket.join (socket.roid); socket.user_id \u003d json.id; / / Αποστολή στους υπόλοιπους πελάτες σε αυτό το δωμάτιο, ένα μήνυμα για την ένταξη σε μια νέα υποδοχή μελών.Broadcast.to (socket.room) .Emit ("New", JSON.ID))); // Μήνυμα που σχετίζεται με το WebRTC ( Προσφορά SDP, Απάντηση SDP ή υποψήφια SDP) Socket.On ("WebrTC", λειτουργία (μήνυμα) (μήνυμα). Αν (json.to! \u003d\u003d undefined && undered & undered) (// εάν το μήνυμα ορίζεται από Ο παραλήπτης και αυτός ο παραλήπτης που είναι γνωστός στον διακομιστή, στείλτε ένα μήνυμα μόνο σε αυτόν ... hoses.emit ("webrtc", μήνυμα)? ) Αλλιώς (// ... διαφορετικά θεωρούμε το μήνυμα με ραδιοτηλεοπτική εκπομπή.Broadcast.To (Socket.Room) .Emit ("Webrtc", μήνυμα);))); // κάποιος αποσυνδεδεμένος socket.on ("αποσύνδεση", λειτουργία () (// όταν αποσυνδέεται ο πελάτης, ειδοποιούμε για αυτό το άλλο socket.Broadcast.to (socket.room) .Emit ("άδεια", socket.user_id); Διαγράψτε τους χρήστες;)); )); )

1. Index.html

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

2. main.js.

2.0. Λάβετε συνδέσμους σε στοιχεία σελίδας και διεπαφές WebRTC

var chatlog \u003d document.geteLementiid ("chatlog"); var μήνυμα \u003d document.getelementidyid ("μήνυμα"); var connengy_num \u003d document.getelementbyid ("connection_num"); var room_link \u003d document.getelementbyid ("room_link");

Πρέπει ακόμα να χρησιμοποιήσουμε τα προθέματα περιήγησης για πρόσβαση στις διεπαφές WebRTC.

Var peerconnection \u003d window.mozrtcpeerconnection || Window.webkitrttcpeerconnection. Var sessiondescription \u003d window.mozrtcsessiondescription || Window.rtcsessiondescription? var opeCandididate \u003d window.mozrtcicecadidate || Window.rtcicecAdidate;

2.1. Ορισμός αναγνωριστικού του δωματίου

Εδώ θα χρειαστούμε μια λειτουργία για να δημιουργήσουμε ένα μοναδικό αναγνωριστικό του δωματίου και του χρήστη. Θα χρησιμοποιήσουμε uuid για αυτούς τους σκοπούς.

Λειτουργία UUID () (Return math.wloor () (math.random () * 0x10000) .TOSTRING (16);); Επιστροφή S4 () + S4 () + - "+ S4 () +" - " () + "-" + S4 () + "-" + S4 () + S4 () + S4 ())

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

VAR δωμάτιο \u003d θέση.hash.substr (1); Εάν (! δωμάτιο) (δωμάτιο \u003d uuid ();) room_link.innerhml \u003d "σύνδεση με το δωμάτιο". var me \u003d uuid ();

2.2. Websocket.

Αμέσως όταν ανοίγετε τη σελίδα, θα συνδεθείτε με το διακομιστή σηματοδότησης "Y, στείλτε ένα αίτημα για να εισέλθετε στο δωμάτιο και να καθορίσετε τους χειριστές μηνυμάτων.

// Προσδιορίστε ότι όταν κλείσετε το μήνυμα που χρειάζεστε για να στείλετε το διακομιστή στην υποδοχή VAR \u003d io.Connect (", (" συγχρονισμός συγχρονισμού κατά την εκφόρτωση ": TRUE)). socket.on ("webrtc", socketreceed)? socket.on ("νέο", socketnewpeer); // Αμέσως αποστέλλει ένα αίτημα για να εισέλθετε στην υποδοχή.emit δωμάτιο ("δωμάτιο", json.stringyify ((id: me, δωμάτιο: δωμάτιο)); // Βοηθητική λειτουργία για την αποστολή μηνυμάτων διευθύνσεων που σχετίζονται με τη λειτουργία WebRTC SendViasocket (τύπος, μήνυμα, σε) )) ·)

2.3. Ρυθμίσεις Peerconnection

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

VAR Server \u003d (ICESERVERS: [URL: "STUN: 23.21.150.121"), (URL: "Stun: stun.l.google.com: 19302"), (URL: "Turn: numb.viagenie.ca", πιστοποίηση : "Ο κωδικός σας πηγαίνει εδώ", όνομα χρήστη: " [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]")])) Options \u003d (Προαιρετικό: [(DTLSSRTPKeyAghrenement: True), // Απαιτείται να συνδεθείτε μεταξύ Chrome και Firefox (Rtpdatachannels: True) // Απαιτείται στο Firefox για να χρησιμοποιήσετε το API api])

2.4. Σύνδεση νέου χρήστη

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

Var peers \u003d (); Λειτουργία SocketNewPeer (δεδομένα); // Δημιουργία νέας σύνδεσης VAR PC \u003d Νέα Peerconnection (Server, Επιλογές); // Αρχικοποίηση Initconnection (PC, Δεδομένα, "Προσφορά"); // Διατηρήστε το PIR στη λίστα PEERS.Connection \u003d PC; // Δημιουργία datachannel για το οποίο var Channel \u003d PC.CreatedAtachannel ("Mychannel", ()); Channel.owner \u003d Δεδομένα; \u200b\u200bPeers.Channel \u003d κανάλι; // Εγκατάσταση χειριστηρίων συμβάντος διαύλου (κανάλι); // Δημιουργία SDP Προσφορά PC.REAREOFFER (λειτουργία (προσφορά));) Λειτουργία Initconnection (PC, ID, SDPTYPE) (PC.OLOCECANDIDATE \u003d Λειτουργία (εάν (συμβάν) (εάν (event.Candidate) (// Όταν εντοπιστεί ο νέος πάγος του υποψηφίου Ο κατάλογος για περαιτέρω αποστολή PEERS.CANDIDATECACHE.PUSH (EVENT.CANDIDATE);) αλλού (// Όταν ολοκληρωθεί η υποψήφια ανίχνευση, ο χειριστής θα καλείται ξανά, αλλά χωρίς υποψήφιο // σε αυτή την περίπτωση στέλνουμε μια πρώτη προσφορά SDP φόβου ή Απάντηση SDP (ανάλογα με την παράμετρο λειτουργίας) ... sendviasocket (sdptype, pc.localdescription, id); // ... και στη συνέχεια όλα προηγουμένως βρέθηκαν υποψήφιοι πάγου για (var i \u003d 0; i< peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "

"; }; }

2.5. Προσφορά SDP, SDP Απάντηση, υποψήφιος πάγου

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

Λειτουργία SocketReceved (Δεδομένα) (Δεδομένα). Διακόπτης (JSON.TYPE) (υποψήφιος) (JSON.ID, JSON.DATA); Break; Case "Προσφορά": RemotoFferEved (JSON, ID, JSON.DATA); Απάντηση ": Remoteanswerrave (JSON.ID, JSON.DATA); Break;))

2.5.0 Προσφορά SDP.

Λειτουργία απομακρυσμένη (ID, Δεδομένα) (Δημιουργία, Αναγνωριστικό) (ID), VAR PC \u003d PEERS.Connection, PC.SetremotEdesRiption (Δεδομένα); PC.CreateAsswer (Λειτουργία (απάντηση))))))))))) (Peeters \u003d\u003d\u003d undefined) (Peeters \u003d (candidatecache :); var pc \u003d νέα peerconnection (διακομιστή, επιλογές); initconnection (PC, id, "απάντηση"); peers.connection \u003d pc. pc.ondatachannel \u003d λειτουργία (e ) (Peers.Channel \u003d E.Channel, Peers.Channel.Owner \u003d ID; Bettervents (Peers.Channel)))))

2.5.1 Απάντηση SDP.

Λειτουργία Remoteanswerrave (αναγνωριστικό, δεδομένα) (VAR PC \u003d PEERS.Connection, PC.SetremotEdesRiption (νέα συνεδρίαση (δεδομένα));)

2.5.2 Υποψήφιος πάγου.

Λειτουργία RemotEcandidentereced (ID, DATA) (Δημιουργία (ID), VAR PC \u003d PEERS.Connection; PC.ADDICECANDATE (νέο ICECANDIDATE (δεδομένα))

2.6. Αποστολή μηνύματος

Πατώντας το κουμπί Στείλετε. Η λειτουργία καλείται Να στείλετε μήνυμα.. Όλα όσα έχει περάσει στη λίστα των συνομηλίκων και προσπαθεί να στείλει το συγκεκριμένο μήνυμα σε όλους.

Για πολλά χρόνια για κλήσεις από το πρόγραμμα περιήγησης εδώ και πολλά χρόνια: Java, ActiveX, Adobe Flash ... τα τελευταία χρόνια έχει γίνει σαφές ότι τα plugins και τα αριστερά εικονικά μηχανήματα δεν λάμπουν ευκολία (γιατί πρέπει να εγκαταστήσω κάτι;) και, Το πιο σημαντικό, ασφάλεια. Τι να κάνω? Υπάρχει μια έξοδος!

Μέχρι πρόσφατα, πολλά πρωτόκολλα για IP τηλεφωνία ή βίντεο χρησιμοποιήθηκαν σε δίκτυα IP: SIP, το πιο κοινό πρωτόκολλο που προέρχεται από τη σκηνή H.323 και MGCP, Jabber / Jingle (χρησιμοποιείται σε GTalk), ημι-ανοιχτό Adobe RTMP * και, Μαθήματα, κλειστό Skype. Το έργο WebRTC, που ξεκίνησε από την Google, προσπαθεί να μετατρέψει την κατάσταση των υποθέσεων στον κόσμο και την ηλεκτρονική τηλεφωνία, καθιστώντας περιττό όλα τα τηλέφωνα λογισμικού, συμπεριλαμβανομένου του Skype. Το WebRTC δεν εφαρμόζει απλώς όλες τις δυνατότητες επικοινωνίας απευθείας μέσα στο πρόγραμμα περιήγησης που είναι εγκατεστημένο τώρα σε κάθε συσκευή, αλλά προσπαθεί να λύσει ταυτόχρονα το γενικότερο καθήκον των επικοινωνιών μεταξύ χρηστών των προγραμμάτων περιήγησης (ανταλλαγή διαφόρων δεδομένων, οθόνες, συνεργασία με έγγραφα και πολλά άλλα).

Webrtc web developer

Από την άποψη του Web Developer Webrtc αποτελείται από δύο κύρια μέρη:

• Η διαχείριση των μέσων μέσων από τοπικούς πόρους (κάμερα, μικρόφωνο ή τοπική οθόνη υπολογιστή) υλοποιείται από τη μέθοδο Navigator.getusermedia που επιστρέφει το αντικείμενο Mediastream.
• Επικοινωνία Peer-to-Peer μεταξύ συσκευών που δημιουργούν κυκλοφορία μέσων, συμπεριλαμβανομένου του ορισμού των μεθόδων επικοινωνίας και να τα μεταδίδουν απευθείας - αντικείμενα RTCPEERConnection (για να στέλνουν και να λαμβάνουν ροές ήχου και βίντεο) και RTCDatachannel (για αποστολή και λήψη δεδομένων από το πρόγραμμα περιήγησης).

Τι κάνουμε?

Θα ασχοληθούμε με τον τρόπο οργάνωσης της απλούστερης συνομιλίας βίντεο για πολλούς παίκτες μεταξύ των προγραμμάτων περιήγησης που βασίζονται στο webrtc χρησιμοποιώντας πρίζες ιστού. Το πείραμα θα ξεκινήσει στο Chrome / Chromium, όπως οι πιο προηγμένες όσον αφορά τα προγράμματα περιήγησης WebRTC, αν και κυκλοφόρησε στις 24 Ιουνίου Ο Firefox 22 σχεδόν τους πιάστηκε. Πρέπει να ειπωθεί ότι το πρότυπο δεν έχει ακόμη γίνει αποδεκτό και από την έκδοση στην έκδοση API που μπορεί να αλλάξει. Όλα τα παραδείγματα ελέγχθηκαν στο Chromium 28. Για απλότητα, δεν θα ακολουθήσουμε την καθαριότητα του κώδικα και του cross-browser.

Μεσολάβηση

Το πρώτο και απλό συστατικό του WebRTC - Mediastream. Παρέχει πρόσβαση στο πρόγραμμα περιήγησης στην κυκλοφορία μέσων από την κάμερα και το τοπικό μικρόφωνο υπολογιστή. Στο Chrome, είναι απαραίτητο να καλέσετε τη λειτουργία του Navigator.webkitgetusermedia () (δεδομένου ότι το πρότυπο δεν έχει ακόμη ολοκληρωθεί, όλες οι λειτουργίες πηγαίνουν με το πρόθεμα, και στο Firefox, η ίδια λειτουργία ονομάζεται Navigator.mozgetUSermedia ()). Όταν το καλεί, ο χρήστης θα εμφανιστεί ένα αίτημα για πρόσβαση στην κάμερα και το μικρόφωνο. Μπορείτε να συνεχίσετε την κλήση μόνο αφού ο χρήστης δίνει τη συγκατάθεσή του. Οι παράμετροι αυτής της λειτουργίας μεταδίδουν τις παραμέτρους του απαιτούμενου διακόπτη μέσων και δύο λειτουργίες επανάκλησης: το πρώτο θα προκληθεί στην περίπτωση της επιτυχούς πρόσβασης στην κάμερα / μικρόφωνο, το δεύτερο - σε περίπτωση σφάλματος. Για να ξεκινήσετε, δημιουργήστε ένα αρχείο HTML RTCTEST1.HTML με ένα κουμπί και στοιχείο

getusermedia.

Microsoft Cu-RTC-Web

Η Microsoft δεν θα ήταν η Microsoft εάν σε απάντηση στην πρωτοβουλία Google δεν απελευθέρωσε αμέσως τη δική του ασυμβίβαστη μη τυπική επιλογή που ονομάζεται CU-RTC-WEB (html5labs.ineroperabilitybridges.com/cu-rtc-wareb/cu-rtc-wwareb.htm ). Παρόλο που το μερίδιο του IE, και τόσο μικρό, συνεχίζει να συρρικνώνεται, ο αριθμός των χρηστών του Skype δίνει στη Microsoft Hope να πατήσει την Google και μπορεί να θεωρηθεί ότι αυτό το συγκεκριμένο πρότυπο θα χρησιμοποιηθεί στην έκδοση του προγράμματος περιήγησης του Skype. Το πρότυπο Google προσανατολίζεται κυρίως στις επικοινωνίες μεταξύ των προγραμμάτων περιήγησης. Ταυτόχρονα, το κύριο μέρος της φωνητικής κυκλοφορίας παραμένει στο συνηθισμένο τηλεφωνικό δίκτυο και οι πύλες μεταξύ πληροφορικής και δικτύων IP χρειάζονται όχι μόνο για ευκολία χρήσης ή ταχύτερη διανομή, αλλά και ως μέσο δημιουργίας, το οποίο θα Αφήστε έναν μεγάλο αριθμό παικτών να τις αναπτύξει. Η εμφάνιση ενός άλλου προτύπου μπορεί όχι μόνο να οδηγήσει σε δυσάρεστη ανάγκη να υποστηρίξει δύο ασυμβίβαστες τεχνολογίες ταυτόχρονα, αλλά στο μέλλον να δώσει στον χρήστη μια ευρύτερη επιλογή πιθανής λειτουργικότητας και προσιτών τεχνικών λύσεων. Περίμενε και θα δεις.

Ενεργοποιώντας την τοπική ροή

Εσωτερικές ετικέτες Το αρχείο HTML μας θα δηλώσει την παγκόσμια μεταβλητή για τον διακόπτη Media:

Var localstream \u003d null;

Η πρώτη παράμετρος της μεθόδου getusermedia πρέπει να καθορίζει τις παραμέτρους του διακόπτη που ζητήσατε - για παράδειγμα, απλά να συμπεριλάβετε ήχο ή βίντεο:

Var streamconstraints \u003d ("ήχος": TRUE, "VIDEO": TRUE). // Αίτηση πρόσβασης και ήχου και βίντεο

Είτε καθορίστε πρόσθετες παραμέτρους:

Var streamconstraints \u003d ("Audio": TRUE, "VIDEO": ("Υποχρεωτικό": ("Maxwidth": "320", "MaxHeight": "240", "MaxFramerate": "Προαιρετικό" :) )

Η δεύτερη παράμετρος της μεθόδου getusermedia πρέπει να μεταφερθεί σε μια λειτουργία επανάκλησης, η οποία θα προκληθεί εάν εκτελείται με επιτυχία:

Λειτουργία getusermedia_success ("getusmedia_suxcess ():", stream); localvideo1.src \u003d url.createoObjecturl (stream); // Συνδέστε το διακόπτη μέσων στο στοιχείο HTML

Η τρίτη παράμετρος - χειριστής σφάλματος λειτουργίας επανάκλησης που θα κληθεί σε περίπτωση σφάλματος

Λειτουργία getusmedia_error (σφάλμα) (console.log ("getusmedia_error ():", σφάλμα);)

Πραγματικά καλώντας τη μέθοδο GetUsermedia - Αίτηση πρόσβασης στο μικρόφωνο και την κάμερα όταν κάνετε κλικ στο πρώτο κουμπί

Λειτουργία getusermedia_click () (console.log ("getusmedia_click ()"); navigator.webkitgetusermedia (strewconstraints, getusmedia_success, getusmedia_error);)

Λάβετε πρόσβαση στο αρχείο πολυμέσων από το αρχείο ανοιχτό τοπικά, είναι αδύνατο. Εάν προσπαθήσετε να το κάνετε αυτό, πάρτε ένα λάθος:

NavigatorusermiceError (κωδικός: 1, permission_denied: 1) "

Δημοσιεύουμε το προκύπτον αρχείο στο διακομιστή, ανοίγουμε στο πρόγραμμα περιήγησης και σε απόκριση της αίτησης που εμφανίστηκε επιτρέποντας την πρόσβαση στην κάμερα και το μικρόφωνο.

Επιλέξτε τις συσκευές στις οποίες θα λάβει το Chrome, μπορείτε να ρυθμίσετε τις ρυθμίσεις ("Ρυθμίσεις"), να εμφανίσετε προηγμένες ρυθμίσεις ("Εμφάνιση προηγμένων ρυθμίσεων"), Προστασία Προσωπικών Δεδομένων ("Προσωπικά Δεδομένα"), Κουμπί περιεχομένου ("Ρυθμίσεις περιεχομένου"). Στα προγράμματα περιήγησης Firefox και Opera, η επιλογή των συσκευών γίνεται από την αναπτυσσόμενη λίστα απευθείας όταν επιλυθεί η πρόσβαση.

Όταν χρησιμοποιείτε το πρωτόκολλο HTTP, η άδεια θα ζητηθεί κάθε φορά που λαμβάνετε πρόσβαση στο ταξίδι μέσων μετά τη φόρτωση της σελίδας. Η μετάβαση στο HTTPS θα σας επιτρέψει να εμφανίσετε ένα ερώτημα μία φορά, μόνο με την πρώτη πρόσβαση στον διακόπτη πολυμέσων.

Δώστε προσοχή στον παλλόμενο κύκλο στο εικονίδιο στην καρτέλα και το εικονίδιο της κάμερας στη δεξιά πλευρά της γραμμής διευθύνσεων:

Rtcmediaconnection.

Το RTCMediaconnection είναι ένα αντικείμενο που έχει σχεδιαστεί για να δημιουργεί και να μεταδίδει τα μέσα μέσω δικτύων μεταξύ των συμμετεχόντων. Επιπλέον, αυτό το αντικείμενο είναι υπεύθυνο για το σχηματισμό μιας περιγραφής της Mediassia (SDP), λαμβάνοντας πληροφορίες σχετικά με τους υποψηφίους πάγου για τη διέλευση μέσω οθονών NAT ή δικτύου (τοπική και χρήση stun) και αλληλεπιδρούν με τον διακομιστή Turn. Κάθε συμμετέχων πρέπει να έχει μια RTCMediaconnection για κάθε σύνδεση. Οι λήψεις μέσων μεταδίδονται πάνω από το κρυπτογραφημένο πρωτόκολλο SRTP.

Ενεργοποιήστε τους διακομιστές

Οι υποψήφιοι πάγου είναι τρεις τύποι: κεντρικοί υπολογιστές, srflx και ρελέ. Ο κεντρικός υπολογιστής περιέχει πληροφορίες που λαμβάνονται τοπικά, SRFLX - πώς ο κόμβος αναζητά έναν εξωτερικό διακομιστή (stun) και το ρελέ - πληροφορίες για την διέργεια της κυκλοφορίας μέσω του διακομιστή Turn. Εάν ο κόμβος μας βρίσκεται πίσω από το NAT, τότε οι υποψήφιοι υποδοχής θα περιέχουν τοπικές διευθύνσεις και θα είναι άχρηστες, οι υποψήφιοι Srflx θα βοηθήσουν μόνο με ορισμένους τύπους NAT και το ρελέ θα είναι η τελευταία ελπίδα να παραλείψετε την κυκλοφορία μέσω του ενδιάμεσου διακομιστή.

Παράδειγμα του υποψήφιου πάγου του τύπου υποδοχής, με τη διεύθυνση 192.168.1.37 και τη θύρα UDP / 34022:

A \u003d Υποψήφιος: 337499441 2 UDP 2113937151 192.168.1.37 34022 Δημιουργία ξενιστή 0

Γενική μορφή για τη ρύθμιση STUN / TORT SERVERS:

VAR διακομιστές \u003d ("ICESERVERS": [("URL": "Stun: stun.stunprotocol.org: 3478"), ("URL": "Ενεργοποίηση: [Προστατεύεται μέσω ηλεκτρονικού ταχυδρομείου]: Λιμάνι "," Πιστοποιητικό ":" Κωδικός ")]);

Δημόσιοι διακομιστές αναισθητοποίησης στο διαδίκτυο πολύ. Μια μεγάλη λίστα, για παράδειγμα, είναι. Δυστυχώς, λύουν πάρα πολλά από τα προβλήματα. Οι δημόσιοι διακομιστές στροφής, σε αντίθεση με το αναισθητοποιητικό, είναι πρακτικά όχι. Αυτό οφείλεται στο γεγονός ότι ο διακομιστής Turn διέρχεται από τις ίδιες τις λήψεις μέσων που μπορούν να κατεβάσετε σημαντικά και το κανάλι δικτύου και το ίδιο το διακομιστή. Ως εκ τούτου, ο ευκολότερος τρόπος σύνδεσης με τους διακομιστές περιστροφής είναι να το ορίσετε μόνοι σας (είναι σαφές ότι θα χρειαστεί το δημόσιο ΠΕ). Από όλους τους διακομιστές, κατά τη γνώμη μου, το καλύτερο RFC5766-Turn-server. Κάτω από αυτό υπάρχει ακόμη και μια έτοιμη εικόνα για το Amazon EC2.

Με τη στροφή μέχρι τα πάντα να είναι τόσο καλά όσο θα ήθελα, αλλά υπάρχει μια ενεργή ανάπτυξη, και θέλω να ελπίζω, μετά από κάποιο χρονικό διάστημα Webrtc, αν δεν συγκρίνει με το Skype για την ποιότητα της μετάδοσης των διευθύνσεων (NAT) και οθόνες δικτύου, στη συνέχεια τουλάχιστον αξιοσημείωτη προσέγγιση.

Για το RTCMediaconnection, απαιτείται ένας πρόσθετος μηχανισμός για την ανταλλαγή πληροφοριών ελέγχου για τη δημιουργία μιας σύνδεσης - αν και αποτελεί τα δεδομένα αυτά, αλλά δεν τα μεταδίδει και η μεταφορά σε άλλους συμμετέχοντες πρέπει να εφαρμοστεί χωριστά.

Η επιλογή μιας μεθόδου μετάδοσης ανατίθεται στον προγραμματιστή - αν και χειροκίνητα. Μόλις θα πραγματοποιηθεί η ανταλλαγή των απαραίτητων δεδομένων, η RTCMediaconnection θα δημιουργήσει αυτόματα τις εκτελεστές μέσων (εάν αποδειχθεί, φυσικά).

Μοντέλο απάντησης προσφοράς

Για να δημιουργήσετε και να αλλάξετε τις προβολές μέσων, χρησιμοποιείται το μοντέλο προσφοράς / απαντήσεων. Περιγράφεται στο RFC3264) και το πρωτόκολλο SDP (πρωτόκολλο περιγραφής περιγραφής). Χρησιμοποιούνται και το πρωτόκολλο SIP. Αυτό το μοντέλο διακρίνει δύο πράκτορες: ο προσφέροχος - ο ένας που παράγει μια περιγραφή της συνόδου SDP για να δημιουργήσει μια νέα ή τροποποίηση της υπάρχουσας (προσφορά SDP) και η απάντηση είναι αυτή που λαμβάνει μια περιγραφή του SDP της συνόδου από έναν άλλο πράκτορα και τον συναντά την περιγραφή της συνεδρίασης (Απάντηση SDP). Ταυτόχρονα, η προδιαγραφή απαιτεί ένα πρωτόκολλο υψηλότερου επιπέδου (για παράδειγμα, το SIP ή το δικό του πάνω από τις υποδοχές ιστού, όπως στην περίπτωσή μας) υπεύθυνη για τη διαβίβαση του SDP μεταξύ των παραγόντων.

Ποια δεδομένα πρέπει να μεταφερθούν μεταξύ δύο RTCMediaconnection, ώστε να μπορούν να εγκαταστήσουν επιτυχώς την κυκλοφορία των μέσων ενημέρωσης:

• Ο πρώτος συμμετέχων που ξεκινά η σύνδεση δημιουργεί μια προσφορά στην οποία μεταδίδει τη δομή δεδομένων SDP (το ίδιο πρωτόκολλο για τον ίδιο σκοπό χρησιμοποιείται στο SIP), το οποίο περιγράφει τα πιθανά χαρακτηριστικά του διακόπτη μέσων, τα οποία πρόκειται να αρχίσει να μεταδίδει. Αυτό το μπλοκ δεδομένων πρέπει να μεταφερθεί στον δεύτερο συμμετέχοντα. Το δεύτερο Συμμετέχοντα έντυπα απαντά, με το SDP του και το εμποδίζει στην πρώτη.
• Και ο πρώτος και ο δεύτερος συμμετέχων εκτελεί τη διαδικασία για τον προσδιορισμό πιθανών υποψηφίων πάγου, με τη βοήθεια της οποίας ο δεύτερος συμμετέχων θα μπορέσει να τα μεταφέρει. Όπως ορίζονται οι υποψήφιοι, οι πληροφορίες σχετικά με αυτές πρέπει να διαβιβάζονται σε άλλο συμμετέχοντα.

Προσφορά σχηματισμού.

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

Θα χρειαστείτε επιπλέον δύο χειριστή εκδηλώσεων: Onicecandidate κατά τον καθορισμό του νέου υποψήφιου πάγου και OnAdstream κατά τη σύνδεση του διακόπτη μέσων από την μακριά πλευρά. Ας επιστρέψουμε στο αρχείο μας. Προσθήκη στο HTML μετά από σειρές με στοιχεία ένα ακόμα:

creatoffer.

Και μετά από μια συμβολοσειρά με ένα στοιχείο

Επίσης, στην αρχή του κώδικα JavaScript θα δηλώσει την παγκόσμια μεταβλητή για το RTCPEERConnection:

Var pc1;

Όταν καλείτε τον σχεδιαστή RTCPEERConnection, πρέπει να καθορίσετε τους διακομιστές αναισθητοποίησης / περιστροφής. Διαβάστε περισσότερα σχετικά με αυτά, δείτε το ένθετο. Ενώ όλοι οι συμμετέχοντες βρίσκονται στο ίδιο δίκτυο, δεν απαιτούνται.

Var διακομιστές \u003d null;

Επιλογές για την προετοιμασία της προσφοράς SDP

Var offercastaints \u003d ();

Η πρώτη παράμετρος της μεθόδου CreateOffer () είναι μια λειτουργία επανάκλησης που ονομάζεται όταν είναι επιτυχής

Λειτουργία PC1_CREATEOFFER_SUCCESS ("PC1_CREATEFER_SUSCESS (): \\ ndesc.sdp: \\ n" + + desc.sdp + "desc:", desc); pc1.setlocaldeScription (desc); // ορίστε την RTCPEERConnection, που σχηματίζεται από την προσφορά SDP χρησιμοποιώντας τη μέθοδο SetLocalDeScription . // Όταν η μακρόχρονη πλευρά αποστέλλεται στην απάντησή του SDP, θα χρειαστεί να ρυθμιστεί από την SETRemotEdEScription // μέχρι να μην εφαρμοστεί η δεύτερη πλευρά, δεν κάνει τίποτα // pc2_receedoffer (desc);)

Η δεύτερη παράμετρος είναι μια λειτουργία επανάκλησης που θα καλείται σε περίπτωση σφάλματος

Λειτουργία PC1_CreateOffer_Error (σφάλμα) (Console.log ("PC1_CreateOfer_success_error (): Σφάλμα:", Σφάλμα);)

Και δηλώστε μια λειτουργία επανάκλησης ότι οι υποψήφιοι πάγου θα μεταδοθούν όπως προσδιορίζονται:

Λειτουργία PC1_OCONICANDIDATE (CONSOLE.LOG ("PC1_OCONICADIDATE (): \\ N" + advence.candidate.candidate.replace ("\\ r \\ n", ""), συμβάντα); // ενώ η δεύτερη πλευρά είναι Δεν εφαρμόζεται, δεν κάνει τίποτα // pc2.addicecandidate (νέο rtcicecandidate (event.candidate)))))

Εκτός από μια λειτουργία επανάκλησης για να προσθέσετε ένα διακόπτη πολυμέσων από την άκρη (για το μέλλον, αφού ενώ έχουμε μόνο μία Rtcpeerconnection):

Λειτουργία PC1_onaddstream (Console.log ("pc_onaddstream ()"); remotevideo1.src \u003d url.createoropjecturl (event.stream);)

Όταν κάνετε κλικ στο κουμπί CreateOffer, θα δημιουργήσετε RTCPEERConnection, ορίστε τις μεθόδους Onicecandidate και OnAdstream και ζητήστε το σχηματισμό της προσφοράς SDP καλώντας τη μέθοδο CreateOffer ():

Λειτουργία CreateOFfer_Click () (Consoleofer_Click ("ContreoFfer_Click ()); PC1 \u003d Νέα webkitrttcpeerconnection (διακομιστές). // Δημιουργία rtcpeerconnection pc1.OCICANDIDATE \u003d PC1_OCONCADIDATE; // λειτουργία επανάκλησης που προκαλείται από την εμφάνιση ενός διακόπτη μέσων από τη μακρινή πλευρά. Μέχρι στιγμής, δεν έχει pc1.addstream (Localstream), // ας δίδουμε τοπικά τμήματα μέσων (υποθέτουμε ότι έχει ήδη ληφθεί) PC1. (// και στην πραγματικότητα ζητώντας το σχηματισμό προσφοράς PC1_CREATEFER_SUCCESS, PC1_CREATHER_ERROR, OFFERCARTAINTS).)

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

Σχηματίζοντας απάντηση SDP και υποψηφίους πάγου

Και η προσφορά SDP, και ο καθένας από τους υποψηφίους πάγου πρέπει να μεταφερθεί στην άλλη πλευρά και εκεί μετά τη λήψη της RTCPEERConnection για να καλέσουν τις μεθόδους SETREMOTEDESCRIECTIONES για προσφορά SDP και AddiceCandidate για κάθε υποψήφιο πάγου που προέρχεται από την άκρη. Ομοίως, στην αντίθετη κατεύθυνση για απάντηση SDP και απομακρυσμένους υποψηφίους πάγου. Η ίδια η απάντηση του SDP σχηματίζεται παρομοίως με προσφορά. Η διαφορά είναι ότι η μέθοδος CreateOffer καλείται, αλλά η μέθοδος Createanswer και πριν από αυτή τη μέθοδο RTCPEERConnection μεταδίδεται από την προσφορά SETRemotEdeScription SDP που λαμβάνεται από τον καλούντα.

Προσθέστε ένα άλλο στοιχείο βίντεο στο HTML:

Και η παγκόσμια μεταβλητή για τη δεύτερη RTCPEERConnection υπό την ανακοίνωση της πρώτης:

Var pc2;

Προσφορά επεξεργασίας και απάντηση SDP

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

Λειτουργία pc2_createanswer_successiption (desc); console.log ("pc2_createanswer_success ()", desc.sdp); pc1.setremotedsridstruction (desc);)

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

Λειτουργία pc2_createanswer_error (σφάλμα) (console.log ("pc2_createanswer_error ():", σφάλμα);)

Απάντηση Επιλογές σχηματισμού SDP:

Var unssuconstraints \u003d ("υποχρεωτική": ("offertoreceevedio": TRUE, "OFFERTOREVEVIDEO": TRUE)).

Μετά την παραλαβή της προσφοράς, θα δημιουργήσουμε το RTCPEERConnection και η φόρμα απαντήσαμε παρόμοια με την προσφορά:

Λειτουργία PC2_ReceIVEOFFER (DESC) (Consc) (Conscofer (), Desc), // Δημιουργήστε ένα αντικείμενο RTCPEERConnection για τον δεύτερο συμμετέχοντα με τον ίδιο τρόπο όπως και ο πρώτος PC2 \u003d Νέο WebKitrttcpeercaConnection (PC2.OCONICANDIDATE \u003d PC2_OCONICANDIDATE; Όταν εμφανιστεί το συμβάν υποψήφιο PC2.ONADDSTREAM \u003d PC_ONADDSTREAR, // Όταν εμφανιστεί ένα ρεύμα για να το συνδέσετε με HTML

Για το παράδειγμά μας, μεταφέρετε την προσφορά SDP από τον πρώτο συμμετέχοντα στο δεύτερο, καταργήσαμε την εγγραφή σας στη λειτουργία PC1 creatoffer.Επιτυχία () συμβολοσειρά κλήσεων:

Pc2_receedoffer (desc);

Για την εφαρμογή της επεξεργασίας των υποψηφίων πάγου, αισιόδοξων τα γεγονότα της ετοιμότητας των υποψηφίων πάγου του πρώτου συμμετέχοντος PC1_OCONICADIDATE () στη δεύτερη μεταβίβασή της στο δεύτερο:

PC2.addicecAndidate (Νέο RTCECCECECANDIDATE (EVENT.Candidate)).

Ο χειριστής συμβάντος της ετοιμότητας του δεύτερου συμμετέχοντος υποψηφίων πάγου είναι ο καθρέφτης πρώτος:

Λειτουργία pc2_onicecandidate (συμβάν) (console.log ("pc2_onicecadidate ():", event.candidate.candidate); pc1.addicecadidate (νέα rtcicecandidate (event.candidate)))))).

Λειτουργία επανάκλησης Για την προσθήκη του διακόπτη μέσων από τον πρώτο συμμετέχοντα:

Λειτουργία pc2_onaddstream (console.log ("pc_onaddstream ()"); remotevideo2.src \u003d url.createoorobjecturl (event.stream);)

Ολοκλήρωση της σύνδεσης

Προσθέστε ένα άλλο κουμπί στο HTML

Κλείνω το τηλέφωνο.

Και λειτουργία για να ολοκληρώσετε τη σύνδεση

Λειτουργία btnhangupclick () (// απενεργοποιήστε το τοπικό βίντεο από στοιχεία HTML

Αποθήκευση ως RTCTest3.html, βάλτε το διακομιστή και ανοίξτε στο πρόγραμμα περιήγησης. Αυτό το παράδειγμα εφαρμόζει διμερή μεταφορά εκτελεστών μέσων μεταξύ δύο RTCPEerconnection εντός ενός σελιδοδείκτη Browser. Για να οργανώσετε την ανταλλαγή προσφοράς και απάντησης SDP μέσω του δικτύου, θα απαιτηθούν οι υποψήφιοι στον πάγο μεταξύ των συμμετεχόντων και άλλων πληροφοριών αντί για μια άμεση διαδικασία πρόκλησης για την εφαρμογή της ανταλλαγής μεταξύ των συμμετεχόντων με οποιαδήποτε μεταφορά, στην περίπτωσή μας - υποδοχές ιστού.

Οθόνη εκπομπής

Χαρακτηριστικό GetUsermedia Μπορείτε επίσης να καταγράψετε την οθόνη και να μεταβείτε ως Mediastream, καθορίζοντας τις ακόλουθες παραμέτρους:

Var mediastreamconstraints \u003d (Ήχος: False, βίντεο: (Υποχρεωτικό: (Χρωμοδοσία: "οθόνη"), προαιρετικό :));

Για να αποκτήσετε πρόσβαση στην οθόνη, θα πρέπει να πραγματοποιηθούν αρκετές προϋποθέσεις:

• Ενεργοποιήστε τη σημαία οθόνης στο GetUsermedia () στο Chrome: // Σημαίες /, Chrome: // Σημαίες /;
• Το αρχείο προέλευσης πρέπει να μεταφορτωθεί από το HTTPS (SSL Origin).
• Η ροή ήχου δεν πρέπει να ζητηθεί.
• Δεν πρέπει να υπάρχουν αρκετές αιτήσεις σε μια καρτέλα Browser.

Βιβλιοθήκες για WebRTC.

Παρόλο που το WebRTC δεν έχει επίσης ολοκληρωθεί, υπάρχουν ήδη αρκετές βιβλιοθήκες που βασίζονται σε αυτό. Το JSSIP έχει σχεδιαστεί για να δημιουργεί Soft Splas Browser που εργάζονται με διακόπτες SIP, όπως ο αστερίσκος και το Camalio. Το Peerjs θα απλοποιήσει τη δημιουργία δικτύων P2P για την ανταλλαγή δεδομένων και το Holla θα μειώσει το πεδίο εφαρμογής που απαιτείται για την επικοινωνία P2P από τα προγράμματα περιήγησης.

Node.js και socket.io.

Προκειμένου να οργανωθούν η ανταλλαγή των υποψηφίων SDP και πάγου μεταξύ των δύο RTCPEERConnection μέσω του δικτύου, να χρησιμοποιήσετε το Node.js με την υποδοχή.

Εγκατάσταση της τελευταίας σταθερής έκδοσης του Node.js (για το Debian / Ubuntu) που περιγράφεται

$ sudo apt-get install python-software-properties python g ++ κάνει $ sudo προσθήκη-αποθετήριο ppa: chris-lea / node.js $ sudo apt-get ενημέρωση $ sudo apt-get install nodejs

Περιγράφεται η εγκατάσταση για άλλα λειτουργικά συστήματα

Ελεγχος:

$ Echo "sys \u003d απαιτούν" sysputs ("μήνυμα δοκιμής"); " \u003e nodetest1.js $ nodejs nodetest1.js

Χρήση του NPM (Manager Package Node), Εγκαταστήστε το Socket.io και μια πρόσθετη μονάδα Express:

$ Npm socket socket.io express

Ελέγξτε δημιουργώντας ένα αρχείο noDetest2.js για το τμήμα διακομιστή:

$ Nano nodetest2.js var app \u003d Απαιτείται ("Express") (), Server \u003d Απαιτείται ("http"). CreateServer (app), io \u003d απαιτούν ("socket.io"). Ακούστε (διακομιστής); Server.listen (80); // Εάν η θύρα 80 είναι ελεύθερη να app.get ("/", λειτουργία (req, res) (// κατά την πρόσβαση στη ρίζα rep.sendfile (__ dirname + "//nodetest2.html"); // παραιτείται ένα Αρχείο HTML)). io.sockets.on ("σύνδεση", λειτουργία (υποδοχή) (// κατά τη σύνδεση socket.emit ("συμβάν διακομιστή", (hello: "world")); // στείλτε το μήνυμα socket.on ("συμβάν πελάτη" , Λειτουργία (δεδομένα) (// και δηλώστε έναν χειριστή συμβάντων κατά την παραλαβή ενός μηνύματος από την κονσόλα πελάτη.log (δεδομένα);)););

Και nodetest2.html για το τμήμα πελάτη:

$ nano nodetest2.html

Ξεκινήστε το διακομιστή:

$ sudo nodejs nodetest2.js

Και ανοίξτε το http: // localhost: 80 σελίδες (εάν εκτελείται τοπικά στη θύρα 80ης) στο πρόγραμμα περιήγησης. Εάν όλα είναι επιτυχημένα, στην κονσόλα Javascript του προγράμματος περιήγησης, θα δούμε την ανταλλαγή γεγονότων μεταξύ του προγράμματος περιήγησης και του διακομιστή όταν είναι συνδεδεμένη.

Ανταλλαγή πληροφοριών μεταξύ RTCPEERConnection μέσω υποδοχών ιστού

Μέρος πελάτη

Αποθηκεύστε το κύριο παράδειγμα μας (rtcdemo3.html) κάτω από το νέο όνομα rtcdemo4.html. Συνδέστε τη βιβλιοθήκη Socket.io στο στοιχείο:

Και στην αρχή του Script JavaScript - συνδεθείτε με τις υποδοχές Web:

Var socket \u003d io.connect ("http: // localhost");

Θα αντικαταστήσω την άμεση κλήση των λειτουργιών ενός άλλου συμμετέχοντα για να την στείλετε μέσω των υποδοχών ιστού:

Λειτουργία CreateOffer_success (desc) (desc), socket.emit ("προσφορά", desc); ...) λειτουργία pc2_createanswer_success (desc) (... // pc1.SetremotedesRiption (desc); υποδοχή. Desc);) Λειτουργία PC1_OCONICACACANDIDATE (συμβάν) (... // PC2.ADDICADIDATE (νέο RTCECCECEDIDATE (συμβάντα.Candidate); Socket.Emit ("ICE1", συμβάν.Candidate)...) Λειτουργία PC2_OCONICECADIDATE (συμβάν) (συμβάν). ... // pc1.addicecadidate (νέο rtcicecandidate (event.candidate); socket.emit ("πάγος", event.candidate); ...)

Στη λειτουργία Hangup (), αντί για μια άμεση πρόσκληση για τις λειτουργίες του δεύτερου συμμετέχοντα, ας δώσουμε ένα μήνυμα μέσω υποδοχών ιστού:

Λειτουργία btnhangupclick () (... // remotevideo2.src \u003d "" pc2.Close (); pc2 \u003d null; socket.emit ("hangup", ());)

Και προσθέστε τους χειριστές παραλαβής μηνυμάτων:

Socket.on ("προσφορά", λειτουργία (δεδομένα) ("socket.on (" προσφορά "):", δεδομένα); pc2_receedoffer (δεδομένα);)); Socket.on ("απάντηση", λειτουργία (δεδομένα) (e console.log ("sockole.log (" socket.on ":", δεδομένα); pc1.setremoteDayscription (δεδομένα);)); Socket.on ("Ice1", λειτουργία ("socket.on" ("Ice1"): ", δεδομένα); pc2.addicecadidate (νέα rtcicecandidate (δεδομένα))); Socket.on ("Ice2", λειτουργία ("socket.on" ("Ice2"): ", δεδομένα); pc1.addicecadidate (νέα rtcicecandidate (δεδομένα))); Socket.On ("hangup", λειτουργία ("console.log" ("sockup.on (" hangup "):", δεδομένα); remotevideo2.src \u003d "" pc2.Close (); pc2 \u003d null;))) ?

Τμήμα διακομιστή

Στην πλευρά του διακομιστή, αποθηκεύστε το αρχείο NoDetest2 με το νέο όνομα RTCEST4.JS και μέσα στο io.sockets.on Λειτουργία ("Σύνδεση", λειτουργία (υποδοχή) (υποδοχή) (...) Προσθήκη λήψης και αποστολή μηνυμάτων πελατών:

Socket.on ("προσφορά", λειτουργία (δεδομένα) (// μετά την παραλαβή του μηνύματος "προσφορά", // από τη σύνδεση πελάτη σε αυτό το παράδειγμα είναι μόνο ένα, // στείλτε ένα μήνυμα πίσω μέσω της ίδιας υποδοχής υποδοχής. ("Προσφορά", δεδομένα) · // εάν ήταν απαραίτητο να στείλετε ένα μήνυμα σε όλες τις συνδέσεις, // εκτός από τον αποστολέα: // soket.Broadcast.emit ("προσφορά", δεδομένα) ·)); socket.on ("απάντηση", λειτουργία (δεδομένα) (υποδοχή.emit ("απάντηση", δεδομένα);)); socket.on ("πάγος1", λειτουργία (δεδομένα) (υποδοχή.emit ("ICE1", δεδομένα);)); Socket.On ("Ice2", λειτουργία (δεδομένα) (υποδοχή.emit ("πάγο2", δεδομένα);)); Socket.on ("hangup", λειτουργία (δεδομένα) (υποδοχή.emit ("hangup", δεδομένα);));

Επιπλέον, θα αλλάξετε το όνομα του αρχείου HTML:

// res.sendfile (__ dirname + "/nodetest2.html"); // Δώστε το αρχείο HTML Res.SendFile (__ Dirname + "/rtctcest4.html");

Εκκίνηση διακομιστή:

$ sudo nodejs nodetest2.js

Παρά το γεγονός ότι ο κώδικας και των δύο πελατών εκτελείται εντός του ίδιου σελιδοδείκτη του προγράμματος περιήγησης, όλη η αλληλεπίδραση μεταξύ των συμμετεχόντων στο παράδειγμά μας πραγματοποιείται πλήρως μέσω του δικτύου και των "διαδίδει" οι συμμετέχοντες δεν απαιτούν πλέον ειδικές δυσκολίες. Ωστόσο, αυτό που κάναμε ήταν επίσης πολύ απλές - αυτές οι τεχνολογίες και είναι καλές για την απλότητα της χρήσης τους. Αφήστε μερικές φορές παραπλανητικές. Συγκεκριμένα, δεν θα ξεχνάμε ότι χωρίς διακομιστές αναισθητοποίησης / στροφής, το παράδειγμά μας δεν θα μπορέσει να εργαστεί με την παρουσία μεταφράσεων και οθονών δικτύου.

συμπέρασμα

Το προκύπτον παράδειγμα είναι πολύ υπό όρους, αλλά εάν έχετε λίγο χειριστές εκδηλώσεων, έτσι ώστε να μην διαφέρουν από το καλώντας και το καλούμενο μέρος, αντί για δύο αντικείμενα PC1 και PC2 για να κάνουν τη συστοιχία RTCPEERCANCANCENT και να εφαρμόσει δυναμική δημιουργία και απομάκρυνση στοιχείων και απομάκρυνσης στοιχείων

Μπορεί να θεωρηθεί ότι είναι πολύ σύντομα χάρη στον WebRTC, θα υπάρξει ένα πραξικόπημα όχι μόνο στην υποβολή μας φωνητικών και βίντεο, αλλά και πώς αντιλαμβανόμαστε το Διαδίκτυο στο σύνολό του. Το WebRTC είναι τοποθετημένο όχι μόνο ως μια τεχνολογία για κλήσεις από το πρόγραμμα περιήγησης στο πρόγραμμα περιήγησης, αλλά και ως τεχνολογία επικοινωνιών σε πραγματικό χρόνο. Βιντεοκλήση, την οποία έχουμε αποσυναρμολογήσει, μόνο ένα μικρό μέρος πιθανών επιλογών για χρήση. Ήδη υπάρχουν παραδείγματα εκπομπής οθόνης (Screensering) και συνεργασίας και ακόμη και το δίκτυο P2P της παράδοσης περιεχομένου με βάση τα προγράμματα περιήγησης χρησιμοποιώντας το Rtcdatachannel.