AWS Chime SDK : Comment réaliser une visioconférence interactive

1# Création d'un nouveau projet React (si vous n'en avez pas déjà un)
2npx create-react-app chime-video-demo
3cd chime-video-demo
4
5# Installation des bibliothèques AWS Chime SDK
6npm install amazon-chime-sdk-js
7npm install aws-sdk
8
9# Installation des dépendances de backend (pour notre serveur)
10npm install express cors uuid

1// server.js
2const express = require('express');
3const cors = require('cors');
4const AWS = require('aws-sdk');
5const { v4: uuidv4 } = require('uuid');
6
7// Configuration d'AWS
8AWS.config.update({
9  region: 'us-east-1', // Remplacez par votre région
10  credentials: new AWS.Credentials({
11    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
12    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
13  })
14});
15
16const chime = new AWS.Chime({ region: 'us-east-1' });
17// Définir le point de terminaison Chime (choisir le bon point de terminaison pour votre région)
18chime.endpoint = new AWS.Endpoint('https://service.chime.aws.amazon.com');
19
20const app = express();
21app.use(cors());
22app.use(express.json());
23
24// Route pour créer une nouvelle réunion
25app.post('/meetings', async (req, res) => {
26  try {
27    // Créer une nouvelle réunion
28    const meeting = await chime.createMeeting({
29      ClientRequestToken: uuidv4(),
30      MediaRegion: 'us-east-1', // Ou une région plus proche de vos utilisateurs
31      ExternalMeetingId: `ChimeDemo-${uuidv4().substring(0, 8)}` // ID externe pour votre référence
32    }).promise();
33    
34    // Créer un participant (attendee)
35    const attendee = await chime.createAttendee({
36      MeetingId: meeting.Meeting.MeetingId,
37      ExternalUserId: `user-${uuidv4().substring(0, 8)}` // ID externe pour le participant
38    }).promise();
39    
40    // Renvoyer les informations de réunion et de participant
41    res.json({
42      meeting: meeting.Meeting,
43      attendee: attendee.Attendee
44    });
45  } catch (err) {
46    console.error('Error creating meeting:', err);
47    res.status(500).json({ error: err.message });
48  }
49});
50
51// Route pour rejoindre une réunion existante
52app.post('/attendees', async (req, res) => {
53  try {
54    const { meetingId } = req.body;
55    if (!meetingId) {
56      return res.status(400).json({ error: 'Meeting ID is required' });
57    }
58    
59    // Créer un nouveau participant pour une réunion existante
60    const attendee = await chime.createAttendee({
61      MeetingId: meetingId,
62      ExternalUserId: `user-${uuidv4().substring(0, 8)}`
63    }).promise();
64    
65    res.json({ attendee: attendee.Attendee });
66  } catch (err) {
67    console.error('Error creating attendee:', err);
68    res.status(500).json({ error: err.message });
69  }
70});
71
72// Route pour terminer une réunion
73app.post('/meetings/:meetingId/end', async (req, res) => {
74  try {
75    const { meetingId } = req.params;
76    await chime.deleteMeeting({
77      MeetingId: meetingId
78    }).promise();
79    
80    res.json({ message: 'Meeting deleted successfully' });
81  } catch (err) {
82    console.error('Error deleting meeting:', err);
83    res.status(500).json({ error: err.message });
84  }
85});
86
87const PORT = process.env.PORT || 3001;
88app.listen(PORT, () => {
89  console.log(`Server running on port ${PORT}`);
90});

