Εγκατάσταση WebRTC. Πώς να οργανώσετε WebRTC Online Broadcast χρησιμοποιώντας Webcam και VPS Server. Σύνδεση νέου χρήστη

Το 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.

Ο σκοπός αυτού του άρθρου είναι σε δείγμα επίδειξης της συνομιλίας Video Peer (P2P Video Chat) για να εξοικειωθεί με τη δομή και την αρχή της εργασίας. Για το σκοπό αυτό, χρησιμοποιούμε το δείγμα επίδειξης πολλαπλών χρηστών του webrtc.io-demo peering video chat. Μπορεί να μεταφορτωθεί με αναφορά: https://github.com/webrtc/webrtc.io-demo/tree/master/site.

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

Έτσι, η λήψη από το github ένα δείγμα επίδειξης μιας συνομιλίας Video Peer, για να δημοσιεύσετε στο δίσκο με έναν προσωπικό υπολογιστή στον καθορισμένο κατάλογο για την εφαρμογή μας "webrtc_demo".


Σύκο. ένας

Ως εξής από τη δομή (εικ. 1), η συνομιλία μέσω τηλεφώνου αποτελείται από scripts client script.js και διακομιστή server.js που εφαρμόζονται στη γλώσσα προγραμματισμού JavaScript. Script (βιβλιοθήκη) webrtc.io.js (πελάτης) - παρέχει επικοινωνίες σε πραγματικό χρόνο μεταξύ προγραμμάτων περιήγησης από peer-to-name: "πελάτης πελάτη" και webrtc.i.js (πελάτης) και webrtc.i.js (server), Χρησιμοποιώντας το πρωτόκολλο WebSocket, δώστε μια σύνδεση διπλής όψης μεταξύ του προγράμματος περιήγησης και του διακομιστή ιστού της αρχιτεκτονικής του πελάτη.

Το script webrtc.io.js (διακομιστή) εισέρχεται στη βιβλιοθήκη Webrtc.io και βρίσκεται στο Node_Modules \\ WebRTC.IO \\ ALB κατάλογος. Η διασύνδεση της συνομιλίας Video Index.html υλοποιείται σε HTML5 και CSS3. Τα περιεχόμενα των αρχείων εφαρμογών webrtc_demo μπορούν να προβληθούν ένας από τους συντάκτες HTML, όπως το "Notepad ++".

Η αρχή της συνομιλίας βίντεο θα ελεγχθεί στο σύστημα αρχείων PC. Για να ξεκινήσετε το διακομιστή (Server.js) στον υπολογιστή, πρέπει να ορίσετε το χρόνο εκτέλεσης Node.js. Ο Node.js σας επιτρέπει να τρέχετε javascript έξω από το πρόγραμμα περιήγησης. Μπορείτε να κατεβάσετε το Node.js με αναφορά: http://nodejs.org/ (έκδοση V0.10.13 στις 07/15/13). Στην κύρια σελίδα του ιστότοπου Node.org, κάντε κλικ στο κουμπί λήψης και μεταβείτε στη διεύθυνση http://nodejs.org/download/. Για τους χρήστες των Windows, κατεβάσετε πρώτα το Win.Installer (.msi), τότε εκτελέστε το Win.Installer (.msi) στον υπολογιστή και εγκαταστήστε το Nodejs και το "NPM Package Manager" στον κατάλογο αρχείων προγράμματος.




Σύκο. 2.

Έτσι, ο Node.js αποτελείται από ένα περιβάλλον ανάπτυξης κωδικών JavaScript και το περιβάλλον εκτέλεσης, καθώς και από ένα σύνολο εσωτερικών ενοτήτων που μπορούν να εγκατασταθούν χρησιμοποιώντας έναν διαχειριστή ή διαχειριστή πακέτου NPM.

