40 votes

Mise en œuvre du chat vidéo en temps réel basé sur le web en utilisant les websockets HTML5

Est-ce que quelqu'un sait comment implémenter la voix/vidéo sur IP dans une application web en utilisant les websockets HTML5 ?

Ce serait bien si je pouvais implémenter cela avec PHP ou Python car je ne connais malheureusement pas d'autres langages de programmation pour le moment.

Un bon tutoriel fera l'affaire, ainsi qu'une solution déjà toute prête pour laquelle je devrai payer.

Mise à jour 1:
Ajout de la vidéo car cela ne concerne pas uniquement l'audio/la voix sur IP.

Mise à jour 2:
La première application de conférence vidéo HTML5 est déjà créée. Voir ma propre réponse

27voto

Jerome WAGNER Points 6622

Si vous souhaitez utiliser uniquement HTML5, vous aurez besoin d'un navigateur implémentant le brouillon de Capture de média HTML (disponible ici) pour accéder aux données brutes du microphone.

Une fois que vous avez ces données en main, vous devez les envoyer via le réseau. Les Websockets seraient l'option HTML5 pour avoir des allers-retours suffisamment rapides avec le serveur (envoyer des données audio locales et recevoir des données audio distantes en même temps).

Comme vous mentionnez python, je vous recommanderais de jeter un œil à l'implémentation de websockets de twisted.

Vous pouvez faire en sorte que tous vos clients se "registrent" sur le serveur websocket avec un callerID, afin que le serveur sache où trouver un callerID donné.

Ensuite, votre serveur aura besoin d'une API "invite" où le caller1 "invite" le caller2.

Une fois l'appel mis en place et que chaque client commence à envoyer ses données audio, le serveur pourra envoyer ces données audio à l'autre partie.

À la réception des données audio, le navigateur devra jouer ces données audio sur les haut-parleurs, probablement en utilisant la balise audiotag HTML5.

Pour ce faire, vous pourriez être obligé d'utiliser une "astuce" : au lieu d'avoir le serveur websocket transmettre les données audio brutes au client, vous pourriez avoir besoin de simuler 2 fichiers "infinis" :

  1. caller1.wav : son capturé sur le microphone de caller1
  2. caller2.wav : son capturé sur le microphone de caller2

Le navigateur de caller1 ajouterait caller2.wav dans l'attribut audio.src une fois l'appel mis en place (caller1 serait informé de cet événement via websocket) et espérons que si le serveur python ajoute les données audio brutes au fichier caller2.wav au fur et à mesure de leur réception, cela commencerait à jouer.

Cela semble être un prototype cool que vous allez mettre en place !

Bonne chance dans votre aventure,

Jérôme Wagner

7voto

Enrico Pallazzo Points 6860

Il semble qu'Ericsson a créé la première application de conférence vidéo HTML5.

La technique qu'ils ont utilisée:

  • Implémentation de l'élément device et de l'API Stream (l'interface utilisateur de l'élément device est actuellement écrite en JavaScript/CSS)
  • Ajout de MediaStreamManager pour mapper les URL de flux vers le pipeline correspondant dans le backend média
  • Ajout de MediaStreamTransceiver pour contrôler le traitement et le transport des médias associés
  • Ajout de la prise en charge des données binaires dans le protocole WebSocket

Voir : labs.ericsson.com:


Vidéo sur YouTube : Beyond HTML5: Démo de conversation vocale et vidéo | Ericsson Labs

Malheureusement, Ericsson ne souhaite pas partager device_dialog.js (pour l'instant).

3voto

Michal Stefanow Points 1223

WebRTC pourrait être une réponse: http://www.webrtc.org/running-the-demos (actuellement uniquement Chrome Canary avec le drapeau MediaStream activé)

Voir démo: https://apprtc.appspot.com (assurez-vous de regarder dans un navigateur approprié) et code http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/


La raison pour laquelle j'écris est... J'ai une tablette Android vraiment bon marché et je ne peux pas installer Skype ni Vtok ni Google Voice n'est disponible en dehors des États-Unis. Je dois trouver une solution basée sur HTML5 car je suis capable d'exécuter Opera Mobile 12 et http://html5demos.com/ fonctionne correctement

1voto

Cody Points 1198

@work/doit être rapide

Découvrez le JavaScript getUserMedia (CanIUse) - API (W3)

0voto

saurshaz Points 175

Webrtc est maintenant la réponse.

pour la pile node.js - vous pouvez regarder http://www.easyrtc.com/. Notez que IE n'a pas encore intégré le support pour les API qui permettent à webrtc de fonctionner.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X