1// src/components/VideoMeeting.js
2import React, { useState, useEffect, useRef } from 'react';
3import {
4  ConsoleLogger,
5  DefaultDeviceController,
6  DefaultMeetingSession,
7  LogLevel,
8  MeetingSessionConfiguration
9} from 'amazon-chime-sdk-js';
10
11const VideoMeeting = () => {
12  const [meetingId, setMeetingId] = useState('');
13  const [joinedMeeting, setJoinedMeeting] = useState(false);
14  const [audioVideo, setAudioVideo] = useState(null);
15  const [attendeeId, setAttendeeId] = useState('');
16  const [attendees, setAttendees] = useState([]);
17  
18  const videoTileRef = useRef({});
19  const meetingSessionRef = useRef(null);
20  const localVideoRef = useRef(null);
21  const remoteVideoTilesRef = useRef({});
22  
23  // Fonction pour créer une nouvelle réunion
24  const createMeeting = async () => {
25    try {
26      const response = await fetch('http://localhost:3001/meetings', {
27        method: 'POST',
28        headers: {
29          'Content-Type': 'application/json'
30        }
31      });
32      
33      const data = await response.json();
34      setMeetingId(data.meeting.MeetingId);
35      setAttendeeId(data.attendee.AttendeeId);
36      
37      joinMeeting(data.meeting, data.attendee);
38    } catch (err) {
39      console.error('Error creating meeting:', err);
40    }
41  };
42  
43  // Fonction pour rejoindre une réunion
44  const joinMeeting = async (meeting, attendee) => {
45    try {
46      // Configurer le logger
47      const logger = new ConsoleLogger('ChimeMeetingLogs', LogLevel.INFO);
48      
49      // Configurer le contrôleur de périphériques
50      const deviceController = new DefaultDeviceController(logger);
51      
52      // Créer la configuration de la session
53      const configuration = new MeetingSessionConfiguration(meeting, attendee);
54      
55      // Créer la session de réunion
56      const meetingSession = new DefaultMeetingSession(
57        configuration,
58        logger,
59        deviceController
60      );
61      
62      meetingSessionRef.current = meetingSession;
63      const av = meetingSession.audioVideo;
64      setAudioVideo(av);
65      
66      // Configurer les observateurs
67      setupVideoTileObservers(av);
68      setupAttendeeObservers(av);
69      
70      // Démarrer la session
71      await av.start();
72      
73      // Activer les périphériques locaux
74      await av.startLocalVideoTile();
75      await av.realtimeMuteLocalAudio(); // Commencer en mode muet
76      
77      setJoinedMeeting(true);
78    } catch (err) {
79      console.error('Error joining meeting:', err);
80    }
81  };
82  
83  // Configurer les observateurs de tuiles vidéo
84  const setupVideoTileObservers = (av) => {
85    // Gestion des tuiles vidéo
86    av.addObserver({
87      // Appelé quand une nouvelle tuile vidéo est créée
88      videoTileDidUpdate: (tileState) => {
89        if (!tileState.boundAttendeeId) {
90          return;
91        }
92        
93        const tileId = tileState.tileId;
94        videoTileRef.current[tileId] = tileState;
95        
96        // Si c'est une vidéo locale
97        if (tileState.localTile) {
98          av.bindVideoElement(tileId, localVideoRef.current);
99        } else {
100          // Si c'est une vidéo distante
101          const videoElement = document.createElement('video');
102          videoElement.id = `video-${tileId}`;
103          document.getElementById('remote-videos').appendChild(videoElement);
104          av.bindVideoElement(tileId, videoElement);
105          
106          // Stocker la référence pour le nettoyage ultérieur
107          remoteVideoTilesRef.current[tileId] = videoElement;
108        }
109      },
110      
111      // Appelé quand une tuile vidéo est supprimée
112      videoTileWasRemoved: (tileId) => {
113        if (remoteVideoTilesRef.current[tileId]) {
114          const videoElement = remoteVideoTilesRef.current[tileId];
115          if (videoElement.parentNode) {
116            videoElement.parentNode.removeChild(videoElement);
117          }
118          delete remoteVideoTilesRef.current[tileId];
119        }
120        delete videoTileRef.current[tileId];
121      }
122    });
123  };
124  
125  // Configurer les observateurs de participants
126  const setupAttendeeObservers = (av) => {
127    // Gérer les participants
128    av.realtimeSubscribeToAttendeeIdPresence((attendeeId, present) => {
129      if (present) {
130        // Nouveau participant rejoint
131        setAttendees(prev => [...prev, attendeeId]);
132      } else {
133        // Participant quitte
134        setAttendees(prev => prev.filter(id => id !== attendeeId));
135      }
136    });
137  };
138  
139  // Fonction pour quitter la réunion
140  const leaveMeeting = async () => {
141    if (audioVideo) {
142      audioVideo.stopLocalVideoTile();
143      audioVideo.stop();
144      
145      // Nettoyer les éléments vidéo distants
146      Object.values(remoteVideoTilesRef.current).forEach(videoElement => {
147        if (videoElement.parentNode) {
148          videoElement.parentNode.removeChild(videoElement);
149        }
150      });
151      
152      remoteVideoTilesRef.current = {};
153      setJoinedMeeting(false);
154      setAttendees([]);
155      
156      // Si vous êtes l'hôte, vous pouvez aussi terminer la réunion
157      if (meetingId) {
158        try {
159          await fetch(`http://localhost:3001/meetings/${meetingId}/end`, {
160            method: 'POST'
161          });
162        } catch (err) {
163          console.error('Error ending meeting:', err);
164        }
165      }
166    }
167  };
168  
169  // Fonction pour activer/désactiver le micro
170  const toggleMute = async () => {
171    if (!audioVideo) return;
172    
173    const muted = await audioVideo.realtimeIsLocalAudioMuted();
174    if (muted) {
175      await audioVideo.realtimeUnmuteLocalAudio();
176    } else {
177      await audioVideo.realtimeMuteLocalAudio();
178    }
179  };
180  
181  // Fonction pour activer/désactiver la caméra
182  const toggleVideo = async () => {
183    if (!audioVideo) return;
184    
185    const videoTile = audioVideo.getLocalVideoTile();
186    if (videoTile && videoTile.state().active) {
187      audioVideo.stopLocalVideoTile();
188    } else {
189      audioVideo.startLocalVideoTile();
190    }
191  };
192  
193  // Nettoyer lors du démontage du composant
194  useEffect(() => {
195    return () => {
196      if (joinedMeeting) {
197        leaveMeeting();
198      }
199    };
200  }, [joinedMeeting]);
201  
202  return (
203    <div className="video-meeting-container">
204      <h1>AWS Chime SDK Video Meeting</h1>
205      
206      {!joinedMeeting ? (
207        <div className="meeting-controls">
208          <button onClick={createMeeting}>Créer une nouvelle réunion</button>
209          <div>
210            <input 
211              type="text" 
212              placeholder="Entrez l'ID de réunion" 
213              value={meetingId} 
214              onChange={(e) => setMeetingId(e.target.value)} 
215            />
216            <button onClick={() => joinExistingMeeting()}>Rejoindre une réunion existante</button>
217          </div>
218        </div>
219      ) : (
220        <div className="meeting-room">
221          <div className="video-container">
222            <div className="local-video-container">
223              <h3>Vous</h3>
224              <video ref={localVideoRef} className="local-video" />
225            </div>
226            
227            <div id="remote-videos" className="remote-videos-container">
228              <h3>Participants ({attendees.length - 1})</h3>
229              {/* Les vidéos distantes seront injectées ici */}
230            </div>
231          </div>
232          
233          <div className="meeting-controls">
234            <button onClick={toggleMute}>Activer/Désactiver Micro</button>
235            <button onClick={toggleVideo}>Activer/Désactiver Caméra</button>
236            <button onClick={leaveMeeting} className="leave-button">Quitter la réunion</button>
237          </div>
238          
239          <div className="meeting-info">
240            <p>ID de réunion: {meetingId}</p>
241            <p>Partagez cet ID avec d'autres personnes pour qu'elles puissent rejoindre votre réunion.</p>
242          </div>
243        </div>
244      )}
245    </div>
246  );
247};
248
249export default VideoMeeting;

