Thiết kế trang chủ

5.1.1. Thiết kế phần đăng nhập web :

Trang web đăng nhập chính được thiết kế bằng HTML,CSS….. gồm 3 thành phần chính: Tài khoản, mật khẩu và phòng họp.

Tài khoản và mật khẩu sẽ được quản lí bởi hệ cơ sở dữ liệu Mysql, phòng họp do người sử dụng tùy ý lựa chọn.

Thư mục làm việc chính: /var/www/bigbluebutton-default chứa các file thiết kế HTML,CSS,images…nơi làm việc của server Nginx .

Favicon.ico : biểu tượng webcam trên title web Index.html : nội dung web phần đăng nhập

Thư mục “css” chứa các file header_style.css, footer.css….trang trí cho phần đăng nhập

Welcome.pdf : file upload lời chào tới phòng họp

Hình 5.1 Chi tiết các file trong phần thiết kế gian diện web

THIẾT KẾ HỆ THỐNG VIDEO CONFERENCE

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

52 Khi người dùng truy cập web brower , Server Nginx sẽ kiểm tra kết nối tới máy chủ , nếu kết nối thành công thì sẽ hiển thị nội dung web trong file index.html . Nếu kết nối không thành công thì sẽ báo lỗi kết nối và thử lại sau .

Hình 5.2 : Trang đăng nhập chính sau khi thiết kế

5.1.2. Tạo cơ sở dữ liệu Mysql

Chúng ta sẽ sử dụng một số lệnh trong MySQL để tạo một database trong đó có một table chứa thông tin là tài khoản user đăng nhập :

Lệnh Mysql tạo Database test với 5 cột : ID ,user_id ,password ,phone ,email .  Đăng nhập MySQL : # mysql -u root -p

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

53 Hình 5.3 Đăng nhập MySQL

 Kiểm tra các Database trong máy : mysql > show databases ;

 Tạo database test : mysql > create database test;

 Kiểm tra các Database trong máy : mysql > show databases ;

Hình 5.4 Kiểm tra các Database có sẵn

 Lựa chọn database test để thao tác : mysql > use test ;

 Tạo table users :

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

54  Kiểm tra các cột đã tạo trong table users : mysql > desc users ;

Hình 5.6 Kiểm tra các cột đã tạo trong table  Insert dữ liệu người dùng vào table users :

Hình 5.7 Insert dữ liệu người dùng vào table

 Xem lại thông tin bảng users : mysql > select * from users ;

Hình 5.8 Xem toàn bộ thông tin từ 1 table Một số lệnh truy vẫn tham khảo trong MySQL :

- Xóa database :

VD: Muốn xóa toàn bộ database test : mysql> drop database test ;

- Xóa table :

VD: Muốn xóa toàn bộ table users : mysql> drop table users ;

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

55 - Chỉnh sửa dữ liệu trong 1 tables users :

VD : Muốn đặt email cho user tampham là tampham@gmail.com với ID = 3 ta dùng lệnh : mysql > update users set email = „tampham@gmail.com‟ where ID = „3‟;

- Xóa dữ liệu trong 1 table :

VD : Muốn xóa 1 hàng user_id=tampham trong table users ta dùng lệnh sau : mysql> delete from users where user_id=‟tampham‟ ;

- Truy vấn trong CSDL :

Truy vấn user_id,password trong table users: mysql> select user_id,password from users;

Hình 5.9 Xem thông tin người dùng

Truy vấn user_id,password trong table users biết trước ID hoặc phone : mysql> select user_id,password from users where ID=1 ; 5.1.3. Kết nối JSP với Mysql

Để có thể kết nối JSP với Mysql ta sử dụng thư viện mysql-connector-java-5.1.10

được download tại địa chỉ http://dev.mysql.com/downloads/connector/j

Copy file mysql-connector-java-5.1.10 vào thư mục usr/share/tomcat6/lib

Khởi động lại hệ thống BigBlueButton để hệ thống nhận thư viện kết nối mới .

# bbb-conf --restart

