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

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

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

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

Хорошо, наш сервер запущен и работает (WOWZA IS RUNNING). Теперь пришло время запустить приложение, которое будет делать скриншоты нашего рабочего стола. К счастью, это уже написано Dele Olajide, благослови бог этого человека. Проверьте эту ссылку для получения подробной информации ( 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
  • Screenhare.jar - какой JAR мы должны использовать (можно найти в разархивированной папке).
  • org.redfire.screen.ScreenShare - основной класс
  • localhost - хозяин Wowza
  • ScreenShare - имя приложения (важно)
  • 1935 - порт Wowza
  • ss1 - имя потока (важно)
  • flashsv1 - кодировка для вашего видеопотока.

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

Шаг проверки: вы должны увидеть экран приложения. Огромный успех! Но если вы нажмете кнопку "Начать совместное использование", вы получите сообщение об ошибке в консоли, что папка приложения ScreenShare отсутствует в 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 (обязательно).

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

  • Измените некоторые свойства в Application.xml. Установите эти значения:

    StreamType = live HTTPStreamers = cupertinostreaming, плавный поток,sanjosestreaming LiveStreamPacketizers=cupertinostreamingpacketizer, плавный поток packetizer, 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. Запуск flash-плеера в сети (опционально) Отлично! Теперь у нас есть рабочее решение, только одна вещь, которая еще не сделана - мы запускаем проигрыватель из каталога Windows, и он не доступен для других людей в Интернете. Итак - в чем проблема, давайте развернем один.

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

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

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

Если вы посмотрите на screenhare.jar, то обнаружите, что этот 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-странице со встроенным кодом из п.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>

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

Источник
Другие вопросы по тегам