1// src/App.js
2import React from 'react';
3import './App.css';
4import VideoMeeting from './components/VideoMeeting';
5
6function App() {
7  return (
8    <div className="App">
9      <VideoMeeting />
10    </div>
11  );
12}
13
14export default App;

1/* src/App.css */
2.video-meeting-container {
3  max-width: 1200px;
4  margin: 0 auto;
5  padding: 20px;
6}
7
8.meeting-controls {
9  margin: 20px 0;
10  display: flex;
11  gap: 10px;
12  flex-wrap: wrap;
13}
14
15.video-container {
16  display: flex;
17  flex-wrap: wrap;
18  gap: 20px;
19  margin-bottom: 20px;
20}
21
22.local-video-container, .remote-videos-container {
23  background-color: #f5f5f5;
24  border-radius: 8px;
25  padding: 10px;
26}
27
28.local-video {
29  width: 300px;
30  height: 225px;
31  background-color: #333;
32  border-radius: 4px;
33}
34
35.remote-videos-container {
36  flex-grow: 1;
37  min-height: 225px;
38  display: flex;
39  flex-wrap: wrap;
40  gap: 10px;
41}
42
43.remote-videos-container video {
44  width: 300px;
45  height: 225px;
46  background-color: #333;
47  border-radius: 4px;
48}
49
50button {
51  padding: 10px 15px;
52  background-color: #4CAF50;
53  color: white;
54  border: none;
55  border-radius: 4px;
56  cursor: pointer;
57}
58
59button:hover {
60  background-color: #45a049;
61}
62
63.leave-button {
64  background-color: #f44336;
65}
66
67.leave-button:hover {
68  background-color: #d32f2f;
69}
70
71input[type="text"] {
72  padding: 8px;
73  border: 1px solid #ddd;
74  border-radius: 4px;
75  margin-right: 5px;
76}
77
78.meeting-info {
79  background-color: #e1f5fe;
80  padding: 10px;
81  border-radius: 4px;
82  margin-top: 20px;
83}

