Реализация простого видеочата на ASP.NET MVC

Доброго времени суток, господа читатели!
В данном топике я расскажу, как можно сделать простой видео-чат на ASP.NET MVC.

Но для начала предыстория. Мы запускаем сервис видеоконсультаций с врачом через интернет. О нём обязательно будет отдельная статья, а сейчас хотим выяснить, насколько большую нагрузку смогут выдержать сервера и каналы.
Для этого мы написали небольшое веб-приложение, исходным кодами и описанием которого рад с вами поделиться. Взамен надеюсь, что вы зайдёте на тестовую страницу в благородном порыве порушить нам сервак.
Основная идея позаимствована у чатрулетки: заходишь в общий чат, выбираешь любого собеседника и общаешься по видео. Одна просьба, не переносить из чат-рулетки культуру демонстрации первичных половых признаков, так как в тесте будут участвовать хорошо знакомые мне девушки наивного возраста :-)
Исходный код проекта опубликован на codeplex.com под свободной лицензией, буду рад комментариям/замечаниям/предложениям. Демонстрационную версию можно посмотреть здесь. Будьте вежливы и не забывайте улыбаться!

Итак. В качестве протокола я выбрал RTMP как наиболее распространённый. Почему не RTMFP? Просто используя RTMFP сложно добиться устойчивого соединения между клиентами, что необходимо для оказания платных видеоконсультаций, да и серверная реализация раздачи айдишников недоступна для стабильного использования. В качестве сервера – Wowza Media Server, т.к. в отличие от бесплатного Red5 (да простят меня его сторонники) у него внятная документация с примерами, и в отличие от FMS пробный период в 30 дней и приемлемая ценовая политика. А качество работы проверим на практике, насколько я представляю, сильной разницы между всеми тремя по производительности нет. Как альтернативу мы рассматриваем erlyvideo, но подробно посмотреть и попробовать его пока возможности не было.

Пишется всё под ASP.NET MVC 4. И для реализации текстового чата и общения между клиентами используется библиотека SignalR.

Далее по пунктам.

Реализация чата.
Основное здесь – два класса ChatMessage и Chat.
Класс Chat наследован от SignalR.Hubs.Hub и реализует основные методы работы с клиентами:

// вызывается клиентом для подключения к комнате.
public void JoinRoom(string roomKey, string userName)
{
    // Сохраняем описание пользователя только если он в основном чате
    if (roomKey == C.MAIN_CHAT_GROUP)
       Store.Add(new User(Context.ConnectionId, userName));
    // Возвращаем клиенту его id
    Clients[Context.ConnectionId].OnJoinRoom(Context.ConnectionId);
    // Добавляем пользователя в комнату
    Groups.Add(Context.ConnectionId, roomKey);
    // Опопвещаем клиентов о изменении списка пользователей
    UpdateUsers();
}

// вызывается клиентом для отправки сообщения
public void Send(ChatMessage message)
{
    // Что-то делаем только если сообщение не пустое
    if (message.Content.Length > 0)
    {
       //проставляем дату отправки
       message.Date = DateTime.Now;
       // идентификатор отправителя
       message.SenderKey = Context.ConnectionId;
       // экранируем пришедший текст во избежание хулиганства
       message.Content = HttpUtility.HtmlEncode(message.Content);
       message.SenderName = HttpUtility.HtmlEncode(message.SenderName);
       // Оповещаем клиентов о новом сообщении
       Clients[message.RoomKey].OnSend(message);

       Store.SaveMessage(message);
    }
}

Store здесь – статическая коллекция пользователей, которую при желании можно легко заменить на свою реализацию.
В нашей демке она сохраняется в базу вместо статической переменной.

На клиенте создаём соответствующие методы. Для краткости я скрыл конкретную реализацию

var CHAT = {};
var OPTIONS = {};

