WebRTC tutoriel

Salut à tous,

Aujourd'hui à jour exceptionnel vidéo...! Non je le refais (l'air plus sérieux est de rigueur).

Hum! Hum! J'initie une série de vidéos autour des web API JavaScript HTML5. ET le premier sujet portera sur le WebRTC. Kézaco!
Alors j'ai réalisé une premier vidéo aperçue pour l’appréhender. Il y aura aux minimum trois vidéos sur le sujet, car comme décrit dans la vidéo le WebRTC est un ensemble de Web API et donc plusieurs sujet distinct a aborder.

N'hésitez pas à commenter, Bonne vidéo :D
https://www.youtube.com/watch?v=Fsv0uBQiHuo

Github Correspondant : https://github.com/GuillaumeUnice/WebRTCTutorial

Salut à tous,

Cette semaine on commence l'implémentation du WebRTC.
On utilisera deux API primordiales au WebRTC : MediaStream & RTCPeerConnection.
Ainsi à la fin de la vidéo on sera capable d'échanger un flux vidéo et audio en Peer To Peer et ceux avec seulement deux fichiers JS.

Comme d'hab n'hésitez pas à commenter, enjoy :D

https://www.youtube.com/watch?v=NrNOO0Lwtrc

Bonjour,

tout d'abords merci pour cette vidéo, c'est tout à fait ce que je cherche à faire.
J'utilise actuellement un plugin flash pour cela, mais je souhaiterai m'en débarrasser.

Je n'ai pas saisi les prérequis à avoir côté serveur, je ne sais même pas si il en a...
En prenant le code sur github, que dois-je faire pour que cela fonctionne ?

Merci d'avance pour tes réponses :)

Salut @Geoffrey74,

Heureux que cela corresponde à tes besoins,
Alors pas de prérequis particulier côté serveur, c'est décrit dans la première vidéo le serveur sert de point intermédiaire de rencontre avant que les deux clients communiquent en PeerToPeer donc le serveur joue le rôle de point de rendez-vous peu importe sa techno et son architecture.

Pour le Git suffit de suivre le ReadMe mais je vais compléter pour les personnes pas habituées à NPM.
Déjà il te faut NPM d'installé.


Alors voilà les commandes :

Code:

---

1 2 3 4 5 6

git clone https://github.com/GuillaumeUnice/WebRTCTutorial cd WebRTCTutorial npm i npm install -g strongloop slc run

---

Et voilà tu te rends au http://localhost:3000/

Vendredi il y aura la vidéo consacrée au screensharing et aussi l'utilisation de la librarie AdapterJS pour que cela soit compatible sur certains navigateurs (IE, Edge et Safari).
Donc restez connecté et patient :D

Peace

Salut Echyzen,

merci d'avoir répondu.
Je n'ai que très peu de connaissance en JS, je ne connais que le php (les autre langage je "bidouille").

Je vais essayer ça de suite, merci beaucoup !


EDIT:

à quoi servent ces 3 commandes ?
Si je peux comprendre un minimum ce que je fais, je préfère :aie:

Bien sûr git clone pour récupérer le dépôt donc le code en ligne.

Code:

---

npm i

---

= npm install cela va installer toutes les dépendances c'est à dire toutes les libs que j'utilisent et qui sont spécifiés dans le package.json, pour cela NPM(Node Package Manager) va les télécharger auprès de npmjs.com

Code:

---

npm install -g strongloop

---

Install de façon global strongloop comme çà si tu pourras l'utiliser depuis partout et pas seulement pour mon projet. Sa prend pas beaucoup de place et ça permet de faire des serveurs js très rapidement donc cela ne mange pas de pain de l'installer sur la machine.

Code:

---

slc run

---

cela lance le serveur sur le port 3000

Ok parfait, merci.


J'vais faire joujoue alors, merci :)

Salut,

je rencontre un petit soucis pour le fonctionnement de l'appel vision, j'ai ces erreurs dès que je clic sur Accept vision :

Citation:

---

TypeError: this._recipeManager is null[En savoir plus] LoginManagerParent.jsm:75:9
<unavailable> webRTC.js:146

---

Aurai-tu une idée ?

Si besoin je peux te filer l'url du script si ça peut t'aider.

Lu,
visiblement il y a du jsm donc j'en déduis que ce n'est pas le projet Git mais ton projet perso.

Du coup c'est hors scope de ce topic, si tu veux on peut continuer en mp mais pas là car cela va polluer le sujet.
Néanmoins, avec juste cette ligne d'erreur je ne sais que te dire à part :

Code:

---

1 2	this._recipeManager is null

---

Et çà c'est pas le webRTC au passage avoir des variables "manager" est à éviter car sémantiquement manager signifie tout et rien à la fois surtout en info

Peace.

Salut à tous,

On poursuit avec l'utilisation d'AdapterJS un polyfill permettant d'avoir une compatibilité sur l'ensemble des navigateurs ainsi que du screensharing.

Comme d'hab n'hésitez pas à commenter, enjoy :D
https://www.youtube.com/watch?v=jAIeNNQ4AII

BOnjour,

Merci pour ce tuto, je tente de mettre en place un module de visio, tout fonctionne bien en mode dev (wampserver/localhost), mais lorsque je déploie je réussi à créer une demande, mais lors de la création de la réponse j'ai le message "ice connection failed" pouvez vous me dire ce qui pourrait être a l'origine de cette ano
Petite information complémentaire, lorsque je fait le test depuis le même ordi pas de problème, mais depuis deux ordi différents, crac j'ai le message "ice connection failed"

merci de votre aide
cdt

Salut,

Classique, ton code est correct le problème n'est pas au niveau applicatif mais au niveau déploiement en production et network de configuration.
Car il faut comprendre que si tout le monde pourrait s'échanger les informations aussi simplement il y aurait de grands trous de sécurité.

En faites sur le papier c'est serverless mais en vrai il va falloir mettre en place des servers TURN & STUN :

Le TURN permet aux différents clients d'exposer leurs adresses IP dans un contexte sécurisé pour du WebRTC.
Le STUN c'est dans le cas d'un intranet particulier dans une société pour que la communication derrière redirige vers le bon client du réseau internet cela résout les soucis possibles de NAT/PAT, donc uniquement dans le cas d'une infrastructure spécifique.

C'est pas le plus facile à configurer, c'est pour cela qu'il existe des serveurs pré-configurés mise en place par Mozilla et Google... mais là pour le coup, on casse le côté P2P décentralisé même si ce n'est que des serveurs de redirection.

A bientôt