Για να εγκαταστήσετε τις μονάδες, είναι απαραίτητο να εκτελέσετε την εντολή στη γραμμή εντολών από τον κατάλογο εφαρμογής (για παράδειγμα, "Webrtc_demo): nPM Εγκατάσταση ονόματος_Module. Κατά τη διάρκεια της διαδικασίας εγκατάστασης, οι μονάδες Manager NPM δημιουργούν το φάκελο Node_Modules στον κατάλογο από το οποίο εκτελέστηκε η εγκατάσταση. Στη διαδικασία λειτουργίας, ο Nodejs συνδέει αυτόματα τις μονάδες από τον κατάλογο Node_Modules.

Έτσι, μετά την εγκατάσταση του NODE.Js, ανοίγουμε τη γραμμή εντολών και ενημερώνουμε τη ρητή ενότητα στον κατάλογο φακέλου Node_Modules WebRTC_Demo χρησιμοποιώντας το Manager Package NPM:

C: \\ webrtc_demo\u003e npm εγκατάσταση express

Το Express Module είναι ένα πλαίσιο Web για τον Node.js ή μια πλατφόρμα ιστού για την ανάπτυξη εφαρμογών. Για να έχετε παγκόσμια πρόσβαση σε Express, μπορείτε να το ορίσετε με αυτόν τον τρόπο: npm install -g express.

Τότε θα ενημερώσω τη μονάδα webrtc.io:

C: \\ webrtc_demo\u003e npm εγκαταστήστε webrtc.io

Στη συνέχεια, στη γραμμή εντολών, ξεκινήστε το διακομιστή: Server.js:

C: \\ webrtc_demo\u003e κόμβος server.js


Σύκο. 3.

Όλοι, ο διακομιστής λειτουργεί με επιτυχία (Σχήμα 3). Τώρα, χρησιμοποιώντας ένα πρόγραμμα περιήγησης ιστού, μπορείτε να επικοινωνήσετε με το διακομιστή μέσω της διεύθυνσης IP και να κατεβάσετε την ιστοσελίδα Index.html με την οποία το πρόγραμμα περιήγησης ιστού θα ανακτήσει τον κώδικα του σεναρίου-πελάτη - script.js και τον κώδικα του webrtc.io. Js κώδικα δέσμης ενεργειών και την εκτέλεση τους. Για τη λειτουργία της συνομιλίας Video Peer (για να εγκαταστήσετε μια σύνδεση μεταξύ δύο προγραμμάτων περιήγησης), είναι απαραίτητο από δύο προγράμματα περιήγησης που υποστηρίζουν το WebRTC, επικοινωνήστε με τη διεύθυνση IP στο διακομιστή σήματος που εκτελείται στο Node.js.

Ως αποτέλεσμα, η διεπαφή του τμήματος πελάτη της εφαρμογής επικοινωνίας (συνομιλία μέσω βίντεο) ανοίγει με ένα αίτημα για επίλυση της πρόσβασης στο θάλαμο και το μικρόφωνο (Εικ. 4).



Σύκο. τέσσερις

Αφού κάνετε κλικ στο κουμπί "Επιτρέψτε", η κάμερα και το μικρόφωνο για την επικοινωνία πολυμέσων είναι συνδεδεμένα. Επιπλέον, μέσω της διεπαφής συνομιλίας βίντεο μπορεί να κοινοποιηθεί με δεδομένα κειμένου (Εικ. 5).



Σύκο. πέντε

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

Προοίμιο. P2P βίντεο συνομιλίας στη βάση Webrtc. - Αυτή είναι μια εναλλακτική λύση στο Skype και άλλα μέσα επικοινωνίας. Τα βασικά στοιχεία της συνομιλίας βίντεο P2P με βάση το WebRTC είναι περιηγητής και διακομιστής επικοινωνίας. P2P Video - Αυτά είναι τα αναγνωρισμένα βίντεο στα οποία ο διακομιστής δεν συμμετέχει στη μεταφορά ροών πληροφοριών. Οι πληροφορίες μεταδίδονται απευθείας μεταξύ των προγραμμάτων χρήστη (Pirongs) χωρίς πρόσθετα προγράμματα. Εκτός από τα προγράμματα περιήγησης σε δείγματα βίντεο P2P, χρησιμοποιούνται διακομιστές επικοινωνίας, οι οποίοι έχουν σχεδιαστεί για να καταχωρούν τους χρήστες, την αποθήκευση δεδομένων σχετικά με αυτά και τη διασφάλιση της εναλλαγής μεταξύ χρηστών. Τα προγράμματα περιήγησης που υποστηρίζουν τις τελευταίες τεχνολογίες WebRTC και HTML5 παρέχουν τη μετάδοση άμεσων μηνυμάτων κειμένου και αρχείων, καθώς και να παρέχουν επικοινωνία φωνής και βίντεο σε δίκτυα IP.

Έτσι, οι αίθουσες συνομιλίας, τα web chats, οι συζητήσεις φωνής και βίντεο στη διεπαφή ιστού, το IMS, VoIP είναι υπηρεσίες που παρέχουν επικοινωνία σε απευθείας σύνδεση μέσω σύνθετων δικτύων με μεταγωγή παρτίδας. Κατά κανόνα, οι υπηρεσίες επικοινωνίας απαιτούν ή εγκαθιστούν εφαρμογές πελατών σε συσκευές χρήστη (υπολογιστές, smartphones κ.λπ.) ή εγκαθιστώντας plug-ins και επεκτάσεις σε προγράμματα περιήγησης. Οι υπηρεσίες έχουν τα δικά τους δίκτυα επικοινωνίας, τα περισσότερα από τα οποία είναι χτισμένα στην αρχιτεκτονική του πελάτη-server.

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

Το πρόβλημα της ενσωμάτωσης των υπηρεσιών επικοινωνίας σε πραγματικό χρόνο (συνομιλία, τηλεφωνία, τηλεδιάσκεψη), δηλ. Ενσωμάτωση των καναλιών μετάδοσης φωνής, βίντεο, δεδομένων και πρόσβασης σε αυτά χρησιμοποιώντας μία εφαρμογή (πρόγραμμα περιήγησης) μπορούν να λυθούν σε ομότιμους ή p2P Βίντεοphaty (Πειρισμός, σημείο-σημείο) με βάση Το πρωτόκολλο WebRTC. Στην πραγματικότητα, το πρόγραμμα περιήγησης που υποστηρίζει το WebRTC γίνεται μια ενιαία διασύνδεση για όλες τις συσκευές χρήστη (PC, Smartphones, iPads, τηλέφωνα IP, κινητά τηλέφωνα κ.λπ.) που λειτουργούν με υπηρεσίες επικοινωνίας.

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

Οι διακομιστές (διακομιστές επικοινωνίας) P2P δείγματα προορίζονται μόνο για την εγγραφή χρηστών, αποθηκεύοντας δεδομένα χρήστη και τη ρύθμιση μιας σύνδεσης (εναλλαγή) μεταξύ των προγραμμάτων χρήστη. Τα πρώτα δικαιώματα P2P εφαρμόστηκαν χρησιμοποιώντας τεχνολογίες Flash. Το Flash P2P Video Sits ισχύει, για παράδειγμα, σε κοινωνικά δίκτυα. Flash P2P Δεν παρέχουν υψηλής ποιότητας μετάδοση δεδομένων πολυμέσων. Επιπλέον, για την έξοδο της ροής φωνής και βίντεο από το μικρόφωνο και τη βιντεοκάμερα σε τηλέφωνα βίντεο P2P Flash, απαιτείται το φλας στο πρόγραμμα περιήγησης στο Web.

Αλλά οι τηλεπικοινωνιακές υπηρεσίες της νέας γενιάς περιλαμβάνουν web Communicationsπου χρησιμοποιούνται για να επικοινωνούν μόνο μέσω του Διαδικτύου Περιηγητές και Επικοινωνία διακομιστέςΥποστηρικτικός Πρωτόκολλα WEBRTC και τις προδιαγραφές Html5.. Οποιαδήποτε συσκευή χρήστη (PC, iPad, smartphones κ.λπ.), εξοπλισμένη με ένα τέτοιο πρόγραμμα περιήγησης, μπορεί να παρέχει υψηλής ποιότητας φωνητικές και βιντεοκλήσεις, καθώς και να μεταδίδει άμεσα μηνύματα κειμένου και αρχεία.

Έτσι, η νέα τεχνολογία των Web Communications (chats P2P, video chats) είναι το πρωτόκολλο WebTc. Το WebRTC σε συνδυασμό με το HTML5, CSS3 και JavaScript σάς επιτρέπουν να δημιουργήσετε διάφορες εφαρμογές ιστού. Το WeBrt έχει σχεδιαστεί για να οργανώνει τις επικοινωνίες ιστού (ομοτίτως δίκτυα) σε πραγματικό χρόνο με αρχιτεκτονική peer-to-peer. Οι αίθουσες συνομιλίας με βάση το P2P WebRTC παρέχουν τη μεταφορά αρχείων, καθώς και από το κείμενο, τους χρήστες επικοινωνίας μέσω του διαδικτύου μέσω του Διαδικτύου χρησιμοποιώντας μόνο προγράμματα περιήγησης ιστού χωρίς τη χρήση εξωτερικών προσθηκών και plug-ins στο πρόγραμμα περιήγησης.

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

Το WebRTC εφαρμόζεται από τρία API JavaScript:

  • Rtcpeerconnection;
  • Mediastream (getusermedia);
  • Rtcdatachannel.

Τα προγράμματα περιήγησης μεταδίδουν δεδομένα πολυμέσων στο πρωτόκολλο SRTP που εκτελείται πάνω από το UDP. Δεδομένου ότι το NAT δημιουργεί προβλήματα για τα προγράμματα περιήγησης (πελάτες) που βρίσκονται πίσω από τους δρομολογητές NAT που χρησιμοποιούν συνδέσεις P2P μέσω του Διαδικτύου, η αναισθητοποίηση χρησιμοποιείται για την ανίχνευση NAT. Το STUN είναι ένα πρωτόκολλο πελάτη-διακομιστή που λειτουργεί μέσω του πρωτοκόλλου μεταφοράς UDP. Σε συνομιλίες P2P, κατά κανόνα, εφαρμόζεται ένας δημόσιος διακομιστής αναισθητοποίησης και οι πληροφορίες που λαμβάνονται από αυτό χρησιμοποιούνται για συνδέσεις UDP μεταξύ δύο προγραμμάτων περιήγησης εάν πρόκειται για NAT.

Παραδείγματα εφαρμογών εφαρμογών WebRTC (P2P Chat Rooms, φωνητικές και βίντεο Web chats):
1. P2P BISTOR CHAT BISTRI (με ένα κλικ Σύνολο βίντεο, συνομιλία P2P), που γίνεται με βάση το WebRTC, μπορεί να ανοίξει στο Bistri. Το Bistri λειτουργεί σε ένα πρόγραμμα περιήγησης χωρίς να εγκατασταθεί πρόσθετα προγράμματα και plugins. Η ουσία της εργασίας είναι η εξής: Ανοίξτε τη συνομιλία βίντεο P2P στο καθορισμένο σύνδεσμο, αφού εγγραφείτε στη διεπαφή που ανοίγει, καλεί τους συνεργάτες, στη συνέχεια από τη λίστα προγραμμάτων-πελάτη, επιλέξτε τον συνεργάτη που βρίσκεται στο δίκτυο και κάντε κλικ στο δίκτυο Βίντεο κλήσης ".

Ως αποτέλεσμα, το Mediastream (GetUsermedia) θα καταγράψει τα Microphone + WebCams και ο διακομιστής θα εκτελέσει την ανταλλαγή μηνυμάτων σήματος με τον επιλεγμένο συνεργάτη. Μετά την ανταλλαγή μηνυμάτων σήματος, το API Peerconnection δημιουργεί κανάλια για τη μετάδοση ροής φωνής και βίντεο. Επιπλέον, το Bistri μεταφέρει άμεσα μηνύματα κειμένου και αρχεία. Στο ΣΧ. 1 Εμφανίζει το Bistri Video Chat Screenshot διασύνδεσης P2P.


Σύκο. 1. P2P Video Chat Bistri

2. Twelephone (P2P Video Chat, Chat Video, P2P Chat, Sip Twelephone) - Αυτή η εφαρμογή-πελάτη είναι χτισμένη στη βάση HTML5 και WebRTC, η οποία σας επιτρέπει να εκτελέσετε φωνητικές και βιντεοκλήσεις, καθώς και μεταδίδουν άμεσα μηνύματα κειμένου, δηλ. Το Twilephone περιλαμβάνει δοκιμή συνομιλίας P2P, συνομιλία μέσω βίντεο και SIP Twelephone. Πρέπει να σημειωθεί ότι η Twelephone υποστηρίζει το πρωτόκολλο SIP και τώρα μπορείτε να κάνετε και να λαμβάνετε κλήσεις φωνής και βίντεο από τηλέφωνα SIP χρησιμοποιώντας το λογαριασμό σας στο Twitter ως τον αριθμό τηλεφώνου. Επιπλέον, τα μηνύματα κειμένου μπορούν να εισαχθούν με φωνή μέσω του μικροφώνου και το πρόγραμμα φωνητικής αναγνώρισης εισέρχεται στο κείμενο στη συμβολοσειρά "Αποστολή μηνύματος".

Το Twelphone είναι μια ηλεκτρονική τηλεφωνία που λειτουργεί με βάση το πρόγραμμα περιήγησης Google Chrome, ξεκινώντας με την έκδοση 25, χωρίς πρόσθετο λογισμικό. Το Twelphone αναπτύχθηκε από τον Chris Matthieu. Το διακομιστή Twuephone βασίζεται στον κόμβο. Ο διακομιστής (διακομιστής επαφών) χρησιμοποιείται μόνο για την εγκατάσταση συνδέσεων P2P μεταξύ δύο προγραμμάτων περιήγησης ή WebRTC πελάτες. Η εφαρμογή Twelephone δεν διαθέτει δικά του εργαλεία εξουσιοδότησης και επικεντρώνεται στη σύνδεση με έναν λογαριασμό (λογαριασμό) στο Twitter.

Στο ΣΧ. Το 2 είναι ένα στιγμιότυπο οθόνης της διασύνδεσης P2P της Ρ2Ρ



Σύκο. 2. P2P Twelephone

3. Ομάδα P2P Video CHANT CONSELAT.IO βασίζεται στις τελευταίες τεχνολογίες WebRTC και HTML5. Το COSSELAT Video Chat βασίζεται στη βιβλιοθήκη SimpleWebrtc και έχει σχεδιαστεί για να επικοινωνεί μέχρι 6 πελάτες Peer σε ένα δωμάτιο (για επικοινωνία, καθορίζει το όνομα του κοινού χώρου για τους πελάτες ομότιμων στο "Όνομα της συζήτησης"). Το P2P Video Chat ConStat παρέχει υπηρεσίες επικοινωνίας στους χρήστες χωρίς εγγραφή στον διακομιστή επαφών. Στο ΣΧ. Το 3 αντιπροσωπεύεται από το chonsat video chat screenshot διασύνδεσης P2P.



Σύκο. 3. Ομάδα συνομιλίας τηλεοπτικών συνομιλιών P2P.io

Για να συμμετάσχετε σε δείγματα βίντεο P2P με βάση το WebRTC, πρέπει να έχετε ένα πρόγραμμα περιήγησης που υποστηρίζει το πρωτόκολλο WebRTC και τις προδιαγραφές HTML5. Επί του παρόντος, τα προγράμματα περιήγησης Google Chrome, ξεκινώντας από την έκδοση 25 και το Nightly Mozilla Firefox στηρίξτε το πρωτόκολλο WebRTC και τις προδιαγραφές HTML5. Εφαρμογές εφαρμογής Webrtc και εφαρμογές ήχου υπερβαίνει τις εφαρμογές Flash.

Οι Ευρωπαίοι χρήστες του δικτύου χωρίστηκαν σε δύο μέρη: σύμφωνα με μια έρευνα του Ινστιτούτου Δημόσιας Ανάλυσης της Κοινής Γνώμης στο Allenbach (Γερμανία), το Skype, η συνομιλία και τα συστήματα άμεσων μνήμης έγιναν αναπόσπαστο μέρος της καθημερινής ζωής για 16,5 εκατομμύρια ενήλικες και παιδιά, 9 Million Χρησιμοποιήστε αυτές τις υπηρεσίες από την περίπτωση περισθείας και 28 εκατομμύρια δεν τους άγγιξαν.

Η κατάσταση μπορεί να αλλάξει, διότι τώρα στο Firefox ενσωματωμένο Τεχνολογία επικοινωνίας σε πραγματικό χρόνο (Webrtc.), καθώς και τον ίδιο τον πελάτη. Ξεκινήστε τη συνομιλία ήχου και βίντεο τώρα δεν είναι πιο δύσκολο από το άνοιγμα της τοποθεσίας. Υπηρεσίες όπως το Facebook και το Skype στοιχηματίζουν σε λύσεις χρησιμοποιώντας έναν ξεχωριστό πελάτη και δημιουργώντας ένα λογαριασμό.

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

Για να ξεκινήσετε τη συζήτηση, πρέπει μόνο να περάσετε από τη σύνδεση. Η επικοινωνία παραμένει ιδιωτικήΔεδομένου ότι η ροή δεδομένων είναι κρυπτογραφημένη. Επικοινωνία σε πραγματικό χρόνο μέσω του προγράμματος περιήγησης, η Google άρχισε να συμμετέχει ενεργά το 2011, πότε και δημοσίευσε τον πηγαίο κώδικα για την εφαρμογή WebRTC.

Σύντομα, το Chrome και ο Firefox έλαβαν τους δικούς τους κινητήρες WebRTC. Επί του παρόντος, οι επιλογές κινητής τηλεφωνίας τους είναι εξοπλισμένες με αυτή την τεχνολογία και εγκαθίστανται με το Android 5.0 από τον κινητήρα WebView 3.6, το οποίο χρησιμοποιείται από εφαρμογές.

Για τις επικοινωνίες σε πραγματικό χρόνο, οι κατάλληλες διασυνδέσεις JavaScript πρέπει να υλοποιηθούν στο Web Viewer. Με τη βοήθεια του GetUsermedia, το λογισμικό ενεργοποιεί τη δέσμευση από τις πηγές ήχου, δηλαδή από κάμερα web και μικρόφωνο. Η RTCPEERConnection είναι υπεύθυνη για τη δημιουργία μιας σύνδεσης, καθώς και για την ίδια την επικοινωνία.

Παράλληλα με την ενσωμάτωση στο πρόγραμμα περιήγησης, η ομάδα εργασίας της παγκόσμιας κοινοπραξίας ιστού (W3C) ανάγκασε τη διαδικασία τυποποίησης WebRTC. Πρέπει να ολοκληρωθεί το 2015.

Το WebRTC είναι ικανοποιημένο με το μικρό

Για να χρησιμοποιήσετε την υπηρεσία WebRTC, δεν απαιτούνται πολλοί πόροι, καθώς ο διακομιστής συνδέει μόνο τους βοηθούς. Η εγκατάσταση της ένωσης επίσης δεν αντιπροσωπεύει μια ιδιαίτερη πολυπλοκότητα. Πρώτον, το πρόγραμμα περιήγησης εξυπηρετεί το σήμα WEBRTC στο σήμα που σχεδιάζει να ξεκινήσει μια κλήση. Από το διακομιστή, λαμβάνει έναν σύνδεσμο HTTPS - η σύνδεση πραγματοποιείται σε κρυπτογραφημένη μορφή. Αυτός ο χρήστης συνδέσμου στέλνει τον συνομιλητή του. Μετά από αυτό, το πρόγραμμα περιήγησης ζητά από τον χρήστη να έχει πρόσβαση στην κάμερα web και το μικρόφωνο.

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

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

Εάν η άμεση σύνδεση δεν μπορεί να εγκατασταθεί, το WebRTC ψάχνει για άλλη διαδρομή. Για παράδειγμα, αυτό συμβαίνει όταν οι ρυθμίσεις δικτύου εμποδίζουν τον διακομιστή STUN να παρέχει μια διεύθυνση IP. Το πρότυπο WebRTC προβλέπει ότι σε αυτή την περίπτωση η συνομιλία θα πραγματοποιηθεί, αλλά με το ενδιάμεσο στροφή στον διακομιστή Turn (διασταύρωση χρησιμοποιώντας ρελέ γύρω από το NAT). Έτσι, στην ιστοσελίδα Netscan.co μπορείτε να ελέγξετε αν το WebRTC εφαρμόζεται στον υπολογιστή σας και με την πρόσβαση στο δίκτυό σας.

Πώς να συνδεθείτε

Πρώτα πρέπει να καταχωρίσετε μια συνομιλία (1). Η υπηρεσία WebRTC δίνει έναν σύνδεσμο που θα σταλεί στον συνομιλητή. Το πρόγραμμα περιήγησης που χρησιμοποιεί το stunner διαπιστώνει τη δική του διεύθυνση IP (2), το στέλνει στην υπηρεσία και λαμβάνει έναν συνεργάτη IP για την εγκατάσταση της άμεσης ένωσης (3). Εάν δεν μπορείτε να χρησιμοποιήσετε την αναισθητοποίηση, η συνομιλία ανακατεύεται χρησιμοποιώντας το διακομιστή Turnner (4).

Η επικοινωνία σχετικά με την τεχνολογία WebRTC στο πρόγραμμα περιήγησης αρχίζει να χρησιμοποιεί τον κωδικό JavaScript. Μετά από αυτό, τρεις κινητήρες είναι υπεύθυνοι για την επικοινωνία: Οι μονάδες φωνητικής και βίντεο συλλέγουν δεδομένα πολυμέσων από μια κάμερα και το μικρόφωνο και ο κινητήρας μεταφοράς συνδυάζει πληροφορίες και προωθεί το ρεύμα σε κρυπτογραφημένη μορφή χρησιμοποιώντας το πρωτόκολλο SRTP (Secure Protocol σε πραγματικό χρόνο).

Ποια προγράμματα περιήγησης εργάζονται με webrtc

Το Chrome και ο Firefox είναι εξοπλισμένοι με έναν κινητήρα WEBRTC που χρησιμοποιεί τέτοιες υπηρεσίες όπως το Talky.io. Το πρόγραμμα περιήγησης Mozilla μπορεί να λειτουργήσει απευθείας με τον δικό του πελάτη.

Η Google και το Mozilla εξακολουθούν να αναπτύσσουν μια ιδέα επικοινωνίας σε πραγματικό χρόνο: Το Chrome μπορεί να κρατήσει ένα διάσκεψη WebRTC με πολλούς συμμετέχοντες και ο νέος πελάτης HELLO στο Firefox έχει σχεδιαστεί με τη θυγατρική του Telefonica Telecommination Giant. Η Apple έχει παραμείνει ακόμα στην άκρη, στο Safari Webrtc να περιμένει ακόμα. Ωστόσο, υπάρχουν πολλές εναλλακτικές εφαρμογές για iOS και plug-ins για σαφάρι.

Η Microsoft είναι κάπως διαφορετική. Ως ιδιοκτήτης της ανταγωνιστικής υπηρεσίας Skype, αυτή η εταιρεία δεν πρόκειται να είναι τόσο εύκολο να κατορθώσει πριν από τον Webrtc. Αντ 'αυτού, η Microsoft αναπτύσσει μια τεχνολογία που ονομάζεται ORTC (επικοινωνία αντικειμένων σε πραγματικό χρόνο) για τον Internet Explorer.

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

Φωτογραφία:κατασκευαστές; Goodluz / Fotolia.com.

Για πολλά χρόνια για κλήσεις από το πρόγραμμα περιήγησης εδώ και πολλά χρόνια: 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 με ένα κουμπί και στοιχείο

WEBRTC - Πρώτη γνωριμία

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 μετά από σειρές με στοιχεία

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


Επίσης, στην αρχή του κώδικα 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.setremoteDayscription (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.