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

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

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

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

1 ответов


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

подробное описание шагов:

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

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

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

“Wowza Media Server is started!”

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

http://localhost:1935/

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

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

если это так - мы закончили с первым шагом.


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

следующий шаг-на самом деле поток некоторого контента и [Wowza-root] имеет все необходимое для этого.

  • перейти в каталог [позитив-корень]\примеры
  • RightMouse нажмите на кнопку installall.летучая мышь!--11--> и выберите "Запуск от имени администратора", чтобы установить все необходимые игроки.
  • Enter dir [Wowza-root]\examples\VideoOnDemandStreaming\FlashHTTPPlayer* * и нажмите на * * плеер.HTML-код запустить этот файл в вашем браузере. нажать Connect. шаг: вы должны увидеть смешной фильм про кролика. Вы можете подать этот фильм здесь:[Wowza-root]\content\sample.mp4

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

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

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

"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 файлы\Java\jdk1.6.0_26\bin\java" - правильный путь к java
  • screenshare.jar - какую банку мы должны использовать (можно найти в unzipped папка.)
  • org.redfire.экран.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 (обязательно).

  • Enter [позитив-корень]\приложения и создайте папку с имя screenshare там (Примечание-это точно такое же имя, как имя приложения в нашем SWING-app)
  • Enter [wowza_root]\conf и снова создать папку screenshare.
  • на [wowza_root]\conf вы можете найти файл с именем приложение.в XML. Скопируйте этот файл в [wowza_root]\conf\screenshare папку, которую вы только что создали.
  • изменить некоторые свойства в приложение.в XML. Установите следующие значения:

    StreamType=live 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* * и запустить * * плеер.HTML-код. Обратите внимание, что в обоих параметрах ниже имя приложения и имя потока используются, что точно так же, как мы настроили в нашем SWING-ПРИЛОЖЕНИЕ.

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

и нажимаем кнопку "Connect".

шаг: вы увидите ваш общий рабочий стол! Итак, задача выполнена – по крайней мере, ее начальная фаза.


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

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

7. Переход к dynamic stream-name вместо static (необязательно)

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

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

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>

вот и все. Надеюсь, это сэкономит кому-то время. Хороший удачи!--12-->