Webrtc’nin bir arka uç ihtiyacı var mı?
Herhangi bir sunucu olmadan webrtc mümkün değil mi sinyal sunucusu değil mi?
Özet
WebRTC, tarayıcılar arasında gerçek zamanlı medya ve veri kanallarını sağlayan bir bileşen paketidir. Ancak, yine de belirli işlevler için bir arka uç hizmeti gerektirir. Bu makalede, bir arka uç hizmetinin gerekli olmasının nedenlerini, WebRTC’nin kurulmasında yer alan bileşenler ve donanım, desteklenen ses ve video kodekleri ve bir dizin ve stun sunucunun önemini araştıracağız.
1. Webrtc nedir?
WebRTC, geliştiricilerin tarayıcılar arasında gerçek zamanlı medya ve veri kanalları kurmasına izin veren bir bileşen paketidir. Google tarafından oluşturuldu ve Chrome, Firefox, Opera ve Microsoft Edge’de (ORTC) gönderilen temel bileşenleri içeriyor.
2. Neden hala bir arka uç hizmetine ihtiyacınız var?
WebRTC’nin yeteneklerine rağmen, belirli işlevler için bir arka uç hizmeti gereklidir. Örneğin, birini aramak için, genellikle dinamik olan adreslerini bilmeniz gerekir. Bu bilgilerin bir sunucuda depolanması ve yönetilmesi gerekiyor. Ayrıca, bir arka uç hizmeti bir kullanıcı için tüm cihazları takip edebilir ve gelen aramaları bilgilendirebilir.
3. WebRTC’nin kurulmasında hangi bileşenler ve donanım dahildir??
WebRTC, kameralar, hoparlörler ve mikrofonlar gibi fiziksel ortamın yanı sıra yankı iptali ve arka plan iptal donanımı gibi diğer donanımların kurulmasına yardımcı olur. Ayrıca, STUN (NAT için Oturum Traaversal yardımcı programları) kullanarak ağın yapılandırılmasına yardımcı olur.
4. WebRTC tarafından hangi ses kodekleri desteklenir?
WebRTC, G711, ILBC ve OPUS dahil olmak üzere çeşitli ses kodeklerini destekler. Opus, WebRTC’de yaygın olarak kullanılan yüksek kaliteli bir değişken kodektir.
5. WebRTC tarafından hangi video kodekleri desteklenir?
WebRTC, Google’ın h’nin telifsiz varyasyonları olan VP8 ve VP9 kodeklerini destekler.264/s.265. Ayrıca h’yi destekler.264.
6. WebRTC’de ses kodekleri neden önemlidir??
Ses kodekleri, paket kaybı, sesin kodlanması ve kod çözülmesi, hata düzeltmesi, gürültü iptali, yankı iptali ve hacim tesviye gibi görevleri işler. WEBRTC’nin mobil cihazlarda ve masaüstlerinde popülaritesine katkıda bulunurlar.
7. Kimin arayabileceğinin dizini nedir??
Bir çağrı başlatmak için, alıcının adresini bilmeniz gerekir. Dizin, kullanıcıların bir sunucu ile check -in yapmalarına ve iletişim bilgilerini sağlamasına olanak tanıyan dinamik beyaz sayfalar görevi görür. Bu, XMPP, SIP veya özel protokoller kullanılarak uygulanabilir.
8. Neden sersemletici bir sunucuya ihtiyacınız var?
Sersemletici (NAT için Oturum Geri Dönüş Yardımcı Programları) Sunucusu, bir cihazın harici IP adresini belirlemeye yardımcı olur ve iki cihazın doğrudan iletişim kurabilip iletişim kuramayacağını kontrol eder. Akranlar arasında bağlantıların kurulmasında önemli bir rol oynar.
9. Turn sunucusu nedir?
Güvenlik duvarı sınırlamaları nedeniyle eşler arası bir oturum mümkün değilse, bir dönüş (NAT çevresindeki röleler kullanılarak geçiş) sunucusu gereklidir. Güvenlik duvarı kısıtlamalarını atlayarak cihazlar arasında veri aktarmaya yardımcı olur.
10. Neden Sinch gibi bir arka uç hizmeti kullanmayı düşünmelisiniz??
Sinyal, sersemletme ve dönüş için sunucular kurma ve bakımı karmaşık ve pahalı olabilir. Bir arka uç servis sağlayıcısı olarak Sinch, ölçeklenebilir ve uygun maliyetli çözümler sunar. Yılda bir milyar dakika idare ederler ve farklı cihazlar ve ağ koşulları için optimize edilmiş WebRTC SDK’ları sağlarlar.
11. Webrtc sadece arka uç hakkında mı?
Hayır, WebRTC hem ön uç hem de arka uç yönlerini içerir. Örneğin Sinch, cihazlar ve ağ koşulları arasında optimum performans sağlamak için WebRTC SDK’sını özelleştirir ve yapılandırır. Trafikten kaliteli metriklere göre kayıt kalitesini ayarlamak için uyarlanabilir opus gibi özellikleri uyguluyorlar.
12. Sinch kullanmanın faydaları nelerdir?
Sinch, gerçek zamanlı iletişim konusunda uzmanlık sunar ve özelleştirilmiş WebRTC SDK’ları, optimize edilmiş kodekler ve dağıtılmış bir ağ sağlar. Veri aktarımı için fiyatlandırmaları uygun maliyetlidir ve stratejik olarak yerleştirilmiş sunucular aracılığıyla düşük gecikmeli iletişim sağlarlar.
13. Bir konuşmada ağ gecikmesi ne kadar fark edilir?
Bir konuşma sırasında yaklaşık 250 ms ağ gecikmesi fark edilir. Ağ gecikmesi, işlem süresi ve veri kodlaması gibi faktörler genel gecikmeye katkıda bulunabilir.
14. Webrtc’de bir arka uç hizmeti ne gibi işlevler sağlar??
Bir arka uç hizmeti, dizin yönetimi, sinyal, sersemletme ve dönüş sunucu yönetimi ve kullanıcılar için cihaz takibi gibi görevleri işler.
15. WebRTC’yi mobil cihazlarda ve masaüstünde popüler yapan şey?
WebRTC’nin ses ve video kodeklerine verdiği desteği, kullanım kolaylığı ve gerçek zamanlı yetenekleri, mobil cihazlar ve masaüstlerindeki popülaritesine katkıda bulunur.
Herhangi bir sunucu olmadan webrtc mümkün değil mi sinyal sunucusu değil mi?
Ardından, tarayıcınızda iki sekmeyi açın (veya iki farklı tarayıcıda) ve girin Localhost: 7000. Daha önce de belirtildiği gibi, bu örneğin çalışması için iki kameranın bulunması en iyisidir. Her şey yolunda giderse, sekmelerin her birinde bir video feed görmelisiniz.
Webrtc ve neden hala bir arka uç hizmetine ihtiyacınız var
Dzone topluluğuna katılın ve tüm üye deneyimini alın.
Bu makale başlangıçta Christian Jensen’in Sinch blogunda yer aldı.
Webrtc nedir?
WebRTC, Google’ın 2010 yılında satın aldığı şirketlerden birkaç yenilikten dayanan bir bileşen paketidir. WebRTC, bir geliştiricinin iki tarayıcı arasında gerçek zamanlı medya ve veri kanalları ayarlamasını sağlar (veya bunun için derlerseniz cep telefonları). Birkaç önemli bileşen içerir ve hepsi Chrome, Firefox ve Opera’da gönderilir ve Microsoft’ta bir versiyonu var’S Yeni Tarayıcı Kenarı (ORTC).
Veri Akışları ve Donanım Ayarlama
WebRTC, hem fiziksel ortamı (kameralar, hoparlörler ve mikrofonlar gibi) hem de diğer donanımların (yankı iptali ve arka plan iptal donanımı gibi – çoğunlukla cep telefonlarında bulacağınız) kurulmaya yardımcı olur, ayrıca STUN ile birlikte ağı bulmaya yardımcı olur.
Ses kodekleri ve video kodekleri
Gerçek zamanlı ses ve video ile uğraşırken WebRTC’yi diğer yazılımlarda kullanan temel faydalardan biri, Google’ın gönderilecek kadar nazik olduğu açık kaynak/telifsiz kodeklerdir.
Ses kodekleri
- G711, normal telefon ağlarında kullanılır
- ILBC, eski dar bant kodlu, telefon ağlarında da kullanılır
- Opus, yüksek kaliteli bir değişken ve (uyarlanabilir destek) codec, webrtc’de kullanılan en yeni kodek.
Daha fazla sevk var, ancak bunlar ana ve en yaygın kullanılanlar.
Video kodekleri
- VP8 ve yakında VP9, bu Google’S telifsiz bir varyasyon h.264/s.265 kodek
- H.264 (2015 yılında ORTC için bir anlaşma olarak eklendi)
Ses kodekleri sizin için çok fazla işi yapar, paket kaybına dikkat ederek, ses düzeltmesi ve kod çözülmesi, hata düzeltmesi, gürültü iptali, yankı iptali, hacim tesviye ve daha fazlası. Codecs içermesi, onu mobil cihazlarda ve masaüstlerinde de çok popüler hale getiriyor.
Şimdi, Pure JavaScript’te kendi tarayıcı tabanlı aramamı oluşturabilirim (favori istemci tarafı JS çerçevesini buraya ekleyin). Ne yazık ki,’Burada eksik iki ana şey olduğu için bir çağrı ayarlamak için o kadar basit değil.
Kimin arayabileceği (veya akran keşfi)
Birini aramak için adresi bilmeniz gerekir ve normal telefon numaralarının aksine, internetteki adresleme çoğunlukla dinamik IP adresleridir. Bunu çözmek için, herkesin nerede olduğunu kaydedmelisiniz. Bu, XMPP, SIP, Özel Protokoller, vb. Kullanılarak çeşitli şekillerde yapılabilir., Ancak her şey bir çağrı almaya hazır herkesin bir sunucu ile bir şekilde kontrol etmesi için kaynar ve sunucuya bu eşle nasıl iletişime geçileceğini bildirir (teklif/davet/sdp vb.).
Bunu tamamen dinamik bir beyaz sayfa olarak düşünün. Bu genellikle, birisi onlarla iletişim kurmak istiyorsa, sinyal sunucusunun istemciyi bilgilendirmesi için güvenlik duvarlarını veya benzerlerini açık tutmak için zamanlanmış aralıklarla yapılır. Yani, bunun üzerine inşa etmeniz gereken ilk parça.
Ardından, muhtemelen belirli bir kullanıcı için tüm cihazları takip etmek ve bir çağrı varsa bunları tüm cihazlarda bilgilendirmek istersiniz. Sinch kullanarak, bu bölüme dikkat ediyoruz.
Sersemletici sunucu
Sinyal sunucunuz bir cihaz bulduktan ve bir teklif gönderdikten sonra, bir sersemletici sunucuya ihtiyacınız var. Stun sunucusu, harici IP adresinizi ve iki (veya daha fazla) cihazın birbiriyle doğrudan konuşabileceğini belirlemeyi kolaylaştıracaktır. Sinch bununla da ilgilenecek.
Medya Röle Sunucusu (Turn Server)
Bir eşler arası oturum mümkün değilse (kendi verilerimiz bunun oturumların yaklaşık% 25’ini hesaba kattığını gösterir), bir Turn sunucusuna ihtiyacınız olacaktır. Turn sunucusu temel olarak, iki istemci arasındaki güvenlik duvarındaki açık delikler aracılığıyla sizin için bitleri değiştirecektir. Bu neden oluyor? En yaygın olanı asimetrik güvenlik duvarları ve güvenlik duvarlarında farklı bağlantı noktalarına delik açma olasılığıdır.
Tamam ama neden Don’t bunu kendim kurdum?
Peki yapabilirsin. Bu biraz aşırıya kaçabilir ve operasyon ekibinizde bir yetkinlik daha gerekli olacaktır. Sıra ve sersemletici sunucularınız muhtemelen kullanılmış ve pahalı olacak. Ve burada ölçeklenebilir ekonominin geldiği yer. Sinch yılda bir milyar dakikadan fazla bir süredir yaptığından, veri aktarımı için fiyatlandırmamız çoğu şirketin alabileceğinden daha ucuz.
Muhtemelen dağıtılmış bir ağa sahip olmak istiyorsunuz. Örneğin U’da dönüş sunucunuz varsa.S. Ve Avrupa’daki müşteriler arasında çağrılar devam ediyor, sadece tüm trafiğin okyanusu geçmesi gerektiği için gecikme ekleyeceksiniz. İyi bir kural, bir konuşmada yaklaşık 250ms’nin fark edilmesidir (burada daha fazla hizmet bilgisi kalitesi). Bu nedenle, istemciye herhangi bir ağ gecikmesi eklemeden ve verileri kodlamak için işleme süresi olmadan, temel olarak istemciler arasında çok fazla gecikmeye sahip olmanız garanti edilir.
Sadece arka uçla ilgili mi?
BT’S sadece arka uçla ilgili değil. Sinch olarak gerçek zamanlı iletişim konusunda geniş bir deneyimimiz var ve WebRTC SDK’ımızı tüm cihazlarda ve farklı ağ koşullarında en iyi şekilde çalışacak şekilde özelleştiriyoruz ve yapılandırıyoruz. Birkaç örnek, trafiğimizdeki kalite metriklerine göre kayıt kalitesini ayarlayacak uyarlanabilir opusun uygulanmasıdır. Ayrıca, belirli koşullarda hangi kodeklerin kullanılacağını ve dünya çapında üçlü kodlama ve gecikmeyi en aza indirmeyi seçeceğini de biliyoruz.
Christian Jensen’in izniyle Dzone’da yayınlandı . Orijinal makaleyi buradan görün.
Dzone katkıda bulunanlar tarafından ifade edilen görüşler.
Herhangi bir sunucu olmadan webrtc mümkün değil mi sinyal sunucusu değil mi??
WebRTC işlevlerini herhangi bir sunucu kullanmadan uygulayan iOS için bir Cordova eklentisi kurmaya çalışıyorum ve Yalnızca yerel bir ağda kullanılabilir. Bu eklenti olduğunu biliyorum, bu umut verici görünüyor ama bununla ilgili bazı sorunlarım var. Planım bir trun, sersemletme veya herhangi bir sinyal sunucusu kullanmak değil. Belki şu anda düşünüyorsun: “Tamam bu mümkün değil. Hiçbir sinyal bağlantısına eşit değildir.“Ama önce açıklayayım. Burada ve burada belirtildiği gibi, bir trun, sersemletme veya buz sunucusu kullanmaktan kaçınmak mümkündür. Bence bu projeme başlamak için iyi bir yol ama hala açık bir soru var. Herhangi bir sinyal yoksa cihazlar birbirlerini nasıl bulur (örnekte bir düğüm kullanırlar.JS Sunucusu)? Şu anda gerekli tüm bilgileri içeren bir QR kodu fikriyle oynuyorum. Sonunda şu gibi görünmeli (siyah arrwos daha önemlidir): Fikir, bir odaya giren herkesin RP’de bir QR kodu taraması gerektiğidir ve daha sonra cihaz IP, bağlantı noktasını, vb. RP’nin ve bir dataCannel ile bir WebRTC bağlantısı kurulacak. Günlerdir bir cevap arıyordum, ancak WebRTC’nin iOS’ta desteklenmediği gerçeği (veya nedenlerden en az biri), iOS üzerinde çalışan ve yerel bir ağ için hiç kimse yok WebRTC örneği yok. Yani sorum şu: Doğru yolda mıyım yoksa bu bile mümkün değil mi?? (Bunun için herhangi bir yerde bir örnek bulamadım, ama okuduğum tüm gönderileri bir araya getirirsem, bunun mümkün olması gerektiğini düşünüyorum.)
10 Ağu 2017’de 12:38 sordu
3,257 3 3 Altın Rozet 11 11 Gümüş Rozetler 19 19 Bronz Rozetler
Keşfi nasıl çözdüğünüz önemli değil, ancak bir WebRTC bağlantısı kurmak için, bir şekilde akranları arasında teklifi almanız ve mesajları yanıtlamanız gerekir. Buz toplantısının önce bitmesini beklerseniz, bu mesajlar otomatik olarak buz adayları içerir. StackOverflow’a bakın.com/a/29056385/918910.
Webrtc: çalışan bir örnek
Son zamanlarda basit bir proje için WebRTC’yi kullanmak zorunda kaldım. Teknolojinin kendisinin birçok avantajı vardır ve herhangi bir eklentiye ihtiyaç duymadan açık bir standart olarak geliştirilmektedir. Ancak, WebRTC için oldukça yeniydim ve temel kavramların etrafında başımı almak ve çalışan bir çözüm yaratmanın bazı sorunları yaşadım. Mevcut birçok öğretici var (bunun gibi, çözümüme ilham veren). Ancak çoğu eksik, eski veya bazı üçüncü taraf hizmetleri kullanmaya zorladı (e.G. Google firebase), bu sadece tüm süreci kurulması daha karmaşık hale getirdi ve anlaşılması daha zor.
Tüm bu kaynaklardan gelen bilgileri bir araya getirmeye ve bir WebRTC uygulamasının basit ve çalışan bir örneğini oluşturmaya karar verdim. Bir genel ağ üzerinden kullanmak istemediğiniz sürece herhangi bir üçüncü taraf hizmeti gerektirmez (bu durumda bir sunucuya sahip olmak gerçekten yardımcı olur). Umarım WebRTC’yi keşfetmek isteyen herkes için iyi bir başlangıç noktası sağlar.
Bu, WebRTC teknolojisinin tam bir öğreticisi olmayacak. İnternette birçok öğretici ve ayrıntılı açıklama bulabilirsiniz, örneğin burada burada. Daha fazla bilgi istiyorsanız WebRTC API’sını da kontrol edebilirsiniz. Bu yazı size WebRTC’nin olası bir çalışma örneğini gösterecek ve nasıl çalıştığını açıklayacak.
Genel açıklama
Bu örneğin tam kaynak kodu GitHub’da mevcuttur. Program üç bölümden oluşur:
- Web uygulaması
- sinyal sunucusu
- Sunucuyu Turn
Web uygulaması Çok basit: bir html dosyası ve bir JavaScript dosyası (artı bir bağımlılık: priz.io.JS, depoya dahildir). Yalnızca iki istemciyle çalışacak şekilde tasarlanmıştır (iki web tarayıcısı veya aynı tarayıcının iki sekmesi). Tarayıcınızda açtıktan sonra (Firefox 74’te test edildi), kameranızı ve mikrofonunuzu kullanma izni isteyecektir. İzin verildikten sonra, sekmelerin her birinden gelen video ve ses diğerine aktarılacaktır.
Not: Her iki sekmeden aynı kameraya erişmeye çalışırsanız bazı sorunlar yaşayabilirsiniz. Testimde ben’Makinemde test ederken iki cihaz kullandı (yerleşik bir dizüstü bilgisayar kamerası ve bir USB web kamerası).
sinyal sunucusu WebRTC uygulamaları tarafından akranları arasında doğrudan bir bağlantı oluşturmak için gerekli bilgileri değiştirmek için kullanılır. Bunun için istediğiniz herhangi bir teknolojiyi seçebilirsiniz. Bu örnek weboksets kullanır (python-socketo arka uçta ve priz.io-client ön uçta).
DÖNÜŞ Bu örneği genel bir ağ üzerinden kullanmak istiyorsanız sunucu gereklidir. Süreç bu yazıda daha ayrıntılı olarak açıklanmaktadır. Yerel ağ testi için buna ihtiyacınız olmayacak.
Sinyal
Sinyal sunucusu Python3’te yazılmıştır ve şöyle görünür:
aiohttp ithalat web içe aktarma socketo odası = 'oda' sio = Socketio.AsyncServer (cors_allowed_origins = '*') app = web.Uygulama () Sio.Ekle (App) @sio.Event Async Def Connect (SID, Environ): Yazdır ('Connected', SID) Sio'yu Bekliyor.emit ('hazır', oda = oda, skip_sid = sid) sio.Enter_room (SID, oda) @sio.Etkinlik Def Bağlantısı (SID): Sio.laft_room (sid, oda) baskı ('bağlantısı kesilmiş', sid) @sio.Olay Async Def Data (SID, Veri): Yazdır ('<>: <>' 'dan mesaj.Biçim (SID, Veri)) Sio'yu bekler.Emit ('veri', veri, oda = oda, skip_sid = sid) __name__ == '__main__': Web.run_app (uygulama, bağlantı noktası = 9999)
Her müşteri aynı odaya katılır. Odaya girmeden önce hazır Etkinlik şu anda odada tüm müşterilere gönderildi. Bu, ilk WebSocket bağlantısının herhangi bir mesaj alamayacağı anlamına gelir (oda boştur), ancak ikinci bağlantı kurulduğunda, birincisi bir hazır Etkinlik, odada en az iki müşteri ve WebRTC bağlantısının başlayabileceğini gösteren. Bunun dışında, bu sunucu herhangi bir veriyi iletecektir (veri olay) bir websocket tarafından diğerine gönderilen.
Kurulum oldukça basit:
CD Sinyali PIP Kurulumu Aiohttp Python-Socketo Python Sunucusu.py
Bu, sinyal sunucusunu başlayacak Localhost: 9999.
Webrtc
Bu örnekte WebRTC’yi kullanmanın basitleştirilmiş süreci şuna benziyor:
- Her iki müşteri de yerel medya akışlarını alır
- Akış elde edildikten sonra, her istemci sinyal sunucusuna bağlanır
- İkinci istemci bağlandıktan sonra, birincisi bir hazır olay, yani WebRTC bağlantısının müzakere edilebileceği anlamına gelir
- İlk istemci bir RTCPeerConnection nesnesi oluşturur ve ikinci istemciye bir teklif gönderir
- İkinci istemci teklifi alır, bir RTCPeerConnection nesnesi oluşturur ve bir cevap gönderir
- ICE adayları gibi daha fazla bilgi de değiştirildi
- Bağlantı müzakere edildikten sonra, uzak bir akış almak için bir geri arama çağrılır ve bu akış kaynağı olarak kullanılır video eleman.
Bu örneği LocalHost’ta çalıştırmak istiyorsanız, sinyal sunucusu ve web uygulaması ihtiyacınız olan tek şey. HTML dosyasının ana kısmı tek bir video öğesidir (hangi kaynak komut dosyası tarafından ayarlanacaktır):
Webrtc çalışma örneği
JavaScript kısmı biraz daha karmaşık ve ben’Adım adım açıklayacak. İlk olarak, yapılandırma değişkenleri vardır:
// config değişkenleri const sinyalleme_server_url = 'http: // localhost: 9999'; const pc_config = <>;
Localhost için, PC_CONFIG boş kalabilir ve Signaling_server_url Sinyal sunucusuna işaret etmelidir’Önceki adımda başladı.
Ardından, sinyal yöntemleri var:
Let Socket = IO (Signaling_server_url, < autoConnect: false >); priz.ON ('Veri', (veri) => < console.log('Data received: ',data); handleSignalingData(data); >); priz.('hazır', () => < console.log('Ready'); createPeerConnection(); sendOffer(); >); Senddata = (veri) => < socket.emit('data', data); >;
Bu örnekte, sinyal sunucusuna yalnızca yerel medya akışını aldıktan sonra bağlanmak istiyoruz, bu yüzden ayarlamamız gerekiyor . Bunun dışında bir senddata yayılan yöntem veri etkinlik ve biz de veri Gelen bilgileri uygun şekilde ele alarak etkinlik (daha sonra hakkında daha fazla bilgi). Ayrıca, bir hazır Etkinlik, her iki istemcinin de yerel medya akışlarını elde ettiği ve sinyal sunucusuna bağlandığı anlamına gelir, böylece bizim tarafımızda bir bağlantı oluşturabilir ve uzak tarafla bir teklif müzakere edebiliriz.
Ardından, WebRTC ile ilgili değişkenlerimiz var:
PC'ye izin verin; Localstream'e izin verin; RemotestreamElement = Belge.querySelector ('#remotestream');
pc Akran bağlantımızı tutacak, yerel akım tarayıcıdan elde ettiğimiz akış mı ve remotestreamelement öyle video Uzak akışı görüntülemek için kullanacağımız öğe.
Medya akışını tarayıcıdan almak için kullanacağız GetLocalStream yöntem:
GetLocalStream = () => < navigator.mediaDevices.getUserMedia(< audio: true, video: true >) .Sonra ((akış) => < console.log('Stream found'); localStream = stream; // Connect after making sure that local stream is availble socket.connect(); >) .Catch (hata => < console.error('Stream not found: ', error); >); >
Gördüğünüz gibi, sinyal sunucusuna ancak akış (ses ve video) elde edildikten sonra bağlanacağız. WEBRTC ile ilgili tüm türlerin ve değişkenlerin ( navigatör, Rtcpeerconnection, vesaire.) tarayıcı tarafından sağlanır ve hiçbir şey yüklemenizi gerektirmez.
Akran bağlantısı oluşturmak nispeten kolaydır:
CreatePeerConnection = () => olsun < try < pc = new RTCPeerConnection(PC_CONFIG); pc.onicecandidate = onIceCandidate; pc.onaddstream = onAddStream; pc.addStream(localStream); console.log('PeerConnection created'); >Yakalama (hata) < console.error('PeerConnection failed: ', error); >>;
Kullanacağımız iki geri arama OniceCandidate (Uzak taraf bize bir buz adayı gönderdiğinde arandı) ve onaddstream (Uzak tarafın yerel medya akışını akran bağlantısına ekledikten sonra).
Sonra teklif ve cevap mantığı var:
Sendoffer = () => olsun < console.log('Send offer'); pc.createOffer().then( setAndSendLocalDescription, (error) => < console.error('Send offer failed: ', error); >); >; Senddanswer = () => < console.log('Send answer'); pc.createAnswer().then( setAndSendLocalDescription, (error) => < console.error('Send answer failed: ', error); >); >; SetAndSendLocalDescription = (SessionDescription) => < pc.setLocalDescription(sessionDescription); console.log('Local description set'); sendData(sessionDescription); >;
WebRTC teklif-cevap müzakeresinin detayları bu yazının bir parçası değildir (süreç hakkında daha fazla bilgi edinmek istiyorsanız lütfen WebRTC belgelerini kontrol edin). BT’Bir tarafın bir teklif gönderdiğini bilecek kadar, diğeri bir cevap göndererek ona tepki veriyor ve her iki taraf da ilgili akran bağlantıları için açıklamayı kullanıyor.
WebRTC geri çağrıları şuna benziyor:
Let onicecandidate = (olay) => < if (event.candidate) < console.log('ICE candidate'); sendData(< type: 'candidate', candidate: event.candidate >); >>; Let onAddStream = (olay) => < console.log('Add stream'); remoteStreamElement.srcObject = event.stream; >;
Alınan ICE adayları diğer müşteriye gönderilir ve diğer müşteri medya akışını ayarladığında, bunu bizim için bir kaynak olarak kullanarak tepki veriyoruz video eleman.
Son yöntem gelen verileri işlemek için kullanılır:
HandleSesignalingData = (veri) => < switch (data.type) < case 'offer': createPeerConnection(); pc.setRemoteDescription(new RTCSessionDescription(data)); sendAnswer(); break; case 'answer': pc.setRemoteDescription(new RTCSessionDescription(data)); break; case 'candidate': pc.addIceCandidate(new RTCIceCandidate(data.candidate)); break; >>;
Bir teklif aldığımızda, kendi akran bağlantımızı oluştururuz (uzaktan bu noktada hazırdır). Ardından, uzaktan açıklamayı ayarladık ve bir cevap gönderiyoruz. Cevabı aldığımızda, akran bağlantımızın uzaktan açıklamasını ayarladık. Son olarak, diğer müşteri tarafından bir buz adayı gönderildiğinde, akran bağlantımıza ekleriz.
Ve son olarak, aslında WebRTC bağlantısını başlatmak için, sadece GetLocalStream:
// bağlantı bağlama getLocalStream ();
Localhost’ta çalışıyor
Sinyal sunucusunu önceki adımda başlattıysanız, örneğin HTML ve JavaScript dosyalarını barındırmanız yeterlidir:
CD Web Python -m HTTP.Sunucu 7000
Ardından, tarayıcınızda iki sekmeyi açın (veya iki farklı tarayıcıda) ve girin Localhost: 7000. Daha önce de belirtildiği gibi, bu örneğin çalışması için iki kameranın bulunması en iyisidir. Her şey yolunda giderse, sekmelerin her birinde bir video feed görmelisiniz.
Yerelliğin ötesinde
Bu örneği, yerel ağınızdaki iki farklı bilgisayarda kullanmaya cazip gelebilirsiniz yerel ev Makinenizle’S IP adresi, e.G. 192.168.0.11. Hızlı bir şekilde fark edeceksin’t çalışıyor ve tarayıcınız navigatör tanımsız.
Bu, Webrtc’nin güvenli olacak şekilde tasarlandığı için olur. Bu, çalışmak için güvenli bir bağlama ihtiyacı anlamına gelir. Basitçe söylemek gerekirse: Tüm kaynaklar (bizim durumumuzda HTTP sunucusu ve sinyal sunucusu) LocalHost’ta veya HTTPS kullanılarak barındırılmalıdır. Bağlam güvenli değilse, navigatör tanımsız olacak ve kullanıcı medyasına erişmenize izin verilmeyecek.
Bu örneği farklı makinelerde test etmek istiyorsanız, açık bir seçenek değilse, localhost’u kullanarak. Sertifikalar oluşturmak bu yazının bir parçası değil ve hiç kolay bir iş değil. Bu örneği iki farklı bilgisayarda hızlı bir şekilde kontrol etmek istiyorsanız, basit bir numara kullanabilirsiniz. Kaynakları HTTPS üzerinden barındırmak yerine, Firefox’ta güvensiz bağlamı etkinleştirebilirsiniz. Gidip gelmek Hakkında: Yapılandırma, Riski kabul edin ve bu iki değişkenin değerlerini değiştirin doğru:
- medya.cihazlar.güvensiz.etkinleştirilmiş
- medya.Getusermedia.güvensiz.etkinleştirilmiş
Şöyle görünmeli:
Artık Web uygulamasına iki farklı bilgisayarda erişebilmelisiniz ve WebRTC bağlantısı düzgün bir şekilde belirlenmelidir.
Küresel olmak
Bu örneği genel bir ağ üzerinden kullanabilirsiniz, ancak’biraz daha fazla iş gerektirecek. İlk olarak, bir dönüş sunucusu ayarlamanız gerekir. Basitçe söylemek gerekirse, Turn sunucuları WebRTC akranlarını bir genel ağ üzerinden keşfetmek için kullanılır. Ne yazık ki, bu adım için, kamuya açık bir sunucuya ihtiyacınız olacak. İyi haber, kendi sunucunuz olduğunda, kurulum işlemi oldukça kolay olacaktır (en azından Ubuntu tabanlı bir işletim sistemi için). BEN’Bu tartışmada Stack Overflow ile ilgili birçok yararlı bilgi buldu ve ben’Sadece en önemli bitleri kopyalayacağım:
sudo apt yükleme coturn tourserver -a -o -v -n ---no -dtls ---no -tls -u kullanıcı adı: kimlik bilgisi -r realmname
Bu, 3478 bağlantı noktasını kullanarak bir dönüş sunucusu başlatır. Bayraklar şu anlama geliyor:
- -A: Uzun vadeli kimlik bilgileri mekanizmasını kullanın
- -Ö: Daemon olarak işlemi başlatın (mevcut kabuktan ayırın)
- -V: ‘Ilıman’ ayrıntılı modu
- -N: Yapılandırma dosyasını kullanmayın, tüm parametreleri yalnızca komut satırından alın
- –No-dtls: DTLS istemci dinleyicilerini başlatmayın
- –No-TLS: TLS istemci dinleyicilerini başlatmayın
- -U: Kullanıcı hesabı, formda ‘Kullanıcı adı Şifre’, Uzun süreli kimlik bilgileri için
- -R: Kullanıcılar için kullanılacak varsayılan alem
Düzenle: Turn Server kurulumunuzun doğru olup olmadığını kontrol etmek için bu doğrulayıcıyı kullanabilirsiniz. Yukarıdaki örneği test etmek için aşağıdaki değerleri girmelisiniz:
Tıklamak “Sunucu ekle”, Diğer sunucuları kaldırın ve seçin “Aday topla”. Bir tür bileşeni alırsanız röle, Bu, kurulumunuzun çalıştığı anlamına gelir.
Ardından, eş bağlantı yapılandırmasını biraz değiştirmeniz gerekiyor. Düzenlemek ana.JS, değiştirme Sunucunuzun gerçek bir IP’siyle:
const turn_server_url = ': 3478'; const turn_server_username = 'kullanıcı adı'; const turn_server_credential = 'kimlik bilgisi'; const pc_config = < iceServers: [ < urls: 'turn:' + TURN_SERVER_URL + '?transport=tcp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >, < urls: 'turn:' + TURN_SERVER_URL + '?transport=udp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >]>;
Tabii ki, sinyal sunucunuzu ve web uygulamasının kendisini herkese açık bir IP’de barındırmanız gerekecek ve değiştirmeniz gerekir Signaling_server_url uygun olarak. Bu yapıldıktan sonra, bu örnek internete bağlı iki makine için çalışmalıdır.
Çözüm
Bu, Webrtc ile neler yapabileceğinizin örneklerinden sadece biri. Teknoloji ses ve video ile sınırlı değildir, herhangi bir veri değiştirmek için kullanılabilir. Umarım bu yazıyı yararlı bulmuşsunuzdur ve kendi fikirlerinizle başlamanıza yardımcı olacaktır!
Anket Sonuçları: Ve WebRTC geliştiricileri diyor ki…
Bloggeek ile kısa bir geliştirici anketi yürüttük.Birkaç hafta önce ben (bu gönderiye bakın). Geçen Cuma, 1 Ağustos itibariyle 97 katılımcı aldık. Tsahi rastgele 3 kazanan seçti – zaten onlarla iletişime geçti, bu yüzden e -postasını alamazsanız, 2 ücretsiz e -kitap kazanmadığınızı söylediğimiz için üzgünüz. Ancak, hala% 20 indirim için uygunsınız ve kupon kodlarını içeren talimatları içeren bir e -posta almalısınız.
97 Katılımcılar kesinlikle binlerce aktif WebRTC geliştiricisinin (belki daha fazlası) bir havuzdan istatistiksel olarak geçerli bir örneklem büyüklüğü değildir, ancak verilerden çıkarabileceğimiz birkaç yararlı veri noktası vardır.
Geliştirici türleri
Geliştirici Araç Dizinimiz, bu seçeneklere ayrılmıştır Devs. Bir yıl önce DevOps WebRTC için özel araçlar yoktu. Bunun hakkında daha fazla şey duymaya başlıyorum ve bunun daha önemli olacağını umuyorum “alet” Yakın gelecekte kategori.
Arka uçtan daha fazla ön uç geliştiricisi olması gerekiyordu, bu yüzden arka uçun ilk göstermesi biraz şaşırtıcı. Çok fazla saf ön uç web geliştiricisi yoktu (birkaç tabloya bakın). WebRTC genellikle bir yerde bazı arka uç geliştirme olmadan çalışmaz (burada sunucusuz WebRTC projesi ile dikkate değer istisna). Bunu başka birinden yapabilirsiniz, ancak bu genellikle biraz maliyet anlamına gelir. Bu, WebRTC’nin çoğu saf ön uç geliştiricisi için hala zor olduğu anlamına gelebilir.
Aynı şekilde, Yerli Listenin çok uzakta. Deneyimlerime göre, yerli, ücretli SDK’lar için biraz para kazanmadan yapmak oldukça zor. Biz’Android’de Native Webrtc’nin Android-L’ye gelmesiyle nasıl değiştiğini görecek.
Çok seçici olan tek soru buydu, yani katılımcıların uygun olduğu kadar seçebileceği anlamına geliyor. Her şeyden önce, katılımcıların çoğunun birden fazla kalkınma türü yaptığını görünce şaşırdım, üçte biri 3 veya daha fazla şey yapıyor:
Seçilen sap türleri | # | % |
1 | 41 | % 42 |
2 | 22 | % 23 |
3 | 25 | % 26 |
4 | 3 | % 3 |
5 | 6 | % 6 |
Sayımla birden fazla geliştirici türünü seçen katılımcıların sayısı
Bu beni şu soruları merak etti:
- Arka uç geliştiriciler, yerel geliştiricilerden daha farklı geliştirme türlerini biliyorlar mı??
- Hangi gelişme türleri diğerlerinin üst sıraları olma eğilimindedir??
İşte tam çapraz tablolama:
Ön uç ağ | Arka uç ağ | Yerli | Telekom | Devs | |
Ön uç ağ | 100% | % 84 | % 32 | % 29 | % 23 |
Arka uç ağ | % 78 | 100% | % 30 | % 37 | % 27 |
Yerli | % 72 | % 72 | 100% | % 36 | % 28 |
Telekom | % 37 | % 51 | % 21 | 100% | % 21 |
Devs | % 72 | % 89 | % 39 | % 50 | 100% |
Geliştirici türüne göre birden fazla geliştirici türü seçen katılımcıların yüzdesi
Bu veri kümesine dayanarak (ve doğruluğunu varsayarak) DevOps geliştiricileri, diğer alanlarda en fazla beceriye sahip olma eğilimindedir. Yerel geliştiriciler çok fazla ön ve arka uç biliyor.
Ve sadece bir geliştirme becerisi not etme olasılığı en yüksek olan grup neydi: telekom; Telekom katılımcılarının neredeyse yarısı listelendi “telekom” başka hiçbir şey olmadan. Telekom katılımcıları ya mütevazıdır ya da diğer kategorilerdeki akranlarına göre beceri setlerini güçlendirmeleri gerekir.
Dev | 1 | 2 | 3 | 4 | 5 | Genel Toplam |
Ön uç ağ | % 14 | % 30 | % 39 | % 5 | % 11 | 100% |
Arka uç ağ | % 10 | % 33 | % 42 | % 5 | % 10 | 100% |
Telekom | % 47 | % 12 | % 21 | % 7 | % 14 | 100% |
Yerli | % 20 | % 8 | % 40 | % 8 | % 24 | 100% |
Devs | % 11 | % 0 | % 50 | % 6 | % 33 | 100% |
Geliştirme Türüne Göre Dev Tipi Yüzdesi olarak seçilen geliştirici türlerinin sayısı
Ön uç çerçeveler
Bu beni kişisel olarak ve Webrtchacks ekibinin diğer birkaç üyesi şahsen merak etti. Sonuçta ödül kitaplarından biri açısalla ilgili. Son zamanlarda projelerim için jQuery kullanıyorum ve daha sofistike uygulamaları düşündüğüm için daha iyi bir yol olup olmadığını merak ediyorum.
“Diğer” Burada önemli bir yanıttı – bu grup içinde JQuery 4 kez (%4) geldi. 8 tarafından hiçbir şey veya gelenek kaydedilmedi (%8)
Arka uç çerçeveler ve araçlar
İlk olarak, bir “diğer” kategori burada. Orada başka bir seçenek olmalı. Sahip olmadan “diğer” Seçenek, kaç kişinin bunu seçeceğini tahmin etmek zor, ancak bunun yukarıdaki öğeler için yanıtları en az yüzde birkaç puan azaltacağını söylemek güvenlidir.
Yukarıdaki yanıtlarda büyük sürprizler yok, ancak bunun çeşitli geliştirici türleriyle nasıl eşleştiğini merak ettim:
Geliştirici türü | ||||||
Çerçeve/ Araç | Toplam | Ön uç ağ | Arka uç ağ | Yerli | Telekom | Devs |
Düğüm.JS | % 36 | % 46 | % 43 | % 24 | % 30 | % 33 |
Java | % 20 | % 16 | % 20 | % 20 | % 19 | % 11 |
Python veya Rails | % 14 | % 13 | % 12 | % 16 | % 16 | % 22 |
Yıldız işareti || Freeswitch | % 12 | % 4 | % 5 | % 8 | % 23 | % 17 |
PHP | % 10 | % 14 | % 13 | % 20 | % 5 | % 6 |
.AÇIK | % 7 | % 7 | % 7 | % 12 | % 7 | % 11 |
Çapraz Çerçeve/Araç Soru Vs. Toplam sütun % ‘lik olarak gösterilen geliştirici türü
Düğüm için genel tercih dışında burada belirgin bir eğilim yok.JS. Görmek için biraz şaşırdım Telekom Çok parçalanmış – Java ve Asterisk/Freeswitch gibi daha geleneksel telekom araçları etrafında daha güçlü bir kümelenme beklerdim. Bu verilerin biraz gizlendiğini unutmayın, çünkü geliştirici türü sorusu çok seçmeli.
WebRTC’ye özgü araçlar ve XAA’lar
Ayrıca, katılımcıların kullandıkları araçları girmelerine izin verecek bir ücretsiz sorumuz vardı. Katılımcıların% 86’sı bir şeye girdi. Aşağıda, bir kereden fazla bahsedilen tüm araçlar hariç:
DSÖ’Webrtc için Sırada – yani safari veya iOS?
Buraya eklemek için çok fazla. Durumu kontrol etmeye devam edebiliriz.modern.IE Internet Explorer’daki en sonun. Apple’ın ne yapacağını anlamaya çalışırken iyi şanslar.
Webrtc hakkında nasıl öğrenilir?
Webrtchack’lerin ilk önce gelmesiyle sadık bir kitleye sahip olduğumuzu görmek güzel . Ayrıca 4 vardı “diğer” GitHub için yanıtlar (%4). Bu bana projelerim için Webrtchacks Github sayfasını düzelttiğimi söylememi hatırlatıyor.
Son düşünceler
Ana alımlarım şunlardı:
- Düğüm.JS, Angular ve Easyrtc Bu Popülerlik Yarışmasını Kazan.
- DevOps anlamlı bir görünüm yapar – bu, WebRTC’nin üretime hazır hale geldiğinin göstergesi olabilir.
- Telekom Geliştirme Becerileri Oldukça Düşük Oldu, ancak Yerel Gelişim ve DevOps kadar düşük değil
- Telekom becerileri en yoğun olanıdır – telekom becerilerine sahip katılımcılarımız, daha fazla web içerecek şekilde geliştirme beceri setlerini genişletmelidir
Bunu kesinlikle gelecekte tekrar yapmak ve yanıt oranını artırmak için daha büyük bir baskı yapmak istiyorum. Bu arada biz’Anketi açık tutacak – henüz yapmadıysanız cevap vermekten çekinmeyin. Biz’Periyodik olarak check-in yap ve bu gönderiyi gerektiği gibi güncelleyin.
Kendi analizinizi yapmak veya verileri nasıl kestiğimi görmek istiyorsanız, ham sonuçları (eksi herhangi bir tanımlayıcı bilgi) ve işbilimimi buradan görebilirsiniz.
Tsahi’yi de kontrol edebilirsiniz’Sonuçlar buradaki sonuçlar.
Tüm katılımcılara tekrar teşekkür ederiz – katkılarınız WebRTC topluluğuna yardım etmeye devam ediyor!