Создание главной страницы авторизации (landing page) BigBlueButton 2.0b / Habr

Здравствуйте, в этой статье я вкратце расскажу, как создать главную страницу с авторизацией для сервера видеоконференций BigBlueButton версии 2.0b.

Установка самого сервера не должна вызвать каких-либо серьезных проблем и осуществляется она по инструкции с официального сайта.

Обязательно установите набор демо-страничек – из них мы будем создавать главную страницу сайта.

После установки демо – они появятся на вашем сервере по пути /var/lib/tomcat7/webapps/demo
Среди них есть файл demo3.jsp – именно он подходит для изменения, так как в нем реализован функционал авторизации пользователя по паролю, при чем пароль присвоен не пользователю, а видеоконференции.

Для того, чтобы было удобно работать со стартовой страницей мы решили разместить ее в отдельной папке в корне сервера – назвали ее site.
По умолчанию корневая директория BBB — /var/www/bigbluebutton-default/.
Это указано в конфигурационном файле веб-сервера nginx/etc/nginx/sites-enabled/bigbluebutton.

В директории /var/www/bigbluebutton-default/ есть файл index.html, просмотрев его мы увидим такой код:

<form name="form1" method="GET" onsubmit="return checkform(this);" action="/demo/demo1.jsp">
    <input type="text" id="username" required="" name="username" placeholder="Enter Your Name" size="29" class="field input-default" autofocus>
     <input type="submit" value="Join" class="submit_btn button success large"><br>
     <input type="hidden" name="action" value="create">
     </form>

Из него следует, что для создания конференции используется файл /demo/demo1.jsp, которому передаются параметры имя конференции и имя пользователя.

В папке site создадим две папки – bbb и webapps.
Папку bbb будем использовать для начальной страницы, картинок, иконок и служебных файлов батона – попросу скопируем в нее содержимое папки — /var/www/bigbluebutton-default/
Далее скопируем в папку webapps из каталога /var/lib/tomcat7/webapps/demo следующие файлы и папки:

Папки META-INF и WEB-INF
demo3.jsp
bbb_api.jsp, bbb_api_conf.jsp, bbb_jopenid.jsp, error.jsp

Отредактируем файл /site/bbb/index.html следующим образом:

<!doctype html>
<html><head>
<meta http-equiv="Refresh" content="0;url=/index.jsp" />
</head></html>

В результате получим, что он будет ссылаться на index.jsp – это файл который и будет стартовой страницей нашего батона – это отредактированный demo3.jsp или же любой другой решать вам.

Приведу пример нашего файла index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
%><!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Сервер видеоконференций xxxxxxxxx</title>
<link href="main.css" rel="stylesheet" />
</head><body>

<div><div>

<%@ include file="bbb_api.jsp"%>

<%
// ------------------------------------------------------------------------------- //

HashMap<String, HashMap> allMeetings = new HashMap<String, HashMap>();
HashMap<String, String> meeting;

String welcome = "<br>Вы участвуете в видеоконференции <b>%%CONFNAME%%</b>!<br><br>Наш официальный сайт <a href=\"event:http://www.xxxxxxxxx.ru\"><u>www.xxxxxxxxx.ru </u></a>.<br><br> <b>Для того, чтобы отключить Ваш микрофон, нажмите на пиктограмму микрофона в левом верхнем углу экрана.</b>";

meeting = new HashMap<String, String>();
allMeetings.put("Refghgfh", meeting);
	meeting.put("welcomeMsg", 	welcome);
	meeting.put("moderatorPW", 	"0000");
	meeting.put("viewerPW", 	"0000");
	meeting.put("voiceBridge", 	"72013");
	meeting.put("logoutURL", 	"/index.jsp");


meeting = new HashMap<String, String>();
allMeetings.put("Conference", meeting);
	meeting.put("welcomeMsg", 	welcome);
	meeting.put("moderatorPW", 	"0000");
	meeting.put("viewerPW", 	"0000");
	meeting.put("voiceBridge", 	"72213");
	meeting.put("logoutURL", 	"/index.jsp");


meeting = null;

Iterator<String> meetingIterator = new TreeSet<String>(allMeetings.keySet()).iterator();