Các thư viện JAVA kết nối với MySQL : java.sql.* , javax.sql.*

Code để kết nối JSP với MySQL trong file login.jsp còn file video.jsp dùng để chuyển tiếp tới web khi phần login thành công theo đường dẫn :

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

56 <%@ page import ="java.sql.*" %>

<%@ page import ="javax.sql.*" %> <%

//Gán giá trị username lấy từ form đăng nhập.

String username =request.getParameter("username"); //Gán giá trị meletingID lấy từ form đăng nhập.

String meetingID =request.getParameter("meetingID"); //Gán giá trị pwd lấy giá trị password lấy từ form đăng nhập. String pwd=request.getParameter("pwd");

//Khai báo điều khiển JDBC

Class.forName("com.mysql.jdbc.Driver");

//Hàm kết nối JSP và MySQL : khai báo đối tượng connection

java.sql.Connection con =

DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","bkhcm"); %>

Trong đó : test là database cần kết nối.

5.2. Biên dịch các module trong hệ thống BigBlueButton 5.2.1. Tổng quan về các module 5.2.1. Tổng quan về các module

 Chat Module

 Trong cửa sổ chat này các user có thể chat chung với tất cả các user khác hoặc chat riêng với một user bất kì .

 Hiện thông tin phòng họp mà user hiện tại đang sử dụng như : PHÒNG 1,PHÒNG 2….  Có thể chọn kích thước chữ ,màu chữ để hiện thị rõ hơn .

 Nhấn vào dấu + để chọn Tab nói chuyện riêng tư với thành viên khác.  Tab All là tất cả thông điệp đều được hiện thị và trao đổi với mọi người.

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

57 Hình 5.10 Cửa sổ Chat

 Viewers Module

 Hiện thị danh sách tên các thành viên đang tham gia phòng họp.  Trang thái của các thành viên.

 Có thể giơ tay xin phát biểu

 Chuyển quyền chia sẻ tài liệu cho các thành viên khác.

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

58  Layout Module (ChatModule.swf)

User có thể chọn lựa các module để sử dụng với những tính năng như : mặc định, xem video , tài liệu ,chat.

Hình 5.12 Layout Module  Videoconf Module (VideoconfModule.swf)

Cho phép user chia sẻ webcam với các user khác đang tham gia phòng họp. Nó kết nối với các ứng dụng riêng biệt / video trên máy chủ bbb.

 Whiteboard Module (WhiteboardModule.swf)

User sử dụng module để vẽ các chú thích lên các tài liệu được chia sẻ.

Hình 5.13 Whiteboard Module  Present Module

 Module trình bày cho phép người dùng chia sẻ các slide tài liệu khác trong khu vực xem chính bên trong BigBlueButton.

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

59 Hình 5.14 Present Module

 Videodock Module

Module này dùng để bám dính video, tất cả video của user tham gia phòng họp sẽ được ghim lại trong module này.

 Listeners Module

Hiện thị tên người đang nói chuyện.  Desktop Sharing

Chức năng này dùng để chia sẻ màn hình của các thành viên .Vì chức năng này cần một băng thông lớn nên với đường truyền ADSL hiện nay ứng dụng này chạy rất chậm và không có hiệu quả khi sử dụng. Nhóm sẽ không sử dụng module này.

 Phone Module

Kết nối âm thanh giữa các user đang tham gia phòng họp.

Hệ thống Video Conference của nhóm xây dựng hệ thống âm thanh dùng tổng đài Asterisk chạy tách biệt với Video.Do đó trong hệ thống BigBlueButton các module liên quan tới âm thanh như: Listeners Module, Phone Module sẽ bị loại bỏ vì âm thanh truyền đi còn có nhiều hạn chế như delay , tiếng vọng…

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

5.2.2. Biên dịch các module

Tất cả các module flash như : BigBlueButton.swf, ChatModule.swf, LayoutModule.swf, ListenersModule.swf, PhoneModule.swf, PresentModule.swf, VideoconfModule.swf,

