Vous êtes sur la page 1sur 22

Sujet WEBRTC SCREEN

SHARING

Webrtc- screen sharing


UCAD, DAKAR SENEGAL
WEBRTC SCREEN SHARING

SOMMAIRE

INTRODUCTION ................................................................................... 2
I- COMPATIBILITE AVEC LES NAVIGATEURS ........................................... 3
II- ARCHITECTURE ET FONCTIONNEMENT DU WEBRTC .......................... 5
1- serveur STUN (Simple Traversal Of User Datagram Protocol) ......... 7
2- serveur TURN (Traversal Using Relays around NAT) ........................ 7
III- MISE EN PLACE DE LA SOLUTION ...................................................... 9
1- pré requis .......................................................................................... 9
2- réalisation ......................................................................................... 9
3- le dossier server .............................................................................. 10
a- server.js ........................................................................................ 11
1- le dossier client ............................................................................... 14
a- index.html .................................................................................... 14
b- shareWebRTC.js ........................................................................... 16
c- reveiveWebRTC.js ........................................................................ 18
IV- DEPLOIEMENT ................................................................................. 19
CONCLUSION ...................................................................................... 21

WEBRTC- SCREEN SHARING 1


WEBRTC SCREEN SHARING

INTRODUCTION

Lorsqu’on essaye de mettre sur pied un système de visioconférence on s’en rend


très vite compte qu’on doit passer par des module bien spécifique, souvent des
solutions payante qui nécessite l’installation des modules particulier sur
l’ordinateur du client. L’idée derrière le webrtc est de rendre la communication
audio et vidéo ou la transmission de donnée de maniéré plus générale beaucoup
plus simple et évité a passé par des outils tiers.

Le webrtc pour web real time communication un Framework qui permet la


mise en place d'un système de communication instantané directement dans le
navigateur. Il apporte différents composants au sein du navigateur qui permet à
chacun d'implémenter sa propre application RTC :
- MediaStream : il permet l ‘accès aux périphériques audio et vidéo de
l’utilisateur, et aussi le partage d’écran.
- PeerConnection : permet d'implémenter la couche réseau et d'assurer la
communication Peer to Peer entre le navigateur et la cible distante, il gère aussi
l’encodage du flux, il va aussi permettre de gérer le contournement des Firewall
et des NAT.
- DataChannel: permet la mise en place d'un canal réseau qui peut transférer de
manière bidirectionnelle des données arbitraires.
C’est autour de ces trois (03) APIs que le Webrtc fonctionne.

Dans notre cas nous allons utiliser cette nouvelle technologie pour mettre en
place une application de partage d’écran (screen sharing) entre deux utilisateurs.

WEBRTC- SCREEN SHARING 2


WEBRTC SCREEN SHARING

Sera donc ainsi le rendu de notre application de screen sharing.

I- COMPATIBILITE AVEC LES NAVIGATEURS

Le webrtc est l’un des ajouts les plus révolutionnaires aux communications et
technologies web. C’est encore une technologie jeune mais son potentiel est déjà
apparent et ne peut être ignoré.
Comme avec toutes les nouvelles technologique tous les navigateurs web ne sont
pas encore compatibles

WEBRTC- SCREEN SHARING 3


WEBRTC SCREEN SHARING

On peut observer sur cette image que la plus part des navigateurs peuvent
implémenter les fonctionnalités du webrtc. Nous remarquons que Apple a tout
simplement refuser de permettre l’utilisation de la webrtc dans son navigateur
safari, sûrement du au risque d’insécurité que cette nouvelle technologie apporte,
mais bon sa c ‘est une tout autre histoire.

Si vous êtes passionné par cette technologie vous pouvez aussi vous rendre sur le
site http://iswebrtcreadyyet.com/ pour savoir si le webrtc est supporté par le
navigateur que vous souhaité utiliser.

WEBRTC- SCREEN SHARING 4


WEBRTC SCREEN SHARING

Libre à vous d’utiliser le navigateur web que vous souhaitez utiliser, à condition
que le champ pour la fonctionnalité screen sharing ne soit pas de couleur rouge.

II- ARCHITECTURE ET FONCTIONNEMENT DU WEBRTC

Comment je fais lorsque je souhaite qu’un utilisateur redX puisse communiquer


avec un autre utilisateur blueSky ?
Nous allons imaginer que l’utilisateur redX veut démarrer une communication.
Pour cela nous allons générer une offre avec la classe RTCSessionDescription

Cette offre a une composition bien particulière qui répond au nom de session
description Protocol (SDP). Elle contient plusieurs informations concernant
l’utilisateur, on a par exemple le
chemin pour pouvoir le contacter
(son adresse) on, les différents
codecs qu’il supporte etc. ...