1# Dans un terminal, démarrez le serveur backend
2node server.js
3
4# Dans un autre terminal, démarrez l'application frontend
5npm start

1// Ajoutez ces fonctions à votre composant VideoMeeting
2
3// Fonction pour démarrer le partage d'écran
4const startScreenShare = async () => {
5  if (!audioVideo) return;
6  
7  try {
8    // Demander l'accès au flux d'écran
9    const screenStream = await navigator.mediaDevices.getDisplayMedia({
10      video: true
11    });
12    
13    // Récupérer la piste vidéo du flux d'écran
14    const screenTrack = screenStream.getVideoTracks()[0];
15    
16    // Arrêter le partage d'écran lorsque l'utilisateur termine
17    screenTrack.addEventListener('ended', () => {
18      stopScreenShare();
19    });
20    
21    // Démarrer le partage d'écran via Chime SDK
22    await audioVideo.startContentShare(screenStream);
23    setIsScreenSharing(true);
24  } catch (err) {
25    console.error('Error starting screen share:', err);
26  }
27};
28
29// Fonction pour arrêter le partage d'écran
30const stopScreenShare = async () => {
31  if (!audioVideo) return;
32  
33  try {
34    await audioVideo.stopContentShare();
35    setIsScreenSharing(false);
36  } catch (err) {
37    console.error('Error stopping screen share:', err);
38  }
39};
40
41// Ajouter cet observateur dans setupVideoTileObservers
42audioVideo.addContentShareObserver({
43  contentShareDidStart: () => {
44    console.log('Content share started');
45  },
46  contentShareDidStop: () => {
47    console.log('Content share stopped');
48  }
49});
50
51// Puis ajouter un bouton dans l'interface
52<button onClick={isScreenSharing ? stopScreenShare : startScreenShare}>
53  {isScreenSharing ? 'Arrêter le partage' : 'Partager l\'écran'}
54</button>

1// Ajouter ces états et fonctions à votre composant VideoMeeting
2const [messages, setMessages] = useState([]);
3const [messageInput, setMessageInput] = useState('');
4
5// Configurer la gestion des messages de données
6const setupDataMessageObservers = (av) => {
7  // S'abonner au canal de chat (topic: 'chat')
8  av.realtimeSubscribeToReceiveDataMessage('chat', (dataMessage) => {
9    const messageInfo = {
10      senderId: dataMessage.senderAttendeeId,
11      timestamp: new Date(dataMessage.timestampMs),
12      text: dataMessage.text()
13    };
14    
15    setMessages(prev => [...prev, messageInfo]);
16  });
17};
18
19// Fonction pour envoyer un message
20const sendMessage = () => {
21  if (!messageInput.trim() || !audioVideo) return;
22  
23  // Créer un encodeur de texte
24  const textEncoder = new TextEncoder();
25  // Convertir le message en tableau d'octets
26  const messageData = textEncoder.encode(messageInput);
27  
28  // Envoyer le message sur le canal 'chat'
29  audioVideo.realtimeSendDataMessage('chat', messageData);
30  
31  // Effacer l'input
32  setMessageInput('');
33};
34
35// Ajouter cet appel dans la fonction joinMeeting après avoir configuré les autres observateurs
36setupDataMessageObservers(av);
37
38// Puis ajouter ce composant d'interface à votre composant de réunion
39<div className="chat-container">
40  <h3>Chat</h3>
41  <div className="messages-container">
42    {messages.map((msg, index) => (
43      <div key={index} className="message">
44        <span className="sender">{msg.senderId === attendeeId ? 'Vous' : `Participant ${msg.senderId.substring(0, 5)}`}</span>
45        <span className="timestamp">{msg.timestamp.toLocaleTimeString()}</span>
46        <p className="message-text">{msg.text}</p>
47      </div>
48    ))}
49  </div>
50  <div className="message-input">
51    <input
52      type="text"
53      value={messageInput}
54      onChange={(e) => setMessageInput(e.target.value)}
55      placeholder="Tapez votre message..."
56      onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
57    />
58    <button onClick={sendMessage}>Envoyer</button>
59  </div>
60</div>