VideodockModule.swf, ViewersModule.swf, WhiteboardModule.swf…. được tạo ra từ các file gốc MXML và các file con .as (ActionScript ) nằm trong thư mục :

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/src

Hình 5.15 Thư mục chứa các file MXML của các module Và các module :

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/src/org/bigbluebutton/modules

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

61 Tiếp theo là tiến hành chỉnh sửa cho module bigbluebutton.swf . Để làm được điều này chúng ta chú ý đến thư mục

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/src/org/bigbluebutton Thư mục trên bao gồm các thư mục con :

 Main : chứa file thực thi trong module BigBlueButton  Modules : bao gồm tất cả các module nhiệm vụ

Tại / main/model/BigBlueButtonPreloader.as là file tải các module sửa lại như sau :

Hình 5.17 Chỉnh sửa file BigBlueButtonPreloader.as Tại /main/views/LoadingBar.mxml là file load các module sửa lại như sau:

Hình 5.18 Chỉnh sửa file LoadingBar.mxml Sau khi chỉnh sửa xong chúng ta dùng lệnh sau để biên dịch module :

$ cd ~/dev/bigbluebutton/bigbluebutton-client $ ant

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

62 Một chương trình Flex/Flash sẽ biên dịch lại các file đã chỉnh sửa đóng gói lại thành các module .swf và ko thể thay đổi được.

Hình 5.19 Biên dịch các module Flash

Hình 5.20 Kết quả sau khi biên dịch thành công

Sau khoảng 5-10 phút tùy theo cấu hình máy ,hệ thống sẽ biên dịch xong và tạo ra các module flash và các file cấu hình đường dẫn:

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/bin Copy toàn bộ các file module vừa tạo ra vào BBB-Server tại thư mục :

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

63 Hình 5.21 Vị trí lưu các module flash của BBB-Server

Trong đó :

 Branding/css : thư mục chưa file theme.css.swf.  Conf/config.xml : file cấu hình cho hệ thống.  Conf/locales.xml : file chọn ngôn ngữ của hệ thống.  Conf/layout.xml : file cấu hình layout cho các module.  Locale : chứa các file ngôn ngữ.

 BigBlueButton.html : file chứa nội dung trang web chính.

 Các module Flash thực hiện từng chức năng riêng : ChatModule.swf, LayoutModule.swf, ListenersModule.swf, PhoneModule.swf,

PresentModule.swf, VideoconfModule.swf, VideodockModule.swf, ViewersModule.swf, WhiteboardModule.swf…..

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

5.3. Thiết kế giao diện

BigBlueButton hỗ trợ công cụ để chúng ta có thể thiết kế giao diện theo ý của mình bằng cách biên dịch file CSS nằm trong thư mục :

/home/server/dev/bigbluebutton/bigbluebutton-client/src/branding/css

Tại đây tìm đến file theme.css là file thiết kế chính. File này sẽ được load bởi BigBluebutton client.

Trong đó :

 Application : Chứa hình nền và font chữ

 .mdiWindowFocus : Các tùy chỉnh khi được chọn module , khi chọn sẽ xuất hiện màu xanh .

 .mypanelTitleFocus : Tựa đề các module khi được chọn,khi chọn thì chữ màu trắng ,font Arial ,cỡ chữ 12 .

 .mdiWindowNoFocus: Các tùy chỉnh của các module không được chọn ,màu xám  .mypanelTitleNoFocus : Tựa đề các module khi không được chọn ,font chữ

Arial ,cỡ chữ 12 ,màu chữ đen

 ApplicationControlBar : Tùy chỉnh thanh ControlBar  ComboBox : Màu sắc select

 ProgressBar : Thanh chạy khi load các module màu xanh.

Sau khi thiết kế xong để sử dụng file CSS này chúng ta phải biên dịch nó sang file Flash theme.css.swf bằng cách dùng lệnh sau với quyền user:

$ cd ~/dev/bigbluebutton/bigbluebutton-client $ ant branding -DthemeFile=theme.css

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

65 Hình 5.22 Biên dịch module giao diện theme.css