Une fois cette offre générer, redX va la transmettre à blueSky. Il peut la


transmettre de n’importe quel manière il n’y a pas de standard défini. On peut

WEBRTC- SCREEN SHARING 5


WEBRTC SCREEN SHARING
prendre ses informations et l’envoyer par mail par exemple. Mais dans notre cas
nous utiliserons un sevrer tiers (web socket) pour transmettre notre offre.

Une fois que blueSky va recevoir l’offre, il va aussi générer une son offre qui
contient ses informations et l’envoyer à redX.
Lorsqu'une offre est reçue elle est ajoutée à l'instance de RTCPeerConnection
via la méthode setRemoteDescription qui prend trois (03) paramètre à savoir un
objet RTCSessionDescription, un callback en cas de succès qui va permet
d’envoyer notre description en réponse avec la méthode createAnswer, et en
3iem paramètre un callback qui se déclenchera en cas d’erreur.

Une fois que les deux utilisateurs ont échanges leurs offres ils peuvent
commencer une communication en Peer to Peer. A ce moment il n’y a plus
intermédiaire, ils vont pouvoir communiquer et échanger directement l’un avec
l’autre.

Toutefois cela ne fonctionne pas aussi facilement. Car nous sommes


généralement équipés de pare-feu. Si on a mon adresse IP public sa ne veux pas
forcément dire qu’on va pouvoir me contacter, en effet on va tomber sur notre
modem et notre modem ne saura pas comment faire pour rediriger cela vers notre

WEBRTC- SCREEN SHARING 6


WEBRTC SCREEN SHARING
ordinateur. Pour contourner cela nous allons ajouter d’autre élément à notre
système de Webrtc

1- serveur STUN (Simple Traversal Of User Datagram Protocol)

C’est un serveur que nous allons ajouter, qui saura comment on pourra nous
joindre. Son principe de fonctionnement est un peu comme les sites qui
permettent d’obtenir nos adresses IP. Avec le webrtc il est possible de définir
différent serveur stun à utiliser. Il en existe des gratuits et des payants.
Dans notre cas nous utiliserons le serveur stun gratuit de Google :
{
‘urls’: ‘stun:stun.l.google.com:19302
}

2- serveur TURN (Traversal Using Relays around NAT)

Permet de résoudre le problème de NAT. Nous n’avons qu’une seul adresse


public et notre modem ne sais pas qu’elle machine sur notre réseau il doit
contacter. Ces serveurs ont pour but de rediriger le trafic. Puisqu’on ne peut pas
nous joindre directement alors nous allons transmettre nos données sur ces
serveurs et récupérés les données toujours à travers ce serveur.

Pour mettre place ces deux serveur nous allons créer un objet configuration qui
aura comme clé iceServers dans lequel nous définirons nos serveurs.
Puis nous ajouterons cet objet comme argument lors de l’instanciation de la classe
RTCPeerConnection.

WEBRTC- SCREEN SHARING 7


WEBRTC SCREEN SHARING

C’est le navigateur qui se charge d'utiliser l'ICE afin d'obtenir le meilleur chemin
entre les deux (02) machines. C'est ce que l'on retrouve avec la fonction
onicecandidate.

WEBRTC- SCREEN SHARING 8


WEBRTC SCREEN SHARING
Notre architecture Peer to Peer réssemblera à ceci

III- MISE EN PLACE DE LA SOLUTION

1- pré requis

Pour la mise en place de cette solution il faut une petite connaissance de base en :
- html 5 et css 3
- JavaScript : en backend, nous utiliserons la norme ES6
- jquery
- bootstrap : pour la mise en forme de notre Frontend
- git : les commandes de base,
- nodeJS installé

2- réalisation

WEBRTC- SCREEN SHARING 9


WEBRTC SCREEN SHARING

Après la création de notre repository sur notre serveur de versioning gitlab,


ensuite il faut faire une copie de ce repository dans notre machine locale. Nous
sommes maintenant près commencer le projet.
Notre projet sera composé de deux dossiers à savoir :
- client : dans ce dossier on mettra notre fichier jquery et css, puis un dossier
bootstrap, un dossier pour nos images, on aura un dossier sharing qui contiendra
notre fichier index.html et un dossier js qui aura nos fichiers receiveWebRTC.js,
shareWebRTC.js et socket.js

- server : qui contiendra notre fichier server.js, la clé du certificat, les fichiers de
configuration de nodejs et le dossier node module.

3- le dossier server

Avant de commencer nous allons installer notre gestionnaire de dépendance pour


