Meta tags:
description= WebRTC (Web Real-Time Communication) ist ein offener Standard und eine Sammlung von Web-Technologien, die Echtzeit-Kommunikation direkt zwischen Browsern und…;
Headings (most frequently used words):
webrtc, beispiel, echtzeit, kommunikation, im, browser, übungen, was, tatsächlich, tut, warum, verwenden, die, drei, kern, apis, signalisierung, der, teil, den, nicht, übernimmt, stun, und, turn, firewalls, überwinden, kamera, mit, getusermedia, erfassen, ein, vollständiger, datenkanal, zwischen, zwei, peers, häufige, fallstricke, zusammenfassung,
Text of the page (most frequently used words):
und (79), die (27), #webrtc (22), api (22), peer (20), der (19), dom (19), lernen (16), sie (16), ist (15), server (14), javascript (13), browser (13), von (13), ein (13), das (12), web (12), über (11), mit (11), the (11), await (11), const (11), caller (11), channel (11), getusermedia (10), callee (10), eine (10), für (9), audio (9), nicht (9), auf (9), html (8), ohne (8), video (8), medien (8), turn (8), können (8), peers (8), zwei (8), methoden (8), echtzeit (7), verbindung (7), websockets (7), rtcpeerconnection (7), werden (7), oder (7), event (7), stream (7), async (7), tools (6), apis (6), dem (6), daten (6), ice (6), stun (6), den (6), kopieren (6), data (6), standard (6), w3docs (5), übungen (5), kommunikation (5), verwenden (5), angebot (5), wird (5), document (5), einem (5), function (5), new (5), sodass (5), direkt (5), einen (5), zwischen (5), error (5), fetch (5), string (5), events (5), formatter (5), color (5), alle (4), json (4), generator (4), css (4), this (4), was (4), wie (4), signalisierung (4), aus (4), seite (4), antwort (4), signalisierungsserver (4), https (4), peerconnection (4), track (4), true (4), received (4), answer (4), offer (4), console (4), candidate (4), objekte (4), kann (4), localvideo (4), promise (4), shadow (4), einführung (4), code (3), encoder (3), editor (3), quizze (3), php (3), page (3), ermöglicht (3), beschreiben (3), zum (3), erfassen (3), sdp (3), kandidaten (3), nat (3), bildschirmfreigabe (3), rtcdatachannel (3), try (3), catch (3), fehl (3), setremotedescription (3), setlocaldescription (3), austausch (3), streams (3), muster (3), miteinander (3), sich (3), ihre (3), beispiel (3), configuration (3), google (3), direkte (3), öffentliche (3), als (3), denen (3), drei (3), offener (3), flag (3), and (3), eigenschaften (3), funktionen (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), kostenlose (2), snippets (2), geolocation (2), verbindungen (2), datenkanäle (2), anwendungen (2), des (2), welche (2), folgenden (2), aussagen (2), tatsächliche (2), fähigkeiten (2), gibt (2), beliebige (2), keine (2), tauschen (2), selbst (2), traversal (2), videoanrufe (2), schlägt (2), hergestellt (2), immer (2), aber (2), müssen (2), benötigt (2), sicheren (2), localhost (2), getdisplaymedia (2), srcobject (2), getelementbyid (2), ontrack (2), here (2), addtrack (2), navigator (2), mediadevices (2), anstatt (2), createdatachannel (2), pong (2), ping (2), connect (2), log (2), onmessage (2), send (2), chat (2), over (2), for (2), addicecandidate (2), onicecandidate (2), call (2), weg (2), beide (2), datenkanal (2), funktioniert (2), startcamera (2), camera (2), live (2), jedem (2), zurück (2), kamera (2), urls (2), com (2), iceservers (2), seine (2), port (2), meisten (2), network (2), firewalls (2), dieses (2), sobald (2), erstellt (2), sendet (2), dieser (2), wahl (2), geöffnet (2), austauschen (2), strings (2), verschlüsselt (2), bildschirm (2), mediastream (2), browsern (2), sowie (2), kein (2), native (2), download (2), plugin (2), fließen (2), latenz (2), spielzustände (2), real (2), time (2), communication (2), sammlung (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), promises (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, erfordert, drittanbietern, herzustellen, unterstützt, datenübertragungen, dateifreigabe, externe, plugins, automatische, aufnahme, zustimmung, benutzers, übung, echte, datenfähigkeiten, aushandeln, aufrechterhalten, stellt, bereit, angebote, antworten, typischerweise, konfigurieren, diesen, bausteinen, zusammenarbeit, vollständig, realisieren, zusammenfassung, umschließen, behandeln, ablehnung, elegant, berechtigungen, verweigert, allein, restriktiven, netzwerken, realen, vergessen, keinen, produktion, muss, vor, entsprechende, ausgeführt, sonst, aushandlung, erstellen, richtigen, reihenfolge, verwaltet, aufbauen, normalerweise, weiterhin, schlagen, außerhalb, eines, kontexts, erforderlich, häufige, fallstricke, remotevideo, remote, media, arrives, foreach, gettracks, dasselbe, aufzurufen, rufen, jeden, lesen, eingehende, handler, logs, createanswer, createoffer, negotiation, onopen, creates, reply, same, ondatachannel, listens, opens, production, travels, directly, signaling, hand, each, candidates, other, two, normally, different, machines, anschaulichste, aktion, sehen, einzigen, skript, verbinden, hier, befinden, derselben, wir, verdrahten, gehen, entspricht, genau, echter, übertragen, würde, fügen, dies, konsole, einer, beliebigen, beobachten, ausführung, vollständiger, nur, fordert, benutzer, zur, erlaubniserteilung, man, jemanden, nie, stillschweigend, aufnehmen, kontext, message, could, not, access, microphone, return, show, feed, muted, playsinline, autoplay, erste, schritt, bei, videoanruf, abrufen, lokalen, example, username, user, credential, pass, added, hard, reach, networks, 19302, diese, konfiguration, angegeben, übergeben, leitet, weiter, wenn, möglich, strenge, unternehmensfirewalls, kostet, bandbreite, daher, fallback, teilt, damit, versuchen, kostengünstig, zustandslos, betreibt, geräte, sitzen, hinter, address, translation, eigene, adresse, selten, kennt, servertypen, lösen, problem, überwinden, mehr, entdeckt, angerufene, empfängt, anrufer, definiert, stattfindet, aufgabe, bezeichnet, bauen, signalisierungskanal, transport, ihrer, häufigste, ablauf, mögliche, netzwerkadressen, paare, unter, jeder, erreichbar, codecs, medienformate, verbindungsparameter, session, description, protocol, nichts, heraus, finden, bevor, arten, informationen, teil, übernimmt, bidirektionaler, kanal, senden, beliebiger, binärdaten, ähnlich, dazwischen, herzstück, verhandelt, pflegt, überträgt, tracks, erfasst, vom, mikrofon, besteht, eigentlich, zusammenarbeiten, kern, gepflegt, w3c, ietf, vendor, lock, kontinuierlich, verbessert, desktop, mobilen, nativen, apps, denselben, plattformübergreifend, nutzen, srtp, dtls, verschlüsselung, verpflichtend, deaktiviert, standardmäßig, modernen, eingebaut, flash, app, frei, ihren, roundtrips, kurz, sind, bandbreitenkosten, niedrig, bleiben, geringe, warum, cursor, positionen, datei, chunks, fenster, streamen, sprach, videoverbindungen, zoom, meet, typische, anwendungsfälle, bereits, kommunizieren, siehe, ergänzt, fehlende, stück, möglichkeit, sprechen, kürzestmöglichen, oft, beiden, rechnern, weshalb, viel, niedriger, weiterleiten, aller, ihr, backend, clients, tatsächlich, tut, kapitel, erklärt, bietet, aufbaut, konzepte, einsteiger, verwirren, vollständiges, funktionsfähiges, ausführen, signalisierungs, medium, leiten, jegliches, videokonferenzen, sprachanrufe, übertragene, latenzarme, dateiübertragungen, technologien, ermöglichen, intl, vibration, notifications, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, fortschritt, formdata, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, methode, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
lor hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api webrtc webrtc web real time communication ist ein offener standard und eine sammlung von web technologien die echtzeit kommunikation direkt zwischen browsern und anwendungen ermöglichen webrtc echtzeit kommunikation im browser webrtc web real time communication ist ein offener standard und eine sammlung von browser apis mit denen zwei browser audio video und beliebige daten direkt miteinander austauschen können peer to peer ohne das medium über einen server zu leiten und ohne jegliches plugin es ermöglicht videokonferenzen sprachanrufe bildschirmfreigabe live übertragene spielzustände und latenzarme dateiübertragungen dieses kapitel erklärt was webrtc bietet die drei apis auf denen es aufbaut die signalisierungs und nat traversal konzepte die die meisten einsteiger verwirren sowie ein vollständiges funktionsfähiges datenkanal beispiel das sie auf dieser seite ausführen können was webrtc tatsächlich tut der browser kann bereits mit einem server kommunizieren siehe fetch api und websockets webrtc ergänzt das fehlende stück eine möglichkeit für zwei clients miteinander zu sprechen sobald eine peer verbindung geöffnet ist fließen medien und daten auf dem kürzestmöglichen weg oft direkt zwischen den beiden rechnern weshalb die webrtc latenz so viel niedriger ist als das weiterleiten aller daten über ihr backend typische anwendungsfälle audio und videoanrufe echtzeit sprach videoverbindungen wie zoom oder google meet bildschirmfreigabe bildschirm oder fenster mit getdisplaymedia erfassen und an einen peer streamen echtzeit daten spielzustände chat cursor positionen oder datei chunks über einen rtcdatachannel warum webrtc verwenden peer to peer geringe latenz medien fließen direkt zwischen peers nicht über ihren server sodass roundtrips kurz sind und ihre bandbreitenkosten niedrig bleiben plugin frei in jedem modernen browser eingebaut kein flash keine native app kein download standardmäßig verschlüsselt medien nutzen srtp und datenkanäle dtls verschlüsselung ist verpflichtend und kann nicht deaktiviert werden plattformübergreifend funktioniert auf desktop und mobilen browsern sowie in nativen apps über denselben standard offener standard gepflegt von w3c und ietf sodass er sich ohne vendor lock in kontinuierlich verbessert die drei kern apis webrtc besteht eigentlich aus drei apis die zusammenarbeiten mediastream api getusermedia erfasst audio video vom mikrofon der kamera oder dem bildschirm als mediastream rtcpeerconnection das herzstück von webrtc es verhandelt verschlüsselt und pflegt die verbindung zwischen zwei peers und überträgt die medien tracks rtcdatachannel ein bidirektionaler kanal zum senden beliebiger daten strings oder binärdaten peer to peer ähnlich wie websockets aber ohne server dazwischen signalisierung der teil den webrtc nicht übernimmt zwei browser können sich nicht aus dem nichts heraus finden bevor eine peer verbindung geöffnet werden kann müssen die peers zwei arten von informationen austauschen sdp session description protocol ein angebot und eine antwort die codecs medienformate und verbindungsparameter beschreiben ice kandidaten mögliche netzwerkadressen ip port paare unter denen jeder peer erreichbar ist webrtc definiert nicht wie dieser austausch stattfindet das ist ihre aufgabe und er wird als signalisierung bezeichnet sie bauen einen signalisierungskanal mit dem server transport ihrer wahl auf websockets ist die häufigste wahl der ablauf ist immer der anrufer erstellt ein angebot und sendet es über den signalisierungsserver der angerufene empfängt das angebot erstellt eine antwort und sendet sie zurück beide peers tauschen ice kandidaten aus sobald sie entdeckt werden die direkte peer to peer verbindung wird hergestellt der signalisierungsserver wird nicht mehr benötigt stun und turn firewalls überwinden die meisten geräte sitzen hinter nat network address translation und firewalls sodass ein peer seine eigene öffentliche adresse selten kennt zwei servertypen lösen dieses problem stun server teilt einem peer seine öffentliche ip port mit damit peers eine direkte verbindung versuchen können kostengünstig und zustandslos google betreibt kostenlose öffentliche server turn server leitet medien weiter wenn eine direkte verbindung nicht möglich ist strenge unternehmensfirewalls er kostet bandbreite und ist daher ein fallback nicht der standard diese server werden in der iceservers konfiguration angegeben die an rtcpeerconnection übergeben wird const configuration iceservers urls stun stun l google com 19302 a turn server is added for hard to reach networks urls turn turn example com username user credential pass const peerconnection new rtcpeerconnection configuration kopieren beispiel kamera mit getusermedia erfassen der erste schritt bei jedem videoanruf ist das abrufen des lokalen streams getusermedia gibt ein promise zurück sodass sie async await verwenden können video id localvideo autoplay playsinline muted video kopieren const localvideo document getelementbyid localvideo async function startcamera try const stream await navigator mediadevices getusermedia video true audio true localvideo srcobject stream show the live camera feed return stream catch error console error could not access camera microphone error message startcamera kopieren getusermedia funktioniert nur in einem sicheren kontext https oder localhost und fordert den benutzer zur erlaubniserteilung auf man kann jemanden nie stillschweigend aufnehmen beispiel ein vollständiger datenkanal zwischen zwei peers der anschaulichste weg webrtc in aktion zu sehen ist zwei rtcpeerconnection objekte in einem einzigen skript miteinander zu verbinden hier befinden sich beide peers auf derselben seite sodass wir ihre signalisierung direkt verdrahten können anstatt über einen server zu gehen der sdp ice austausch entspricht genau dem was ein echter signalisierungsserver übertragen würde fügen sie dies in eine browser konsole auf einer beliebigen https seite ein und beobachten sie die ausführung two peers normally on different machines const caller new rtcpeerconnection const callee new rtcpeerconnection signaling hand each peer s ice candidates to the other in production this travels over websockets here we call directly caller onicecandidate e e candidate callee addicecandidate e candidate callee onicecandidate e e candidate caller addicecandidate e candidate the callee listens for the channel the caller opens callee ondatachannel event const channel event channel channel onmessage e console log callee received e data channel send pong reply over the same channel the caller creates the data channel const channel caller createdatachannel chat channel onopen channel send ping channel onmessage e console log caller received e data offer answer negotiation async function connect const offer await caller createoffer await caller setlocaldescription offer await callee setremotedescription offer const answer await callee createanswer await callee setlocaldescription answer await caller setremotedescription answer connect logs callee received ping caller received pong kopieren das muster ist für video dasselbe anstatt createdatachannel aufzurufen rufen sie peerconnection addtrack track stream für jeden track von getusermedia auf und lesen eingehende medien in einem ontrack handler const stream await navigator mediadevices getusermedia video true audio true stream gettracks foreach track peerconnection addtrack track stream the remote peer s media arrives here peerconnection ontrack event document getelementbyid remotevideo srcobject event streams 0 kopieren häufige fallstricke https ist erforderlich getusermedia und getdisplaymedia schlagen außerhalb eines sicheren kontexts https oder localhost fehl ein signalisierungsserver wird weiterhin benötigt webrtc verwaltet die medien aber sie müssen den angebot antwort ice austausch selbst aufbauen normalerweise über websockets erstellen sie angebot antwort immer in der richtigen reihenfolge setlocaldescription muss vor setremotedescription für die entsprechende seite ausgeführt werden sonst schlägt die aushandlung fehl vergessen sie keinen turn server in der produktion stun allein schlägt in restriktiven netzwerken fehl ohne turn werden 10 20 der realen verbindungen nicht hergestellt berechtigungen können verweigert werden umschließen sie getusermedia mit try catch und behandeln sie die ablehnung elegant zusammenfassung webrtc gibt dem browser echte peer to peer audio video und datenfähigkeiten verwenden sie getusermedia zum erfassen von medien rtcpeerconnection zum aushandeln und aufrechterhalten der verbindung und rtcdatachannel für beliebige daten webrtc stellt keine signalisierung bereit sie tauschen sdp angebote antworten und ice kandidaten selbst aus typischerweise über websockets und konfigurieren stun turn server für die nat traversal mit diesen bausteinen können sie videoanrufe bildschirmfreigabe und echtzeit zusammenarbeit vollständig im browser realisieren übungen übung welche der folgenden aussagen beschreiben tatsächliche fähigkeiten von webrtc welche der folgenden aussagen beschreiben tatsächliche fähigkeiten von webrtc ermöglicht die automatische aufnahme von audio ohne zustimmung des benutzers ermöglicht echtzeit kommunikation ohne externe plugins unterstützt datenübertragungen über datenkanäle für anwendungen wie die dateifreigabe erfordert apis von drittanbietern um peer to peer verbindungen herzustellen prüfen was this page helpful yes no previous geolocation next web audio api on this page webrtc echtzeit kommunikation im browser übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über...
|