Sau khi biên dịch thành công ,sẽ tạo ra file flash theme.css.swf nằm trong thư mục :

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/bin/branding/css Tiếp theo chúng ta copy file theme.css.swf vào thư mục mới:

/var/www/bigbluebutton/client/branding/css/theme.css.swf

Chỉnh sửa file config tại thư mục /var/www/bigbluebutton/client/conf/config.xml như sau:

Đổi thành:

 False : Giao diện mặc định cho web  True : load giao diện được tạo ra

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

66 Hình 5.23 Kết quả thu được sau khi sửa giao diện

5.4.Biên dịch ngôn ngữ

Hệ thống BigBlueButton được hỗ trợ nhiều ngôn ngữ khác nhau. Nhóm sẽ thực hiện biên dịch 2 loại ngôn ngữ tiếng Việt Nam và tiếng Anh.

Các file ngôn ngữ này được chứa trong thư mục sau :

/home/quangquynh/dev/bigbluebutton/bigbluebutton-client/locale

Hình 5.24 Thư mực chưa các file ngôn ngữ sau trc khi biên dịch

Trong đó thư mục en_US sẽ ngôn ngữ tiếng English , vi_VN sẽ chứa ngôn ngữ tiếng Việt Nam.

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

67 Hình 5.25 File ngôn ngữ English trước khi biên dịch

Hình 5.26 File ngôn ngữ Việt Nam trước khi biên dịch

Sau khi chỉnh sửa xong ,ta sẽ biên dịch ra file en_US_resources.swf ,vi_VN_resources.swf bằng lệnh sau :

$ cd ~/dev/bigbluebutton/bigbluebutton-client $ ant locales

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

68 Hình 5.28 Biên dịch ngôn ngữ thành công

Sau khi build thành công sẽ tạo ra file en_US_resources.swf ,vi_VN_resources.swf nằm trong thư mục : /home/quangquynh/dev/bigbluebutton/bigbluebutton-client/bin/locale

Hình 5.29 Vị trí lưu các file ngôn ngữ sau khi biên dịch

Copy 2 file en_US_resources.swf, vi_VN_resources.swf vừa tạo ra vào thư mục /var/www/bigbluebutton/client/locale

5.5. Cấu hình cho client

File config.xml nằm trong thư mục /var/www/bigbluebutton/client/conf/config.xml dùng để chỉnh sửa vị trí và hiển thị của các module.

<version>VERSION</version>

<layout showLogButton="false" showVideoLayout="false" showResetLayout="true" showToolbar="true"

showHelpButton="true" showLogoutWindow="true"/>

Nếu nhứ chọn nút Help thì sẽ tự động chuyển tới trang web : http://HOST/help.html

Hệ thống mặc định là cho phép lựa chọn ngôn ngữ

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

69 Nhưng ngôn ngữ hiện thị mặc định là English load từ file en_US_resources.swf . Để hiện thị ngôn ngữ mặc định là Vietnamese thì ta thay đổi các thống số en_US bằng vi_VN trong file

/var/www/bigbluebutton/client/lib/bbb_localization.js

// Check locale

var localeChain = "en_US"; if (navigator.language)

localeChain = navigator.language; else if (navigator.browserLanguage)

localeChain = navigator.browserLanguage; if(/^([a-z]+)-([a-z]+)$/i.test(localeChain)){

var matches = /^([a-z]+)-([a-z]+)$/i.exec(localeChain); localeChain = matches[1].toLowerCase() + "_" + matches[2].toUpperCase(); } else if(/^en$/i.test(localeChain)){ localeChain = "en_US"; } else if(/^([a-z]+)$/i.test(localeChain)){

var matches = /^([a-z]+)$/i.exec(localeChain); localeChain = matches[1].toLowerCase() + "_" + matches[1].toUpperCase(); } else{ localeChain = "en_US"; } function getLanguage(){ return localeChain; }

Nếu chọn false thì hệ thống sẽ có giao diện mặc định , nếu chọn true thì sẽ load file theme.css.swf nằm trong thư mục được tạo ra trong phần thiết kế giao diện:

/var/www/bigbluebutton/client/branding/css

<layout showLogButton="false" showVideoLayout="false" showResetLayout="true" showToolbar="true"

showHelpButton="false" showLogoutWindow="true"/>

Hiện thị các nút chức năng như LogButton , Resetlayout , Help ,LogOut…

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

70  Chat Module :

<module name="ChatModule" url="ChatModule.swf?v=20121108-005344" uri="rtmp://192.168.1.4/bigbluebutton" ; IP server hoặc host dependsOn="ViewersModule"

translationOn="false"

translationEnabled="false" ; chọn true /false : cho phép trao dịch tự động/không

privateEnabled="true" ; chọn true /false : cho phép trao đổi riêng tư/không position="top-right"

 ViewersModule :

<module name="ViewersModule" url="ViewersModule.swf?v=20121108-005344" uri="rtmp://192.168.1.4/bigbluebutton"

host="http://192.168.1.4/bigbluebutton/api/enter"

allowKickUser="false" ; Chọn true/false : cấp quyền đẩy /không đẩy thành viên ra khỏi phòng.

windowVisible="true" ; Hiển thị hay không hiện thị trên web. />

 LayoutModule :

<module name="LayoutModule" url="LayoutModule.swf?v=20121108-005344" layoutConfig="conf/layout.xml" ;

Load file layout từ /var/www/bigbluebutton/client/conf/layout.xml  VideoconfModule :

<module name="VideoconfModule" url="VideoconfModule.swf?v=20121108- 005344"

uri="rtmp://192.168.1.4/video" dependson = "ViewersModule"

videoQuality = "100" ; Chất lượng Video

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE

71 resolutions = "320x240,640x480" ; Chế độ phân giải hình ảnh của video khi truyền đi. autoStart = "false" ; Khi đăng nhập tự động bật và truyền video .

showButton = "true" ; Hiển thị nút Webcam showCloseButton = "true" ; Hiển thị nút tắt webcam publishWindowVisible = "true" viewerWindowMaxed = "false" viewerWindowLocation = "top" camKeyFrameInterval = "30" camModeFps = "10" camQualityBandwidth = "0" camQualityPicture = "90"

enableH264 = "true" ; Nén Video h264Level = "2.1"

h264Profile = "main" />

 WhiteboardModule :

<module name="WhiteboardModule" url="WhiteboardModule.swf?v=20121108-005344" uri="rtmp://192.168.1.4/bigbluebutton"

dependsOn="PresentModule" />

 PresentModule :

<module name="PresentModule" url="PresentModule.swf?v=20121108-005344" uri="rtmp://192.168.1.4/bigbluebutton" host="http://192.168.1.4" showPresentWindow="true" showWindowControls="true" dependsOn="ViewersModule" />  VideodockModule :

<module name="VideodockModule" url="VideodockModule.swf?v=20121108- 005344"

LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE 72 uri="rtmp://192.168.1.4/bigbluebutton" dependsOn="VideoconfModule, ViewersModule" autoDock="true" maximizeWindow="false" position="bottom-right" width="172" height="179" layout="smart" oneAlwaysBigger="false" />

Cấu hình trong filebigbluebutton.properties với chức năng : cài đặt thời gian cho cuộc họp ,số trang upload tài liệu cho phép ,thông tin phòng họp,xóa bộ nhớ khi cuộc họp kết thúc,….

Var/lib/tomcat6/webapps/bigbluebutton/WEB-INF/classes/ bigbluebutton.properties

 Upload tài liệu :

presentationDir=/var/bigbluebutton swfToolsDir=/bin imageMagickDir=/usr/bin ghostScriptExec=/usr/bin/gs fontsDir=/usr/share/fonts maxConversionTime=5 maxNumPages=200

Khi upload tài liệu sẽ được chứa ở thư mục /var/bigbluebutton ,chương trình convert tài liệu SWFTOOLS nằm tại thư mục /bin ,sau khi convert các tài liệu thành các file flash nằm tại

Sự cần thiết việc sử dụng Video Conference

Giải pháp dùng phần mềm