cela nous allons lancer la commande : $npm init.
Ensuite il faut renseigner les informations demandées par la commande. Une fois
terminer nous allons exécuter la commande : $npm install.
Le fichier package.json contiendra tous les dépendances du serveur.
Nous allons utiliser les web socket qui est un Protocol de communication sur
TCP permettant une communication bidirectionnelle avec le serveur en temps
réel. Nous allons le configurer à la manière de express.js

WEBRTC- SCREEN SHARING 10


WEBRTC SCREEN SHARING
Pour ce serveur nous allons utiliser la librairie socket.io qui est une excellent
librairie utilisant les web socket car si le navigateur n’est pas compatible avec le
Protocol web socket il basculera vers un système moins récent jusqu’à établir la
connexion

Pour installer la librairie on utilise la commande : $npm install socket.io


Pour installer le package express on utilise la commande : $nom install express

La librairie socket.io s’installer des deux côtés (serveur et client).


Du coté client il y aura deux (02) script js. Nous allons insérer ces scripts avant
la balise fermante du body de notre page index.html

le second fichier contient le script : let socket = io() qui est l’intenses nodejs de
socket.io pour la connexion et qui est accessible de façon global.

La communication client/serveur s’effectue au travers de deux (02) méthodes à


savoir :
- la méthode on : qui contient deux paramétrés. Le premier paramétré est un string
qui représente le nom de l’évènement sur lequel le serveur écoute. Et en second
paramètre la fonction a exécuter lorsque l’évènement est détecter.
- la méthode émit : qui contient également deux paramètres, le premier étant un
string qui représente l’évènement qui sera déclenché. Et le second paramètre
contient l’objet qui sera envoyé.

Pour que notre server ne s’arrête pas en cas d’erreur nous allons installer le
package nodemon avec la commande : $ npm install nodemon

a- server.js

WEBRTC- SCREEN SHARING 11


WEBRTC SCREEN SHARING
À l’entête de notre fichier nous allons importer les modules donc nous avons
besoin.
path : fournit des utilitaires pour travailler avec les chemins de fichiers et de
répertoires.
fs : est une api fournie par Node pour lire / écrire des fichiers depuis / vers des
répertoires

Ensuite nous créons notre server express utilisant le Protocol https que l’on va
stocker dans un objet server. Avant cela nous allons générer nos clés et certificat.
Pour cela nous ouvrons notre invite de commande et nous entrons la commande :
$openssl rsa -in key.pem -out newkey.pem
Ensuite il faut renommer le fichier newkey.pem en key.pem et nous pourrions
alors nous connecté sur notre serveur express https NodeJs.

WEBRTC- SCREEN SHARING 12


WEBRTC SCREEN SHARING
Pour terminer nous lançons notre serveur pour qu’il écoute sur le port 3000.

Le serveur près il faut maintenant configurer notre serveur pour l’envoi et la


réception des messages.

WEBRTC- SCREEN SHARING 13


WEBRTC SCREEN SHARING
Pour lancer notre serveur on utilise la commande : $nodemon server.js

1- le dossier client

a- index.html

Dans notre fichier index.html nous allons insérer les styles de bootstrap, et nos
fichiers js.

Dans le corps de notre page nous définirons un container qui sera divisé en trois
(03) sections : un header, un container-stream et un footer ensuite notre container-
stream sera divisé en 2 parties.

WEBRTC- SCREEN SHARING 14


WEBRTC SCREEN SHARING

Dans la première partie nous allons incruster notre balise vidéo (id
remoteVideo) qui permettra d’afficher l’écran partagé de l’autre utilisateur. Puis
dans la second partie nous allons insérer notre boutons de demande de partage
d’écran qui aura pour id share et un bouton pour accepter lorsqu’une demande
nous a été envoyer qui aura boutonAccepter comme id.

WEBRTC- SCREEN SHARING 15


WEBRTC SCREEN SHARING

b- shareWebRTC.js

Dans notre fichier shareWebRTC.js qui va nous permettre d’effectuer nos


demandent de partager d’écran. Dans ce fichier nous allons écrire notre code dans
une fonction anonyme.
Dans cette fonction anonyme nous allons écouter notre bouton qui a l’id share.
Lorsqu’un clic sera effectué sur ce bouton il lancera une fonction qui prendra en
paramètre l’évènement.

Ensuite qui lancera une fonction getScreenStream (callback) qui prendra en


paramètre un callback. Cette fonction va lancer une autre fonction
navigator.mediaDevices.getDisplayMedia qui va se charger de demander à
l’utilisateur qu’elle écran il souhaite partager, puis va récupérer la vidéo de
l’écran et lorsqu’il cliquera sur partager la fonction callback sera lancer et prendra
en paramétré un objet screenStream.

