Реализация видеочата в режиме реального времени с использованием веб-сокетов HTML5 - PullRequest
40 голосов
/ 19 ноября 2010

Кто-нибудь знает, как реализовать передачу голоса / видео через IP в веб-приложении с использованием веб-сокетов HTML5?

Было бы хорошо, если бы я мог реализовать это с помощью PHP или Python, поскольку я (к сожалению) не знаю ни одногодругой язык программирования на данный момент.

Подойдет хороший учебник, а также уже готовое решение, за которое я должен заплатить.

Обновление 1:
Добавлено видео, поскольку оно связано не только с аудио / voip.

Update2:
Первое приложение для видеоконференций HTML5 уже создано.Смотрите мой собственный ответ

Ответы [ 5 ]

27 голосов
/ 19 ноября 2010

Если вы хотите использовать только HTML5, вам потребуется браузер, реализующий черновик HTML Media Capture (доступно здесь ), чтобы получить доступ к необработанным данным с микрофона.

Когда у вас есть эти данные, вам нужно отправить их по сети.Websockets - это вариант HTML5, позволяющий выполнять достаточно быстрые обходы с сервером (отправляя локальные аудиоданные и получая удаленные аудиоданные одновременно)

Поскольку вы упоминаете python, я бы порекомендовал посмотреть вокруг витая реализация веб-сокетов.

Вы можете сделать так, чтобы все ваши клиенты "регистрировались" на сервере веб-сокетов с помощью callerID, поэтому сервер знает, где найти данный идентификатор вызывающего абонента.

Тогда вашсерверу понадобится API-интерфейс «пригласить», где вызывающий абонент «приглашает» вызывающего абонента 2.

Как только вызов настроен, и каждый клиент начинает отправлять свои аудиоданные, сервер сможет отправлять эти аудиоданные другой стороне.

После получения аудиоданных браузер должен будет воспроизвести эти аудиоданные на динамиках, возможно, используя аудиотег HTML5.

Для этого вас могут заставить использовать «трюк»: вместо того, чтобы сервер веб-сокетов пересылал необработанные аудиоданные клиенту, вам может потребоваться смоделировать 2 «бесконечных» файла:

  1. caller1.wav: звук, записанный на микрофон caller1
  2. caller2.wav: звук, записанный на микрофон caller2

браузер caller1 добавит caller2.wav в аудио.Атрибут src после установки вызова (caller1 будет уведомлен об этом событии через websocket), и, надеюсь, если сервер python добавит необработанные аудиоданные в caller2.wav при получении, он начнет воспроизводиться.

Это звучит как крутой прототип, который вы собираетесь взломать!

Удачи в вашем путешествии,

Джером Вагнер

7 голосов
/ 21 ноября 2010

Похоже, Эрикссон создал первое приложение для видеоконференций HTML5.

Техника, которую они использовали:

  • Реализован элемент устройства и Stream API (GUI элемента устройства в настоящее время написан на JavaScript / CSS)
  • Добавлен MediaStreamManager для сопоставления URL-адресов потоков с соответствующим конвейером в медиа-бэкенде
  • Добавлен MediaStreamTransceiver для управления соответствующей обработкой и транспортировкой мультимедиа
  • Добавлена ​​поддержка двоичных данных в протоколе WebSocket

См .: labs.ericsson.com :


Видео на YouTube: Помимо HTML5: демонстрация разговорного голоса и видео | Эрикссон Лабс

К сожалению, Ericsson не хочет делиться device_dialog.js (пока).

3 голосов
/ 03 мая 2012

WebRTC может быть ответом: http://www.webrtc.org/running-the-demos (в настоящее время только Chrome Canary с включенным флагом MediaStream)

См. Демонстрацию: https://apprtc.appspot.com (убедитесь, что высмотреть в соответствующем браузере) и код http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/


Причина, по которой я пишу: я получил действительно дешевый планшет на Android и не могу подключиться к Skype, Vtok или Google Voice за пределами США.,Мне нужно найти решение на основе HTML5, так как я могу запустить Opera Mobile 12 и получить http://html5demos.com/, работающий правильно

1 голос
/ 20 сентября 2012

@ работа / должен быть быстрым

Проверьте javaScript getUserMedia (CanIUse) - API (W3)

0 голосов
/ 08 июня 2013

webrtc теперь ответ.

для стека node.js - вы можете посмотреть на http://www.easyrtc.com/. Обратите внимание, что в IE еще не встроена поддержка API, которые заставляют работать webrtc.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...