Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Discussion: WebRTC tutoriel

  1. #1
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut 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


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

  2. #2
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

    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


  3. #3
    Membre éclairé Avatar de Geoffrey74
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2007
    Messages
    520
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2007
    Messages : 520
    Points : 767
    Points
    767

    Par défaut

    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

  4. #4
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

    Peace

  5. #5
    Membre éclairé Avatar de Geoffrey74
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2007
    Messages
    520
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2007
    Messages : 520
    Points : 767
    Points
    767

    Par défaut

    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

  6. #6
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

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

    = 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    cela lance le serveur sur le port 3000

  7. #7
    Membre éclairé Avatar de Geoffrey74
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2007
    Messages
    520
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2007
    Messages : 520
    Points : 767
    Points
    767

    Par défaut

    Ok parfait, merci.


    J'vais faire joujoue alors, merci

  8. #8
    Membre éclairé Avatar de Geoffrey74
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2007
    Messages
    520
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2007
    Messages : 520
    Points : 767
    Points
    767

    Par défaut

    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 :

    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.

  9. #9
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  10. #10
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

    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

  11. #11
    Membre actif
    Profil pro
    Inscrit en
    août 2004
    Messages
    693
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2004
    Messages : 693
    Points : 225
    Points
    225

    Par défaut

    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

  12. #12
    Membre habitué Avatar de Echyzen
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    décembre 2012
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : décembre 2012
    Messages : 119
    Points : 160
    Points
    160

    Par défaut

    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

Discussions similaires

  1. Réponses: 0
    Dernier message: 09/02/2014, 23h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo