WebRTC, l'API Web en temps réel

Comment utiliser WebRTC pour créer une application de communication directe par webcam avec ce tutoriel simple

WebRTC signifieCommunication Web en temps réel.

Il permet de créer une communication directe de données entre les navigateurs.

Vous pouvez l'utiliser pour

  • diffuser de l'audio
  • Flux vidéo
  • Partager des fichiers
  • chat vidéo
  • créer un service de partage de données peer-to-peer
  • créer des jeux multijoueurs

et plus.

C'est un effort pour rendre les applications de communication en temps réel faciles à créer, en tirant parti des technologies Web, de sorte qu'aucun plugin tiers ou technologie externe ne soit nécessaire à côté de votre navigateur Web.

Il ne devrait plus être nécessaire de disposer d'un plugin pour exécuter RTC à l'avenir, mais tous devraient à la place s'appuyer sur une technologie standard - WebRTC.

Il est pris en charge par tous les navigateurs modernes (avec un support partiel d'Edge qui ne prend pas en chargeRTCDataChannel- voir plus tard):

WebRTC implémente les API suivantes:

  • MediaStreamaccède aux flux de données du côté de l'utilisateur, comme la caméra et le microphone
  • RTCPeerConnectiongère la communication du streaming audio et vidéo entre pairs
  • RTCDataChannel: gère la communication d'autres types de données (données arbitraires)

Avec la communication vidéo et audio que vous utiliserezMediaStreametRTCPeerConnection.

D'autres types d'applications, comme les jeux, le partage de fichiers et autres, reposent surRTCDataChannel.

Dans cet article, je vais créer un exemple en utilisant WebRTC pour connecter deux webcams distantes, en utilisantWebsocketsserveur utilisantNode.js.

Astuce: dans vos projets, vous utiliserez probablement une bibliothèque qui résume bon nombre de ces détails. Ce tutoriel vise à expliquer la technologie WebRTC, afin que vous sachiez ce qui se passe sous le capot.

MediaStream

Cette API vous permet d'accéder au flux de la caméra et du microphone à l'aide de JavaScript.

Voici un exemple simple qui vous demande d'accéder à la caméra vidéo et de lire la vidéo dans la page:

Voir le styloExemple simple WebRTC MediaStreampar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!