1// Ajouter ces états et fonctions à votre composant VideoMeeting
2const [polls, setPolls] = useState([]);
3const [showPollCreator, setShowPollCreator] = useState(false);
4const [pollQuestion, setPollQuestion] = useState('');
5const [pollOptions, setPollOptions] = useState(['', '']);
6
7// Configuration pour les messages de sondage
8const setupPollObservers = (av) => {
9  // S'abonner au canal 'poll'
10  av.realtimeSubscribeToReceiveDataMessage('poll', (dataMessage) => {
11    try {
12      const pollData = JSON.parse(dataMessage.text());
13      
14      if (pollData.type === 'new_poll') {
15        // Nouvel sondage
16        setPolls(prev => [...prev, {
17          id: pollData.pollId,
18          question: pollData.question,
19          options: pollData.options,
20          votes: pollData.options.map(() => 0),
21          createdBy: dataMessage.senderAttendeeId,
22          myVote: null
23        }]);
24      } else if (pollData.type === 'vote') {
25        // Vote pour un sondage existant
26        setPolls(prev => prev.map(poll => {
27          if (poll.id === pollData.pollId) {
28            const newVotes = [...poll.votes];
29            newVotes[pollData.optionIndex] += 1;
30            return { ...poll, votes: newVotes };
31          }
32          return poll;
33        }));
34      }
35    } catch (err) {
36      console.error('Error processing poll message:', err);
37    }
38  });
39};
40
41// Fonction pour créer un nouveau sondage
42const createPoll = () => {
43  if (!pollQuestion.trim() || !audioVideo) return;
44  
45  // Filtrer les options vides
46  const validOptions = pollOptions.filter(option => option.trim() !== '');
47  if (validOptions.length < 2) return;
48  
49  const pollId = `poll-${Date.now()}`;
50  const pollData = {
51    type: 'new_poll',
52    pollId,
53    question: pollQuestion,
54    options: validOptions
55  };
56  
57  // Envoyer le sondage à tous les participants
58  const textEncoder = new TextEncoder();
59  const messageData = textEncoder.encode(JSON.stringify(pollData));
60  audioVideo.realtimeSendDataMessage('poll', messageData);
61  
62  // Réinitialiser le créateur de sondage
63  setPollQuestion('');
64  setPollOptions(['', '']);
65  setShowPollCreator(false);
66};
67
68// Fonction pour voter à un sondage
69const votePoll = (pollId, optionIndex) => {
70  if (!audioVideo) return;
71  
72  // Enregistrer le vote localement d'abord
73  setPolls(prev => prev.map(poll => {
74    if (poll.id === pollId) {
75      return { ...poll, myVote: optionIndex };
76    }
77    return poll;
78  }));
79  
80  // Envoyer le vote à tous les participants
81  const voteData = {
82    type: 'vote',
83    pollId,
84    optionIndex
85  };
86  
87  const textEncoder = new TextEncoder();
88  const messageData = textEncoder.encode(JSON.stringify(voteData));
89  audioVideo.realtimeSendDataMessage('poll', messageData);
90};
91
92// Fonction pour ajouter une option de sondage
93const addPollOption = () => {
94  setPollOptions([...pollOptions, '']);
95};
96
97// Ajouter cet appel dans la fonction joinMeeting après avoir configuré les autres observateurs
98setupPollObservers(av);
99
100// Puis ajouter ces composants d'interface
101<div className="poll-container">
102  <h3>Sondages</h3>
103  
104  {/* Liste des sondages actifs */}
105  {polls.map((poll, index) => (
106    <div key={index} className="poll">
107      <h4>{poll.question}</h4>
108      <div className="poll-options">
109        {poll.options.map((option, optIndex) => (
110          <div key={optIndex} className="poll-option">
111            <button 
112              onClick={() => votePoll(poll.id, optIndex)}
113              disabled={poll.myVote !== null}
114              className={poll.myVote === optIndex ? 'selected' : ''}
115            >
116              {option}
117            </button>
118            <div className="poll-result">
119              <div 
120                className="poll-bar" 
121                style={{ 
122                  width: `${poll.votes.reduce((a, b) => a + b, 0) > 0 ? 
123                    (poll.votes[optIndex] / poll.votes.reduce((a, b) => a + b, 0) * 100) : 0}%` 
124                }}
125              ></div>
126              <span>{poll.votes[optIndex]} votes</span>
127            </div>
128          </div>
129        ))}
130      </div>
131    </div>
132  ))}
133  
134  {/* Créateur de sondage */}
135  {showPollCreator ? (
136    <div className="poll-creator">
137      <h4>Créer un nouveau sondage</h4>
138      <input
139        type="text"
140        placeholder="Question"
141        value={pollQuestion}
142        onChange={(e) => setPollQuestion(e.target.value)}
143      />
144      {pollOptions.map((option, index) => (
145        <input
146          key={index}
147          type="text"
148          placeholder={`Option ${index + 1}`}
149          value={option}
150          onChange={(e) => {
151            const newOptions = [...pollOptions];
152            newOptions[index] = e.target.value;
153            setPollOptions(newOptions);
154          }}
155        />
156      ))}
157      <button onClick={addPollOption}>+ Ajouter une option</button>
158      <div className="poll-actions">
159        <button onClick={() => setShowPollCreator(false)}>Annuler</button>
160        <button onClick={createPoll}>Créer le sondage</button>
161      </div>
162    </div>
163  ) : (
164    <button onClick={() => setShowPollCreator(true)}>Créer un sondage</button>
165  )}
166</div>