WEBRTC- SCREEN SHARING 16


WEBRTC SCREEN SHARING

Dans le processus de son exécution elle va créer une instance de la classe


RTCPeerConnection. Qui va attacher le flux vidéo de l’écran partagé à l’aide
de la méthode addStream, ensuite va attacher ses ice candidate.
Toujours avec notre instance RTCPeerConnection nous allons créer une offre à
l’aide de la méthode createOffer et l’envoyer au destinataire à l’aide de nos
sockets

WEBRTC- SCREEN SHARING 17


WEBRTC SCREEN SHARING
Après l’envoi de l’offre notre fonction va attendre l’offre du destinataire en
écoutant une réponse sur l’évènement RESPONSE_WEB_RTC

c- reveiveWebRTC.js

Comme dans le fichier précédent notre code sera exécuté dans une fonction
anonyme. Elle contiendra trois (03) variable : une variable pour la description
temporaire de l’émetteur, les ice candidate de l’émetteur et une variable pour
l’instance de la classe RTCPeerConnection.

Ensuite notre fonction va écouter sur l’évènement


CANDIDATE_WEB_RTC_USERTWO. Lorsqu’il va recevoir les candidats il
les empilés dans un tableau. Ensuite il écoutera l’évènement ASK_WEB_RTC
pour recevoir la description de l’émetteur.

Une fois les variables initialisées, il attendra le déclenchement d’un évènement


clic qui sera effectué sur le bouton Receive screen donc l’id est boutonAccepter

WEBRTC- SCREEN SHARING 18


WEBRTC SCREEN SHARING

Le clic effectué, nous allons créer une instance de la classe RTCPeerConnection


ensuite nous récupérons la description de l’émetteur avec la méthode
setRemoteDescription qui prend trois (03) paramètres à savoir un objet
RTCSessionDescription, un callback en cas de succès qui va permet d’envoyer
notre description en réponse avec la méthode createAnswer, et en 3eme
paramètre un callback d’échec, qui se déclenchera en cas d’erreur.

Une fois la communication établi, sur l’instance de RTCPeerConnection on


appelle la méthode onaddstream qui va recevoir une fonction anonyme avec un
évènement en paramètre. Ensuite nous allons sélectionner l’id (remoteVideo) de
notre balise vidéo créer dans le fichier index.html que nous allons stoker dans
une variable nommée video.
Ensuite nous allons mettre le stream dans l’objet src de la balise vidéo et enfin
on démarre la lecture de la vidéo

IV- DEPLOIEMENT

WEBRTC- SCREEN SHARING 19


WEBRTC SCREEN SHARING
Maintenant que nous avons terminé la réalisation de notre application et qu’il
fonctionne très bien, il ne nous reste plus qu’à la déployer dans une machine
Ubuntu server.

Après la dernière modification effectuée sur notre application, nous allons


envoyer ces modifications dans notre serveur de versioning.
On enregistre les dernières modifications.

$git add .
$git commit -m ‘dernière modification’

Ensuite il faut envoyer en ligne.


$git push

Une fois la totalité de notre application dans le serveur de versioning et dans la


branche master. Nous pouvons maintenant nous connecté dans notre machine
Ubuntu server. Apres avoir installé node et git dans notre machine serveur, nous
allons cloner notre projet.
Pour faire cela nous entrons la commande :
$git clone https://gitlab.com/screenSharingWebRTC/screen-sharing-webrtc.git

Une fois le clonage terminé nous nous positionnons dans le répertoire screen-
sharing-webrtc qui vient d’être créé. Ensuite nous nous positionnons dans le
répertoire server. Une fois à l’intérieur nous devons télécharger tous les
dépendances de notre application dans notre machine Ubuntu server. Pour faire
cela nous allons lancer la commande : $npm install.
Une fois l’installation des dépendances terminer nous pouvons maintenant lancer
le server de notre application avec la commande : $nodemon server.js

Une fois lancé il ne reste plus qu’à ouvrir notre navigateur web préférer ensuite
dans la barre d’url on entre :
https://-ip_machine_server-:3000/sharing/index.html

WEBRTC- SCREEN SHARING 20


WEBRTC SCREEN SHARING

CONCLUSION

En somme tout au long de ce document nous allons parler de la fonctionnalité


screen sharing de la nouvelle technologie webrtc. Malgré qu’il n’est pas
supporter par tous les navigateurs, avec lui nous pouvons effectuer un partage
d’écran dans pour autant utiliser des solutions tiers et parfois payante.

WEBRTC- SCREEN SHARING 21