Как реализовать совместное использование экранов для веб-приложений?

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

Начальная задача: у нас есть веб-приложение. Нам нужно найти способ для пользователя поделиться своим экраном с другими пользователями. Реализовано на: Win 7 x64, Java, Wowza-3.5.0.

Как мы можем достичь этого?

Ответы

Ответ 1

Весь процесс в нескольких словах: Через ссылку на веб-странице с помощью JavaWebStart (jlnp) пользователь запускает Swing-приложение, написанное на Java, которое делает снимок экрана на рабочем столе каждую секунду. После этого он кодирует его как видеопоток и отправляет этот поток на Wowza-сервер. Wowza может перезаписать этот поток любому количеству пользователей, которые могут получить доступ к потоку через flash-плеер.

Подробные инструкции:

1. Установите Wowza (обязательно).

Далее я буду ссылаться на каталог установки wowza как [wowza-root]

Шаг проверки: после завершения установки - Запуск - Все приложения - Wowza Media Server 3.5.0 - Запуск Wowza. Когда сервер будет запущен, и вы увидите сообщение

"Wowza Media Server is started!"

откройте браузер и введите:

http://localhost:1935/

Вы должны увидеть что-то вроде этого:

Wowza Media Server 3 Developer Edition (Expires: авг 03, 2013) 3.5.0 build2989

Если это так, мы делаем первый шаг.

2. Запустить пример фильма на Wowza (необязательно).

Следующий шаг - фактически передать некоторый контент, а [wowza-root] имеет все необходимое для него.

  • Введите каталог [wowza-root]\examples
  • Щелкните правой кнопкой мыши на installall.bat и выберите "Запуск как администратор", чтобы установить всех необходимых игроков.
  • Введите dir [wowza-root]\examples\VideoOnDemandStreaming\FlashHTTPPlayer ** и нажмите на ** player.html, чтобы запустить этот файл в своем браузере. Нажмите connect. Проверка шага: вы должны увидеть забавный фильм о кролике. Вы можете записать этот фильм здесь: [wowza-root]\content\sample.mp4

3. SWING-приложение для совместного использования вашего рабочего стола (обязательно).

