📜 ⬆️ ⬇️

Creating the main authorization page (landing page) BigBlueButton 2.0b

Hello, in this article I will briefly describe how to create a home page with authorization for the BigBlueButton video conferencing server version 2.0b.

Installing the server itself should not cause any serious problems and is carried out according to the instructions from the official site .

Be sure to install a set of demo pages - from them we will create the main page of the site.
')
After installing the demo - they will appear on your server along the path / var / lib / tomcat7 / webapps / demo
Among them is the demo3.jsp file - it is the one that is suitable for changing, since it implements the functionality of user authentication with a password, and the password is assigned not to the user, but to a video conference.

In order to make it convenient to work with the start page, we decided to place it in a separate folder in the server root - we called it site .
The default BBB root directory is / var / www / bigbluebutton-default / .
This is specified in the nginx web server configuration file / etc / nginx / sites-enabled / bigbluebutton .

In the / var / www / bigbluebutton-default / directory there is an index.html file, after viewing it we will see the following code:

<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> 

From this it follows that to create a conference, the file /demo/demo1.jsp is used , to which the conference name and username are passed.

In the site folder, create two folders - bbb and webapps.
We will use the bbb folder for the initial page, pictures, icons and service files of the loaf - I will ask you to copy the contents of the folder to it / / var / www / bigbluebutton-default /
Next, copy the following files and folders into the webapps folder from the / var / lib / tomcat7 / webapps / demo directory:

  1. Folders META-INF and WEB-INF
  2. demo3.jsp
  3. bbb_api.jsp, bbb_api_conf.jsp, bbb_jopenid.jsp, error.jsp

Edit the /site/bbb/index.html file as follows:

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

As a result, we get that it will link to index.jsp - this is the file that will be the starting page of our loaf - it is edited demo3.jsp or whatever you decide.

I will give an example of our index.jsp file:

 <%@ 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> 

In the next line of this file:

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

we pass the video conferencing parameters and it differs from the standard string from demo3.jsp by the record parameter. It is necessary for you to have the ability to record video conferencing.

since our index.jsp uses bbb_api.jsp , we ’ll have to edit it too .

To do this, edit the line:

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

adding a String record to it

You also need to edit the following section of this file in this way:

 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 ); } 

The if construct is added here.

I will attach the files to this article, you can compare the source with them.
Also, to view the created videos, we created the records.jsp file, you can also download it.

Now you need to tweak the nginx configs in order for everything to work correctly.
In the nginx configuration file / etc / nginx / sites-enabled / bigbluebutton, we will comment out the BigBluebutton landing page section and create a bbb.nginx configuration file in the / etc / bigbluebutton / nginx directory:

  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; } 

Here we set our root directory / site / bbb

Now you need to give the www-data user rights to the site directory with the following command
chowm -r www-data /site

In addition, it is necessary for tomcat to find the root directory, for this we proceed as follows - rename the root directory tomcat, which is located at / var / lib / tomcat7 / webapps / ROOT
cd /var/lib/tomcat7/webapps
mv ROOT _ROOT

And create a symbolic with the name ROOT on our folder / site / webapps :
ln -s /site/webapps /var/lib/tomcat7/webapps/ROOT
Now you can restart the server and go to your_ip_or_host .
I also advise you to remove the demos from your server - apt-get purge bbb-demo

Here is a link to https://yadi.sk/d/GVJUPJUp3RY7un

PS
STILL ADDED
In the bbb_api_conf.jsp file
need to change string salt
you can take it from the team
bbb-conf --salt
and also you need to check the variable bigbluebutton url

Source: https://habr.com/ru/post/346828/


All Articles