// ------------------------------------------------------------------------------- //
if (request.getParameterMap().isEmpty()) {
// ------------------------------------------------------------------------------- //
%>

<h2>Зарегистрируйтесь и выберите конференцию для участия</h2>
<form method="get">
<table>
<tbody>
<tr>
	<td>Организация_Фамилия Имя:</td>
	<td><input type="text" autofocus required name="username" /></td>
</tr><tr>
	<td>Пароль:</td>
	<td><input type="password" required name="password" /></td>
</tr><tr>
	<td>Конференция:</td>
	<td><select name="meetingID"><%
String key;
while (meetingIterator.hasNext()) {
	key = meetingIterator.next();
	out.println("<option value=\"" + key + "\">" + key + "</option>");
}
%></select></td>
</tr><tr>
	<td> </td>
	<td><label style="visibility:hidden;"><input type="checkbox" checked name="record" id="record" /></label>
	       
	<input type="submit" value="Войти" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="action" value="create" />
</form>
<div id="cprt"> 1999—2014 xxxxxxxxx</div>

<%
// ------------------------------------------------------------------------------- //
} else if (request.getParameter("action").equals("create")) {
// ------------------------------------------------------------------------------- //

	String username = request.getParameter("username");
	String meetingID = request.getParameter("meetingID");
	String password = request.getParameter("password");
	String record = request.getParameter("record");

	meeting = allMeetings.get( meetingID );

	String welcomeMsg = meeting.get( "welcomeMsg" );
	String logoutURL = meeting.get( "logoutURL" );
	Integer voiceBridge = Integer.parseInt( meeting.get( "voiceBridge" ).trim() );

	String viewerPW = meeting.get( "viewerPW" );
	String moderatorPW = meeting.get( "moderatorPW" );

	// Check if we have a valid password

	if ( ! password.equals(viewerPW) && ! password.equals(moderatorPW) ) {
%><div class="error">Ошибка ввода пароля! Пожалуйста, <a href="javascript:history.go(-1)">попробуйте еще раз</a>.</div><%
		return;
	}

	// Looks good, let's create the meeting

	String meeting_ID = createMeeting( meetingID, welcomeMsg, moderatorPW, "OK", viewerPW, voiceBridge, logoutURL, record );

	// Check if we have an error.

	if( meeting_ID.startsWith("Error ") ) {
%><div class="error">Error: createMeeting() failed<br><%=meeting_ID%></div><%
		return;
	}

String joinURL = getJoinMeetingURL(username, meeting_ID, password, null);

%><script> window.location.href="<%=joinURL%>"; </script><%

// ------------------------------------------------------------------------------- //
}
// ------------------------------------------------------------------------------- //
%>

</div></div>

</body></html>

В следующей строке данного файла:

String meeting_ID = createMeeting( meetingID, welcomeMsg, moderatorPW, "OK", viewerPW, voiceBridge, logoutURL, record );

мы передаем параметры видеоконференции и от стандартной строки из demo3.jsp она отличается параметром record. Он необходим, чтобы у вас заработала возможность записи видеоконференции.

так как, наш index.jsp использует bbb_api.jsp придется отредактировать и его.

Для этого отредактировать строку:

public String createMeeting(String meetingID, String welcome, String moderatorPassword, String moderatorWelcomeMsg, String viewerPassword, Integer voiceBridge, String logoutURL, String record)

добавив в нее String record

Еще нужно отредактировать следующую секцию этого фала таким образом:

String create_parameters = "name=" + urlEncode(meetingID)
		+ "&meetingID=" + urlEncode(meetingID) + welcome_param
		+ attendee_password_param + moderator_password_param
		+ moderatorWelcomeMsg_param + voice_bridge_param + logoutURL_param;
if (record.equals("on")) {
      Map<String,String> metadata=new HashMap<String,String>();
      metadata.put("title", meetingID);
      create_parameters += "&record=true" + getMetaData( metadata );
       }

Здесь добавлена конструкция if.

Сами файлы я прикреплю к данной статье, сможете сравнить исходники с ними.
Также для просмотра созданных видеозаписей создали файл records.jsp, его также сможете скачать.

Теперь необходимо подправить конфиги nginx для того, чтобы все корректно заработало.
В конфигурационном файле nginx/etc/nginx/sites-enabled/bigbluebutton закомментируем секцию BigBluebutton landing page и создадим в директории /etc/bigbluebutton/nginx конфигурационный файл bbb.nginx следующего содержания:

   location / {
           root /site/bbb;
           index index.html index.htm index.jsp;
#           expires 1s;
       }

       location ~ \.jsp$ {
           proxy_pass         http://127.0.0.1:8080;
           proxy_redirect     default;
           proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;

        # Allow 30M uploaded presentation document.
           client_max_body_size       30m;
           client_body_buffer_size    128k;

           proxy_connect_timeout      90;
           proxy_send_timeout         90;
           proxy_read_timeout         90;

           proxy_buffer_size          4k;
           proxy_buffers              4 32k;
           proxy_busy_buffers_size    64k;
           proxy_temp_file_write_size 64k;

           include    fastcgi_params;
       }

Здесь мы прописали нашу корневую директорию /site/bbb

Теперь необходимо дать права пользователю www-data на директорию site следующей командой
chowm -r www-data /site

Кроме этого необходимо чтобы tomcat обнаружил корневую директорию, для этого поступим следующем образом — переименуем корневую директорию tomcat, которая находится по адресу /var/lib/tomcat7/webapps/ROOT

cd /var/lib/tomcat7/webapps

mv ROOT _ROOT

И создадим символическую с именем ROOT на нашу папку /site/webapps:
ln -s /site/webapps /var/lib/tomcat7/webapps/ROOT
Теперь можно перезагрузить сервер и заходить по адресу your_ip_or_host.
Еще советую удалить демки с вашего сервера — apt-get purge bbb-demo

Вот ссылка на файлы https://yadi.sk/d/GVJUPJUp3RY7un

P.S.
ЕЩЕ ДОПОЛНЮ
В файле bbb_api_conf.jsp
необходимо изменить string salt
взять его можно из команды
bbb-conf --salt
а также необходимо проверить переменную bigbluebutton url