1// Exemple de test de périphériques avant la réunion
2const testAudioVideoDevices = async () => {
3  try {
4    // Créer un contrôleur de périphériques
5    const logger = new ConsoleLogger('DeviceTest', LogLevel.INFO);
6    const deviceController = new DefaultDeviceController(logger);
7    
8    // Liste des périphériques audio d'entrée (microphones)
9    const audioInputDevices = await deviceController.listAudioInputDevices();
10    console.log('Microphones disponibles:', audioInputDevices);
11    
12    // Liste des périphériques audio de sortie (haut-parleurs)
13    const audioOutputDevices = await deviceController.listAudioOutputDevices();
14    console.log('Haut-parleurs disponibles:', audioOutputDevices);
15    
16    // Liste des périphériques vidéo (caméras)
17    const videoInputDevices = await deviceController.listVideoInputDevices();
18    console.log('Caméras disponibles:', videoInputDevices);
19    
20    // Tester l'accès au microphone
21    if (audioInputDevices.length > 0) {
22      await deviceController.startAudioInput(audioInputDevices[0].deviceId);
23      console.log('Microphone connecté avec succès');
24      
25      // Créer un analyseur audio pour visualiser le niveau sonore
26      const audioAnalyserNode = deviceController.createAnalyserNodeForAudioInput();
27      // Utiliser audioAnalyserNode pour créer un indicateur de niveau sonore
28    }
29    
30    // Tester l'accès à la caméra
31    if (videoInputDevices.length > 0) {
32      await deviceController.startVideoInput(videoInputDevices[0].deviceId);
33      console.log('Caméra connectée avec succès');
34      
35      // Prévisualiser la vidéo
36      const videoElement = document.getElementById('video-preview');
37      deviceController.bindVideoElement(videoElement);
38    }
39    
40    return {
41      audioInputDevices,
42      audioOutputDevices,
43      videoInputDevices
44    };
45  } catch (err) {
46    console.error('Erreur lors du test des périphériques:', err);
47    throw err;
48  }
49};