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… (adsbygoogle = window.adsbygoogle || []).push({});
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
60
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 (adsbygoogle = window.adsbygoogle || []).push({});
64
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 (adsbygoogle = window.adsbygoogle || []).push({});
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.
<localeversion suppressWarning="false">0.8-beta4</localeversion>
<version>VERSION</version>
<help url="http://HOST/help.html"/>
<porttest host="HOST" application="video"/> <application uri="rtmp://HOST/bigbluebutton" host="http://HOST/bigbluebutton/api/enter" />
<language userSelectionEnabled="true" />
<skinning enabled="false" url="branding/css/theme.css.swf" />
<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)){ (adsbygoogle = window.adsbygoogle || []).push({});
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; }
<skinning enabled="false" url="branding/css/theme.css.swf" />
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" (adsbygoogle = window.adsbygoogle || []).push({});
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
/usr/bin .
Để các văn bản hiện thị đúng font chữ ,không bị nhòe hay lỗi font thì ta cần phải cài đặt thêm các font cần thiết để hiện thị tiếng việt tốt như font : Time New
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
73 maxNumPages=200 : Số trang upload tối đa của hệ thống .
Copy các font chữ cần thiết cho vào thư mục : /usr/share/fonts/truetype/windows/ Sau đó dùng lệnh để hệ thống load được các file mới tải vào :
# sudo fc-cache -f –v Khởi động lại hệ thống :
# bbb-conf –clean
Thông tin phòng họp : size 15 , font Times New Roman ,màu đỏ……
defaultWelcomeMessage=<br> <b><u><font size="15" face="Times New Roman" color="#FF0000">%%CONFNAME%%</font></u></b> <br>
Số người tối đa trong phòng họp : tùy vào băng thông máy chủ,ta cấu hình số người hỗ trợ tối đa
defaultMaxUsers=20
Thời gian kết thúc phòng họp : chọn thì cuộc họp không kết thúc khi vẫn còn thành viên đăng nhập ,hoặc có thể chọn phút mặc định cho cuộc họp ,nó có chức năng như hẹn giờ ,đến giờ đó ,tất cả cuộc họp tự kết thúc , mặc dù vẫn còn thành viên online defaultMeetingDuration=0
Xóa tất cả dữ liệu phòng họp cũ khi không còn ai online : sau khi cuộc họp kết thúc ,sẽ tự động xóa dữ liệu trước đó .
removeMeetingWhenEnded=true defaultMeetingExpireDuration=1 defaultMeetingCreateJoinDuration=1 Thông tin Ip hoặc tên miền của server
bigbluebutton.web.serverURL=http://conf.vinaglobal.vn Trang web khi logout :
bigbluebutton.web.logoutURL=default (adsbygoogle = window.adsbygoogle || []).push({});
Nếu chọn default khi đăng xuất hệ thống sẽ tự trở vể trang chủ ,hoặc ta có thể đặt vào 1 trang cần chuyển tới khi các thành viên logout thay vào default
Tên web hiển thị :
defaultClientUrl=${bigbluebutton.web.serverURL}/client/video.html Tên trang web chính là : http://vconf.vinaglobal.vn/client/video.html
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
74 Hệ thống mặc định hiển thị tên web là
http://vconf.vinaglobal.vn/client/BigBlueButton.html
Ta có thể thay đổi BigBlueButton.html trong var/www/bigbluebutton thành tên video.html thì tại đây nó sẽ load file video.html thay vì BigBlueButton.html
Mã bảo vệ MD5
securitySalt=1965894376a6a163b2e05ab60ab3406a Để kiểm tra mã bảo vệ ta có thể dùng lệnh :
# bbb-conf –salt
Mỗi một server sẽ có 1 mã bảo vệ khác nhau ,khi tạo ra 1 phòng họp thì tên phòng họp sẽ được gắn liền với mã bảo vệ này .
Upload tài liệu đầu tiên :
beans.presentationService.defaultUploadedPresentation=${bigbluebutton.web.serverU RL}/Welcome.pdf
Khi login vào web ,hệ thống sẽ chọn file để upload . Ta có thể tạo 1 file PDF hoặc word về lời chào ,hay giới thiệu về công ty ,tất cả thành viên đều có thể thấy được
File upload này nằm ở thư mục : /var/www/bigbluebutton-default/Welcome.pdf
5.6. Hệ thống Video Conference hoàn chỉnh
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
75 Hình 5.31 Chia sẻ video toàn màn hình
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
76 Hình 5.33 Chế độ chia sẻ tài liệu
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
77
Chƣơng 6
Nội dung chương này bao gồm kết quả thực hiện, những hạn chế của đề tài, đưa ra cách khắc phục và định hướng phát triển cho đề tài.
6.1. Kết quả đạt đƣợc
Trong quá trình thực hiện đề tài nhóm đã xây dựng được hệ thống hội nghị truyền hình với các tính năng sau:
Chia sẻ video với các độ phân giải khác nhau Thoại qua mạng internet
Chia sẻ tài liệu Bảng viết Chat trực tuyến Ƣu điểm:
o Hệ thống video conference được xây dựng trên các thành phần mã nguồn mở nên hoàn toàn miễn phí, tiết kiệm được một khoản chi phí cho người sử dụng mà vẫn có được những tính năng cơ bản của các hệ thống hội nghị tryền hình khác.Với tính chất mã nguồn mở nên hệ thống sẽ được cập nhật chỉnh sửa thường xuyên để khắc phục lỗi và các tính năng mới nhất mà người sử dụng cần, chúng ta cũng có thể tham gia đóng góp ý tưởng để phát triển hệ thống này .
Nhƣợc điểm: (adsbygoogle = window.adsbygoogle || []).push({});
o Hệ thống chỉ chạy được trên hệ điều hành Window và Linux có cài đặt Flash và chưa chạy được trên điện thoại hay máy tính bảng sử dụng hệ điều hành iOS hay Android.
TỔNG KẾT VÀ HƢỚNG PHÁT TRIỂN ĐỀ TÀI
LUẬN VĂN TỐT NGHIỆP HỆ THỐNG VIDEO CONFERENCE
78
o Hệ thống chạy phụ thuộc nhiều vào tốc độ đường truyền internet và cần phải có một băng thông tốt để truyền Voice và Video chất lượng tốt.
6.2. Hƣớng phát triển của đề tài
oCập nhật các phiên bản Bigbluebutton tiếp theo, đồng thời chỉnh sửa, thiết kế