Хорошо, наш сервер работает и работает (WOWZA IS RUNNING). Теперь пришло время запустить приложение, которое сделает скриншоты нашего рабочего стола. К счастью, это уже написано Деле Оладжиде, бог благословит этого человека. Проверьте эту ссылку для получения дополнительной информации (http://code.google.com/p/red5-screenshare/), и это для загрузки (http://code.google.com/p/red5-screenshare/downloads/list) - вам нужно скачать файл screenshare.zip.

Разархивируйте его в любой каталог. Мы начнем с запуска этого приложения из bat файла. В распакованном каталоге уже есть два файла bat: do_run1.bat и do_run2.bat. Я просто скопировал один из этих файлов и назвал его do_run_my.bat, и его содержимое должно выглядеть следующим образом:

"C:\Program Files\Java\jdk1.6.0_26\bin\java" -classpath screenshare.jar org.redfire.screen.ScreenShare  localhost screenshare 1935 ss1 flashsv1
pause

где

  • "C:\Program Files\Java\jdk1.6.0_26\bin\java" - правильный путь к вашему java
  • screenshare.jar - какой jar мы должны использовать (можно найти в распакованной папке).
  • org.redfire.screen.ScreenShare - основной класс
  • localhost - хост Wowza
  • screenshare - имя приложения (важно)
  • 1935 - порт Вовца
  • ss1 - имя потока (важно)
  • flashsv1 - кодирование для вашего видеопотока.

Единственное, что вам нужно изменить - это установить правильный путь к java. Вы можете запустить его сейчас!

Проверка шага: вы должны увидеть экран приложения. Большой успех! Но если вы нажмете кнопку "Начать совместное использование", вы получите сообщение об ошибке в консоли, в папке Wowza отсутствует папка с программным обеспечением для экранов. Это нормально и означает, что теперь мы на правильном пути. Выход из SWING-приложения.

[ERROR] [New I/O client worker #2-1] org.redfire.screen.ScreenClientHandler - closing channel, server resonded with error: [0 COMMAND_AMF0 c3 #0 t0 (0) s207] name: _error, transactionId: 1, object: null, args: [{level=error, code=NetConnection.Connect.Rejected, description=Connection failed: Application folder ([install-location]/applications/screenshare) is missing., clientid=8.87236417E8}]

4. Настройте WOWZA для приема потока из нашего SWING APP (обязательно).

  • Введите [wowza-root]\applications и создайте папку с именем screenshare (обратите внимание - это то же имя, что и имя приложения в нашем SWING-приложении )
  • Введите [wowza_root]\conf и снова создайте папку screenshare.
  • В [wowza_root]\conf вы можете найти файл с именем Application.xml. Скопируйте этот файл в папку [wowza_root]\conf\screenshare, которую вы только что создали.

  • Измените некоторые свойства в Application.xml. Задайте следующие значения:

    StreamType = жить HTTPStreamers = cupertinostreaming, smoothstreaming, sanjosestreaming LiveStreamPacketizers = cupertinostreamingpacketizer, smoothstreamingpacketizer, sanjosestreamingpacketizer PlayMethod = нет

  • Теперь перезапустите Wowza.

Шаг проверки: запустите SWING-APP снова через bat файл. Теперь вместо ошибки вы должны увидеть что-то вроде этого, это означает, что установлено соединение с сервером:

[INFO] [New I/O client worker #1-1] org.redfire.screen.ScreenClientHandler - onStatus code: NetStream.Publish.Start
+++ [0 VIDEO c5 #1 t166 (0) s255355]
+++ [1 VIDEO c5 #1 t1169 (1003) s116522]
+++ [1 VIDEO c5 #1 t2171 (1002) s53049]
+++ [1 VIDEO c5 #1 t3178 (1007) s53667]

5. Просмотр вашего потока (необязательно). Теперь самая приятная часть - увидеть, как все эти сотрудники работают вместе.  - Введите [wowza-root]\examples\LiveVideoStreaming\FlashRTMPPlayer ** и запустите ** player.html. Обратите внимание, что в обоих параметрах ниже используются имя приложения и имя потока, что точно так же, как мы настроили в нашем SWING-APP.

Server: rtmp://localhost/screenshare
Stream: ss1

И нажмите кнопку "Подключить".

Проверка шага. Вы увидите свой общий рабочий стол! Таким образом, задача выполнена - по крайней мере, на начальной стадии.

6. Запуск флеш-плеера в Интернете (необязательно) Большой! Теперь у нас есть рабочее решение, только одно, чего еще не сделано - мы запускаем плеер из каталога Windows, и он недоступен для других людей в Интернете. Итак - какая проблема, разрешите ее развернуть.

  • Сначала вам нужно прочитать следующее: http://www.wowza.com/forums/content.php?49
  • Далее перейдите к http://www.osmf.org/configurator/fmp/#
  • Вставьте ссылку поля "Видеопоток" в ваш поток (конечно, SWING-APP должен работать в режиме совместного доступа): rtmp://localhost: 1935/screenshare/ss1
  • Нажмите "Предварительный просмотр". Вы должны увидеть поток.
  • Теперь просто скопируйте весь код из "Preview Embed Code" на любую веб-страницу, которая фактически развернута на сервере приложений, и все. Вы можете дать ссылку на эту страницу любому пользователю, и он сможет увидеть ваш поток.

7. Переход к динамическому имени потока вместо статического (необязательно)

Как вы, вероятно, заметили, прямо сейчас наше совместное использование экрана работает, но поскольку мы поставляем имя потока через конфигурацию в наш SWING-APP, нет возможности использовать его для более одного пользователя одновременно. Я не буду подробно описывать, как с этим справиться, просто дайте короткую заметку.

Если вы отметите screenshare.jar, вы обнаружите, что этот баннер фактически содержит весь скомпилированный и исходный код SWING-приложения. Можно изменить исходное приложение и переработать первоначальное приложение в соответствии с вашими потребностями. В моем случае я просто добавил текущее время в миллисекундах к предоставленному имени потока и окне сообщения, которое показывает что-то вроде этого после нажатия кнопки "Начать поток":

Send this link to any person you want to share you screen with:
http://localhost:8080/player.htm?src=rtmp%3A%2F%2Flocalhost%3A1935%2Fscreenshare%2Fss1360243745881

Как вы видите в ссылке - я просто добавляю адрес потока в строку запроса к URL-адресу, где находится моя html-страница со встроенным кодом игрока. Также я хочу предоставить код этой страницы. Его довольно просто - с помощью javascript я извлечил параметр из строки запроса и поставил выделенный параметр, где он должен быть на моей странице html со встроенным кодом из p.6

<html>
<head></head>
<body>

<SCRIPT LANGUAGE="JavaScript">

    var myQueryString = document.location.search;

    // remove the '?' sign if exists
    if (myQueryString[0] = '?') {
        myQueryString = myQueryString.substr(1, myQueryString.length - 1);
    }


    document.write(
        '<object width="600" height="409">\n' +
            '<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" />\n' +
            '</param>\n' +
            '<param name="flashvars" value="' + myQueryString +'" />\n' +
            '</param>\n' +
            '<param name="allowFullScreen" value="true" />\n' +
            '</param>\n' +
            '<param name="allowscriptaccess" value="always" />\n' +
            '</param>\n' +
            '<embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="409" flashvars="' + myQueryString +'"></embed>\n' +
            '</object>'
    );

</SCRIPT>

</body>
</html>

Вот и все. Надеюсь, это сэкономит какое-то время кому-то. Удачи.