Peer to peer (P2P) Flutter

Qu’est-ce que le Peer to Peer ?

Le Peer to peer (P2P) est un modèle de communication informatique où les ordinateurs (ou les dispositifs connectés) communiquent directement les uns avec les autres, sans passer par un serveur centralisé. Chaque ordinateur peut, à la fois, être un client et un serveur, partageant ainsi des ressources telles que des fichiers, des données, des applications ou même des services avec d’autres dispositifs connectés au réseau.

Qu’est-ce que la communication temps réel ?

La communication en temps réel est un mode de communication dans lequel tous les utilisateurs peuvent échanger des informations instantanément (ou presque). Cela signifie qu’il n’y a pas de délai entre le moment où quelqu’un envoie une information et le moment où ses destinataires la reçoivent.

Dans ce contexte, le terme temps réel est synonyme de direct. Il est utile pour les téléconférences, les appels vidéo, le partage de fichiers, le partage d’écran, les jeux vidéos multi-joueurs, etc.

Qu’est-ce que Flutter ?

Flutter, quant à lui, est un framework de développement d’applications mobiles open source créé par Google, qui permet de créer des applications mobiles multiplateformes pour Android et iOS à l’aide d’un seul code source.

Qu’est-ce que le WebRTC ?

Enfin, WebRTC (Web Real-Time Communication) est un ensemble d'API open source qui permet la communication peer to peer en temps réel entre les navigateurs Web, les applications mobiles et d'autres plates-formes. Il permet une communication pair à pair sans avoir besoin de plugins ou de logiciels supplémentaires, ce qui le rend facilement accessible pour les utilisateurs.

Ainsi, l'utilisation de WebRTC avec Flutter permet de créer des applications de communication en temps réel pair à pair pour les plates-formes mobiles, sans avoir besoin d'installer des plugins ou des logiciels supplémentaires.

Le package peerdart

Pour faire du peer to peer avec Flutter le plus simple est d’utiliser le package peerdart peerdart qui est un outil d’échanges pair à pair (notamment visioconférence) en temps réel pour les applications Flutter. Cela peut être très pratique pour les développeurs qui souhaitent intégrer des fonctionnalités d’échanges pair à pair (notamment visioconférence) dans leur application Flutter sans avoir à gérer de serveur ou à payer des frais de trafic de données.

L’un des principaux avantages de peerdart est qu’il utilise le protocole WebRTC (Web Real-Time Communication), qui est un standard ouvert pour la communication en temps réel sur le web. Cela signifie que vous pouvez utiliser peerdart avec n’importe quel navigateur compatible WebRTC, ce qui est très pratique si vous souhaitez développer une application Flutter qui peut être utilisée sur différents appareils et plateformes.

Le package peerdart est également facile à utiliser. Il fournit une API simple qui vous permet de créer et de gérer des appels vidéo et audio en quelques lignes de code. Vous pouvez également personnaliser l’interface utilisateur de votre application en utilisant les widgets Flutter fournis par le package.

Mise en place du P2P

import 'package:flutter/material.dart';
import 'package:peer_dart/peer_dart.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Peer _peer;
  String _callId;

  @override
  void initState() {
    super.initState();
    _peer = Peer('mon_identifiant_unique');
  }

  void _makeCall() {
    _callId = _peer.call('identifiant_de_l'appelé');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PeerVideo(
              peer: _peer,
              callId: _callId,
              type: VideoType.LOCAL,
            ),
            PeerVideo(
              peer: _peer,
              callId: _callId,
              type: VideoType.REMOTE,
            ),
            RaisedButton(
              child: Text('Appeler'),
              onPressed: _makeCall,
            ),
          ],
        ),
      ),
    );
  }
}

Dans cet exemple, nous créons d’abord un objet Peer en lui passant un identifiant unique. Nous avons également défini une fonction _makeCall() qui utilise cet objet Peer pour créer un appel vidéo vers l’identifiant de l’appelé. Enfin, nous avons ajouté deux widgets PeerVideo dans notre interface utilisateur qui affichent les flux vidéo de l’appelant et de l’appelé. Nous avons également ajouté un bouton qui appelle la fonction _makeCall() lorsqu’il est cliqué. Il est également important de noter qu’il nécessite une autorisation de l’utilisateur pour accéder à l’audio de l’utilisateur.

Voici un autre exemple qui montre comment utiliser le package peerdart pour créer un appel audio en temps réel entre deux utilisateurs :

import 'package:flutter/material.dart';
import 'package:peerdart/peerdart.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';

class CallTest extends StatefulWidget {
  const CallTest({Key? key}) : super(key: key);

  @override
  State<CallTest> createState() => _CallTestState();
}

class _CallTestState extends State<CallTest> {
  final TextEditingController _controller = TextEditingController();
  final Peer peer = Peer(options: PeerOptions(debug: LogLevel.All));
  final _localRenderer = RTCVideoRenderer();
  final _remoteRenderer = RTCVideoRenderer();
  late DataConnection conn;
  bool inCall = false;
  bool connected = false;
  String? peerId;

  @override
  void initState() {
    super.initState();
    _localRenderer.initialize();
    _remoteRenderer.initialize();

    peer.on("open", null, (ev, context) {
      setState(() {
        peerId = peer.id;
      });
    });

    peer.on("call", null, (ev, context) async {
      final call = ev.eventData as MediaConnection;

      // Obtenir l'accès vidéo/audio des utilisateurs locaux.
      final mediaStream = await navigator.mediaDevices
          .getUserMedia({"video": true, "audio": false});

      // Réponse à l'appel.
      call.answer(mediaStream);

      // Recevoir le flux vidéo/audio d'autres pairs.
      call.on("stream", null, (ev, _) async {
        _localRenderer.srcObject = mediaStream;
        _remoteRenderer.srcObject = ev.eventData as MediaStream;

        setState(() {
          inCall = true;
        });
      });
    });
  }

  @override
  void dispose() {
    peer.dispose();
    _controller.dispose();
    _localRenderer.dispose();
    _remoteRenderer.dispose();
    super.dispose();
  }

  void connect() async {
    final mediaStream = await navigator.mediaDevices
        .getUserMedia({"video": true, "audio": false});

    final conn = peer.call(_controller.text, mediaStream);

    // Pour recevoir le flux d'un autre pair
    conn.on("stream", null, (ev, _) {
      _remoteRenderer.srcObject = ev.eventData as MediaStream;
      _localRenderer.srcObject = mediaStream;

      setState(() {
        inCall = true;
      });
    });
  }

Conclusion

Le package peerdart est un package qui ajoute des fonctionnalités à Dart pour faciliter l’utilisation de PeerJS, une bibliothèque JavaScript pour la création d’applications de communication en temps réel.

Cela permet de créer des applications de communication en temps réel telles que des appels audio et vidéo en utilisant les fonctionnalités de PeerJS avec le langage Dart.

Il est important de noter que peerdart est maintenu par une communauté active et est constamment mis à jour avec de nouvelles fonctionnalités et optimisations. Cela signifie que vous pouvez être sûr que votre application Flutter bénéficiera des dernières avancées en matière de visioconférence en temps réel.

Ne manquez pas l’opportunité de créer des applications de communication en temps réel avec Flutter en utilisant les fonctionnalités de PeerJS grâce au package peerdart. Venez tester cette solution avec notre équipe d’experts équipe d’experts en développement Flutter et découvrez comment elle peut améliorer les fonctionnalités de votre application !