function Start(data)
{
   // Инициализируме переменные, подключение
   OPTIONS.SenderName = data.name;
   OPTIONS.RoomKey = 'MAIN';
   CHAT = $.connection.chat;

   // Присваиваем обработчики методов, вызываемых с сервера
   CHAT.OnSend = OnSend;
   CHAT.OnJoinRoom = OnJoinRoom;
}
// Вызывается с сервера после подключения клиента
function OnJoinRoom(key) {
   OPTIONS.SenderKey = key;
}
// Вызывается с сервера для обновления списка пользователей онлайн
function OnUpdateUsers(data) {
   /* ...Обновляем пользователей, в data коллекция прокси-объектов User, по интерфейсу идентичная интерфейсу IUser */
}
// Функция для отправки сообщения, вызывает серверный Chat.Send
function Send() {
    var messageInput = $("#msg"),
       // Создаём объект, нименования полей которого соответствуют полям ChatMessage
       msg = {
           'SenderName': OPTIONS.MyName,
           'RoomKey': OPTIONS.RoomKey,
           'Content': messageInput.val()
       };
    CHAT.send(msg); // Важный момент: серверные методы в прокси-объекте начинаются с прописной буквы
    messageInput.val("");
    messageInput.focus();
}
// Метод, вызываемый с сервера для публикации сообщения
function OnSend(msg) {
   var chatContent = $(".chat_content"),
           msgClass = 'chat_message';
   /* ...Добавляем полученное сообщение на страницу,
в msg - объект, поля которого соответствуют полям ChatMessage */
}

Далее необходимо обеспечить функционал «звонков». Для этого в Chat добавляем методы, обрабатывающие начало звонка, отклонение и принятие звонка.

// Метод звонка (вызов абонента)
public void Call(string recieverKey, string senderKey, string senderName)
{
   Clients[recieverKey].OnCall(senderKey, senderName);
}

// Метод отклонения звонка
public void RejectCall(string senderKey, string recieverKey, string recieverName)
{
   Clients[senderKey].OnRejectCall(recieverKey, recieverName);
}

// Принятие звонка
public void AcceptCall(string calleePulicKey, string calleeName, string myName)
{
    string myKey = Guid.NewGuid().ToString().Replace("-", "");
    string calleeKey = Guid.NewGuid().ToString().Replace("-", "");
    string roomKey = Guid.NewGuid().ToString().Replace("-", "");

    var model = new RoomModel
                    {
                        MyPublicKey = Context.ConnectionId,
                        MyKey = myKey,
                        MyName = myName,
                        CalleePublicKey = calleePulicKey,
                        CalleeKey = calleeKey,
                        CalleeName = calleeName,
                        RoomKey = roomKey
                    };

    // Сохраняем информацию о начинающемся сеансе
    Store.SaveRoomInfo(model);
    // Рассылаем уведомления
    Clients[calleePulicKey].OnAcceptCall(false, roomKey);
    Clients[Context.ConnectionId].OnAcceptCall(true, roomKey);
}

Схема работы следующая: когда один абонент (допустим, Ангелина) хочет позвонить другому (к примеру, Пете), Ангелина вызывает метод Call и передаёт ему ключ Пети, свой ключ и своё имя. Пете мы высылаем уведомление OnCall, на клиенте его обрабатываем и отображаем сообщение о звонке от Ангелины. В случае, если Петя решит отклонить звонок, он вызывает метод RejectCall и возвращает ключ звонящего, свой ключ и своё имя. Мы отправляем Ангелине уведомление OnRejectCall, в обработчике которого отображаем Ангелине уведомление об отклонении звонка.
Если же Петя принимает звонок, он вызывает метод AcceptCall, в котором мы генерируем для обоих абонентов новые идентификаторы и ключ для комнаты личного чата. После чего отправляем обоим уведомления OnAcceptCall, передавая с ними необходимые ключи. На клиенте в обработчике уведомления перенаправляем и Петю и Ангелину на страницу личного чата:

function OnAcceptCall(isMy, roomKey) {
    document.location = '@Url.Action("Room", "Home")' + '?isMy=' + isMy + '&roomKey=' + roomKey;
}

На странице личного чата с помощью переданных ключей инициализируем флешку и текстовый чат. Для текстового чата на странице Room используем тот же объект Chat, просто не обрабатывая на клиенте события обновления списка пользователей и звонков.

