Как реализовать совместное использование экранов для веб-приложения?
Пролог. Я хотел спросить, Как создать решение для совместного использования настольных экранов в интернете, но потом узнал, что таких вопросов много. И эта задача довольно сложная, чтобы ответить на нее в пару строк. Поэтому я потратил некоторое время, пытаясь найти подходящее решение. Кажется, я нашел одно – просто хочу поделиться.
основная задача: у нас есть веб-приложение. Нам нужно найти способ для пользователя поделиться своим экраном с любым другим пользователи. Реализовано на: Win 7 x64, Java, Wowza-3.5.0.
Как мы можем достичь этого?
1 ответов
весь процесс в нескольких словах: по ссылке на веб-странице с помощью JavaWebStart (jlnp) пользователь запускает Swing-приложение, написанное на Java, которое делает скриншот своего рабочего стола каждую секунду. После этого он кодирует его как видеопоток и отправляет этот поток на Wowza-сервер. Wowza может Рестрим этот поток для любого количества пользователей, которые могут получить доступ к потоку через flash-плеер.
подробное описание шагов:
1. Установить Позитив(обязательно).
- получить соответствующий установщик (в моем случае для Win) отсюда:http://www.wowza.com/pricing/installer
- получите бесплатную лицензию разработчика отсюда:http://www.wowza.com/pricing/trial (Вам будет нужно обеспечить электронную почту, ключ действительный на 180 дней будет отправлен туда).
- следуйте хорошее видео о процессе: http://www.wowza.com/forums/content.php?288-Getting-Started-(видео-учебник)
далее я буду ссылаться на каталог установки 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-->