web-dev-qa-db-fra.com

Implémentation du chat vidéo en temps réel sur le Web à l'aide de sockets Web HTML5

Quelqu'un sait-il comment implémenter la voix/vidéo sur IP dans une application Web à l'aide de sockets Web HTML5?

Ce serait bien si je pouvais implémenter cela avec PHP ou Python car je ne connais (malheureusement) aucun autre langage de programmation pour le moment).

Un bon tutoriel fera l'affaire, ainsi qu'une solution déjà construite que je dois payer.

pdate1:
Vidéo ajoutée car elle n'est pas uniquement liée à l'audio/voip.

pdate2:
La première application de vidéoconférence HTML5 est déjà créée. Voir ma propre réponse

40
Wouter Dorgelo

Si vous souhaitez utiliser uniquement HTML5, vous aurez besoin d'un navigateur implémentant le HTML Media Capture draft (disponible ici ) dans afin d'accéder aux données brutes du microphone.

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

Puisque vous mentionnez python, je recommanderais de regarder autour de implémentation torsadée des websockets.

Vous pouvez demander à tous vos clients de "s'inscrire" sur le serveur Websocket avec un ID appelant, afin que le serveur sache où trouver un ID appelant donné.

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

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

Lors de la réception de données audio, le navigateur devra lire ces données audio sur les haut-parleurs, probablement à l'aide de l'étiquette audio HTML5.

Pour ce faire, vous devrez peut-être utiliser une "astuce": au lieu d'avoir le serveur websocket transférer les données audio brutes au client, vous devrez peut-être simuler 2 fichiers "infinis":

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

le navigateur caller1 ajouterait caller2.wav dans l'attribut audio.src une fois l'appel configuré (caller1 serait informé de cet événement via websocket) et, espérons-le, si le serveur python ajoute les données audio brutes à l'appelant2.wav tel qu'il le reçoit, il commence à jouer.

Cela ressemble à un prototype cool que vous allez pirater!

Bonne chance pour votre voyage,

Jerome Wagner

27
Jerome WAGNER

On dirait qu'Ericsson a créé la première application de vidéoconférence HTML5.

La technique utilisée:

  • Implémentation de l'élément de périphérique et de l'API Stream (l'interface graphique de l'élément de périphérique est actuellement écrite en JavaScript/CSS)
  • Ajout de MediaStreamManager pour mapper les URL de flux au pipeline correspondant dans le backend multimé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: Au-delà de HTML5: démonstration vocale et vidéo conversationnelle | Ericsson Labs

Malheureusement, Ericsson ne veut pas partager device_dialog.js (encore).

7
Wouter Dorgelo

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

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


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

3
Mars Robertson

@ travail/dois être rapide

Consultez le javaScript getUserMedia (CanIUse) - API (W3)

1
Cody

webrtc est la réponse maintenant.

pour la pile node.js - vous pouvez regarder http://www.easyrtc.com/ . Notez que IE n'a pas encore pris en charge les API qui font fonctionner webrtc.

0
saurshaz