Далее переходим к флешке.
Для организации общения мы должны создать поток, который будем «публиковать» на сервер и подписаться на поток, публикуемый собеседником. Потоки на сервере идентифицируются посредством ключей, передаваемых на сервер при начале публикации.
При инициализации флешки мы получаем ключи со страницы, сохраняем их в локальные переменные и запускаем таймер, который будет следить за началом и ходом сеанса связи. Работу по созданию подключения к серверу, публикации и подписке на поток осуществляют три метода:

private function Connect():void
{
      if (!isConnected && rtmpConnection == null)
      {
            // Создаём подключение
            rtmpConnection = new NetConnection();
            rtmpConnection.connect(connectStr);
           
            // Добавляем обработчик события изменения состояния подключения
            rtmpConnection.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus_rtmpConnection);
      }
      isConnected = true;
}

private function StartPublish():void
{
      // Создаём поток для публикации
      nsPublish = new NetStream(rtmpConnection);
     
      nsPublish.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus_nsPublish);
     
      // устанавливаем буфер потока в 0
      nsPublish.bufferTime = 0;
     
      // Публикуем
      nsPublish.publish(publishName);
                                      
      // Подсоединяем камеру и микрофон
      nsPublish.attachCamera(camera);
      nsPublish.attachAudio(microphone);
     
      isPublish = true;
}
private function StartSubscribe():void
{                                
      // Cоздаём поток для подписки на трансляцию собеседника
      nsSubscribe = new NetStream(rtmpConnection);
     
      // Добавляем обработчик событий потока
      nsSubscribe.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus_nsSubscribe);
     
      // Устанавливаем буфер потока в 0
      nsSubscribe.bufferTime = 0;
     
      // Устанавливаем громкость потока
      var volume:Number = sldrVolume.value / 100;
      var st:SoundTransform = new SoundTransform(volume);
      nsSubscribe.soundTransform = st;
     
      // Подключаемся к потоку
      nsSubscribe.play(subscribeName);
     
      // Подключаем к потоку камеру
      videoRemote.attachNetStream(nsSubscribe);     
     
      isSubscribe = true;
}

При срабатывании таймера проверяем, подключены ли мы к серверу и состояния потоков публикации и подписки. И в случае успеха всех проверок считаем время разговора

private function onTick_Timer(event:TimerEvent):void
{     
      if(!isConnected)//Проверяем состояние подключения
      {
            lblEndTime.text = "Подключение...";
            Connect();
            startTime = new Date();
      }
      else
      {
            if(!isPublish && needPublish)//Проверяем состояние публикации
            {
                   lblEndTime.text = "Публикация...";
                   StartPublish();
            }
           
            if(!isSubscribe)// Проверяем состояние подписки
            {
                   lblEndTime.text = "Подписка...";
                   StartSubscribe();  
            }
           
            if(isPublish && isSubscribe)// Если всё ОК, пишем время разговора
            {
                   var now:Date = new Date();
                   var toStart:TimeSpan = new TimeSpan(now.getTime() - startTime.getTime());
                   lblEndTime.text = toStart.getTotalMinutes() + ':' + toStart.getSeconds();
            }
      }
}

На этом практически всё.

Последний компонент — Медиасервер.
Wowza Media Server особых сложностей в установке и настройке не вызвал. Загружаете дистрибутив с официального сайта, ставите, открываете на машине 1935-й порт и прописываете в флешку адрес сервера. При желании можно воспользоваться любым другим сервером, поддерживающим RTMP: Red5, Adobe FlashMediaServer, erlyvideo. Клиентская реализация никак не зависит от серверной.

Рабочая версия доступна тут.
Наши цели данного тестирования:
1. Выяснить, сколько одновременно общающихся пользователей мы можем выдержать без потери качества.
2. Получить советы по более грамотной реализации
3. Возможно, найти дыры в безопасности

Благодарю всех, кто принял участие в нагрузочном тестировании!

Автор: bob_smith