XÂY DỰNG mô HÌNH lớp học ảo CHO PHÒNG học TRỰC TUYẾN

ĐẠI HỌC QUỐC GIA TP HCM TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN  HUỲNH PHAN DIỆU HIỀN XÂY DỰNG MƠ HÌNH LỚP HỌC ẢO CHO PHỊNG HỌC TRỰC TUYẾN LUẬN VĂN THẠC SĨ NGÀNH: CÔNG NGHỆ THÔNG TIN Mã số: 60 48 02 01 NGƯỜI HƯỚNG DẪN KHOA HỌC: TS Đàm Quang Hồng Hải TP HỒ CHÍ MINH – Năm 2017 XÁC NHẬN CỦA ĐƠN VỊ ỨNG DỤNG SẢN PHẨM Lời cảm ơn Lời đầu tiên, xin chân thành gởi lời cảm ơn đến quí thầy cô môn Khoa Học Kỹ Thuật Thông Tin trường Đại học Công Nghệ Thông Tin - Đại Học Quốc Gia Tp Hồ Chí Minh tận tình giúp đỡ tơi q trình học tập nghiên cứu để hoàn thành luận văn tốt nghiệp Đặc biệt tơi xin bày tỏ lòng biết ơn sâu sắc đến TS Đàm Quang Hồng Hải dành nhiều thời gian, tâm huyết để trực tiếp hướng dẫn tận tình tạo điều kiện thuận lợi cho suốt trình thực nghiên cứu đề tài hồn chỉnh luận văn Thạc sĩ chuyên ngành Công Nghệ Thông Tin Cuối tơi xin chân thành cảm ơn gia đình bạn bè động viên, khích lệ, chia sẽ, giúp đỡ đồng hành sống trình học tập nghiên cứu Tp.Hồ Chí Minh, ngày 16 tháng 12 năm 2016 Tác giả luận văn Huỳnh Phan Diệu Hiền Lời cam đoan Tơi xin cam đoan cơng trình nghiên cứu riêng hướng dẫn khoa học TS Đàm Quang Hồng Hải Các nội dung nghiên cứu, kết đề tài trung thực chưa cơng bố hình thức trước Mọi giúp đỡ cho việc thực luận văn cảm ơn thông tin trích dẫn luận văn ghi rõ nguồn gốc Tác giả luận văn Huỳnh Phan Diệu Hiền Mục lục Mục lục ỨNG DỤNG SẢN PHẨM DANH MỤC CÁC BẢNG DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ .7 MỞ ĐẦU .9 Tình hình chung .9 Tính khoa học tính đề tài 11 Mục tiêu, đối tượng, phạm vi nghiên cứu 12 1.1 Sự phát triển hệ thống Đào tạo trực tuyến 13 1.2 Tình hình nghiên cứu nước 15 1.3 Tình hình nghiên cứu ngồi nước: .19 2.1 Công nghệ truyền thông ảo: 22 2.1.1 Tổng quan: 22 2.1.2 Công nghệ hội thảo trực tuyến (Video Conferencing) 22 2.1.3 Khái niệm lớp học ảo: 24 2.1.4 Các đặc tính lớp học ảo: 24 2.1.4 Các chức lớp học ảo: 24 2.2 Một số hình ảnh lớp học ảo: 26 2.3 Công nghệ Flash/HTML5/WebRTC 28 2.3.1 Flash Video 28 2.3.2 HTML5 Video 28 2.3.3 WebRTC 29 2.4 Ngơn ngữ lập trình ActionScript:[17] 30 Các chức ngơn ngữ ActionScript 31 2.5 Giao thức RTMP RED5 Server: .36 2.5.1 Giao thức RTMP 36 2.5.2 RED5 Server 39 3.1 Phân tích hành vi học sinh lớp học: .43 3.2 Mơ hình lớp học ảo cho phòng học trực tuyến 47 3.3 Thiết kế lớp học ảo trực tuyến .48 Mục lục 3.4 Mơ hình truyền thông Client/Server 51 4.1 Chức phát người học rời khỏi vị trí (màn hình camera) [12] 53 4.2 Chức phân hệ giáo viên: .58 4.3 Chức phân hệ học sinh 60 4.4 Hiện thực lớp học ảo với mô hoạt động người học 66 4.5 Coding – xây dựng hệ thống, kết nối Server: 67 4.6 Độ trễ hệ thống: 70 4.7 Đánh giá hệ thống: .72 5.1 Kết luận 74 5.2 Kiến nghị .74 TÀI LIỆU THAM KHẢO 76 Danh mục ký hiệu chữ viết tắt DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT Chữ viết tắt Nội dung CNTT&TT Công nghệ thông tin truyền thông Danh mục thuật ngữ anh việt DANH MỤC CÁC THUẬT NGỮ ANH VIỆT Chữ viết tắt Nội dung E-Learning Dạy học trực tuyến Synchronous Learning Học đồng Virtual communication technology Công nghệ truyền thông ảo Virtual classroom Lớp học ảo Support for live Audio-Video Hỗ trợ âm thanh, hình ảnh trực tuyến Recording class lecture (Session Recording) White Board Sharing of Learning Resources and/or Desktop Screen Ghi âm giảng Bảng viết Chia sẻ tài nguyên học tập/ chia sẻ hình Classroom control by professors & active student Kiểm soát lớp học participation Multi-Level Fallback Mechanism for continuity of class Cơ chế dự phòng ( đảm bảo lớp học không bị gián đoạn) Live Tech support Hỗ trợ kỹ thuật trực tuyến Mursion Môi trường đào tạo ảo Online classroom Lớp học trực tuyến HTML HyperText Markup Language Danh mục thuật ngữ anh việt WebRTC Web Real-Time Communications Danh mục bảng DANH MỤC CÁC BẢNG Bảng 1: Các thuộc tính lớp Camera 33 Bảng 2: Các thuộc tính lớp Microphone 33 Bảng 3: Các phương thức lớp NetStream 35 Bảng 4: Các thuộc tính lớp Video 36 Bảng 5: Bảng mô hoạt động người học lớp học ảo 50 Bảng 6: Bảng đo độ trễ hệ thống 72 Bảng 7: Đánh giá người dùng lớp học trực tuyến ảo .73 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM Hình 40: Màn hình học sinh có nhiều hs phát biểu 63 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM Hình 41: Màn hình giáo viên có nhiều hs phát biểu 64 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM Hình 42: Khi giáo viên chọn hs phát biểu Các hoạt động: cười, buồn, gật đầu random ngẫu nhiên chọn lựa học sinh thời điểm đó, có hiệu lực máy sinh viên Do đó, khơng chiếm dụng băng thơng server Các hoạt động như: giơ tay phát biểu, phát biểu, nghiêng trái, nghiêng phải, vắng mặt ( tạm thời khỏi lớp) truyền trạng thái lên server (qua phương thức NotifyStatus() ), sau cập nhật xuống máy client để đồng tất học sinh giáo viên Việc truyền trạng thái người ảo chiếm lưu lượng băng thơng so với hình thức Streaming Video lớp học trực tuyến sử dụng Do đó, tốc độ xử lý đồng nhanh 65 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM 4.4 Hiện thực lớp học ảo với mô hoạt động người học Để thực phần mềm cho giáo viên người học trực tuyến, chúng tơi thực tích hợp Movie Clip lớp học ảo viết Adobe Flash nhằm mô hoạt động người học ngồi lớp mô tả Bảng Hình 43: Sơ đồ hoạt động Movie Clip lớp học ảo Trong Movie Clip lớp học ảo, người học trực tuyến lớp học mô avatar ghế ngồi người học trực tuyến phòng học gắn tọa độ cố định, đánh số thứ tự, gắn đếm thời gian timer (xem hình 14) Khi người học trực tuyến vào lớp học gắn số hoạt động (ví dụ: cười, chớp mắt, ), người học trực tuyến thay đổi lựa chọn thông qua list check box hoạt động từ đến 10 (xem hình 12), thơng thường tối thiểu phải có hoạt động chọn Bộ đếm thời gian ghế người học trực tuyến khởi động tạo ngẫu nhiên hoạt động người học trực tuyến chọn thời gian từ đến 10 giây Ngoài ra, kết Check box click cập nhật vào chuỗi tham số (icon_action), chuyển lên Server Red5 qua hàm notifyAvatarAction, sau Server Red5 chuyển phần mềm giáo viên phần mềm người học trực tuyến khác Trên phần mềm người học trực tuyến khác đồng thời tiến hành tương tự Ưu điểm việc hình ảnh cập nhật nhanh chóng, khơng chiếm lưu lượng băng thơng giáo viên lẫn người học trực tuyến Khi người học trực tuyến muốn phát biểu, người học bấm vào nút “phát biểu” phần mềm mình, tín hiệu gửi cho Server Red5 Server Red5 phân phối đến phần 66 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM mềm giáo viên phần mềm người học trực tuyến khác mạng Khi đó, tất các Movie Clip lớp học ảo hiển thị hình đại diện người học muốn phát biểu hình giơ tay nhận chấp thuận giáo viên, phần mềm Flash người học muốn phát biểu gửi luồng (âm thanh) đến Server đồng thời Movie Clip lớp học ảo hiển thị hình đại diện người học đứng dậy nói với âm trực tiếp từ người học trực tuyến 4.5 Coding – xây dựng hệ thống, kết nối Server: Qui trình cài đặt hệ thống:  Cài đặt Server Red5  Cài đặt phần mềm phân hệ giáo viên (máy giáo viên)  Cài đặt phần mềm phân hệ sinh viên (máy sinh viên) Cơ sở liệu: Hệ thống thử nghiệm với số lượng sinh viên 20 sinh viên, liệu lưu trữ trữ tiếp vào phần mềm phân hệ giáo viên sinh viên, chưa có hệ quản trị sở liệu riêng Khai báo trạng thái avatar: public static const AVATAR_NORMAL:int = 1; //bình thường public static const AVATAR_VOTE:int = 2; //phát biểu public static const AVATAR_TALK:int = 3; //nói public static const AVATAR_SMILE:int = 4; //cười public static const AVATAR_SAD:int = 5; //buồn public static const AVATAR_SHOOK_LEFT:int = 6; //lắc đầu qua trái public static const AVATAR_SHOOK_RIGHT:int = 7; //lắc đầu qua phải public static const AVATAR_NOD:int = 8; // gật đầu public static const AVATAR_YAWN:int = 9; // ngáp public static const AVATAR_SLEEP:int = 10; // ngủ public static const AVATAR_EMPTY:int = 11; // empty 67 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM public static const AVATAR_TRAI:int = 12; // trai public static const AVATAR_PHAI:int = 13; // phai Kết nối server: Khi máy client (máy sinh viên) thực thao tác: giơ tay phát biểu, nghiêng trái, nghiêng phải hoạt động kết nối lên Server thông qua hàm NotifyStatus () public function notifyStatus(status:String): void{ var scope:String="room" + this.room_id; var command:String="setStatus"; var args:String = status; var responder:Responder = new Responder(on_set_position_complete,on_set_position_fail) ; this.nc.call("sendCommand",responder,scope,command,this user_id,args); } Server thực thiết lập trạng thái trả cho client khác thông qua hàm setStatus () public void setStatus(int status) { this.status = status; } Đoạn code cho việc thiết lập trạng thái giơ tay phát biểu: if(command.equals("setStatus")) { if(agrs.equals("vote")) { int client_id = HashMap_ClientHash.get(client_cer); System.out.println("Client id: "+client_id); Map online_list = (HashMap)so_ol.getAttribute("ol"); Client client = (Client) online_list.get(Integer.valueOf(HashMap_ClientHash.get(client _cer))); client.setstatus(2); 68 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM online_list.put(Integer.valueOf(HashMap_ClientHash.get(client _cer)), client); System.out.println("vote Value: "+String.valueOf(client.getstatus())); if (so_ol != null){ so_ol.beginUpdate(); so_ol.removeAttribute("ol"); so_ol.setAttribute("ol", online_list); so_ol.setAttribute("count", Integer.valueOf(online_list.size())); so_ol.endUpdate(); } } Hàm nhận dạng chuyển động đối tượng: private function trackerMotionLoop(e:Event):void { var p:Point = new Point(); // if there is motion if (mt.track()){ p.x = mt.x + view.x; p.y = mt.y + view.y; bound.graphics.clear(); bound.graphics.lineStyle(2, 0x0000ff); // CMotionTracker's bound property returns a rectangle containing the tracked area bound.graphics.drawRect(mt.bound.x + view.x, mt.bound.y, mt.bound.width, mt.bound.height); bound.graphics.lineStyle(2, 0x0000ff); bound.graphics.drawCircle(p.x, p.y, 3); bound.graphics.lineStyle(2, 0xff0000); bound.graphics.drawCircle(p.x - view.x, p.y, 3); 69 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM 4.6 Độ trễ hệ thống: Phương pháp đo độ trễ hệ thống: 1/ Tại hàm đăng nhập, click vào nút đăng nhập lấy hệ thống (máy sinh viên) => Now local time start (1) 2/ Tại hàm netStatus, trường hợp kết nối thành công với server cập nhật hệ thống thời điểm trả máy sinh viên => Now local time finish (2) (2) – (1) => Độ trễ Hình 44: Kết Output thời gian đăng nhập kết nối thành công Các hàm: this.btn_dangnhap.addEventListener(MouseEvent.CLICK, ham_dangnhap); public function ham_dangnhap (event: MouseEvent):void{ this.room_id = "default"; this.input_host = "rtmp://192.168.168.1:1935/firstapp/room"+ this.room_id; var now:Date = new Date(); trace("now local time start: " + now); this.user_id = randomRange(5000,2).toString(4); this.user_name = "Sinh vien " + this.user_id; this.type_client = "sv"; this.icon_name = this.txt_inputten.text; 70 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM trace(this.txt_inputten.text + " " + this.txt_inputmk.text); gotoAndStop(2); … connect(); } ******************************************************** public function netStatus(event:NetStatusEvent):void{ switch(event.info.code) { … case "NetConnection.Connect.Success": trace("Success"); var now:Date = new Date(); trace("now local time finish: " + now); playbackVideo(); trackerMotion(); break; case … } } Kết thống kê với số lượng sinh viên Min 1, Max 20 Độ trễ hệ thống đo dựa hệ thống có 20 sinh viên đăng nhập lúc server có cấu hình Core I5 6200U 2.4 GHz, Ram GB, đường truyền 25Mbps có kết sau: Số lượt sinh viên đăng nhập Độ trễ Từ 1-5 sv – giây Từ 6-10 sv – giây Từ 11-15 sv – giây 71 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM – 10 giây Từ 16-20 sv Bảng 6: Bảng đo độ trễ hệ thống Kết thay đổi tùy thuộc vào cấu hình server, băng thơng đường truyền 4.7 Đánh giá hệ thống: Hệ thống lớp học ảo trực tuyến xây dựng khảo sát số lớp học mẫu, nhận ủng hộ giáo viên người học trực tuyến Lớp học ảo trực tuyến đảm bảo đầy đủ chức lớp học thơng thường, đảm bảo chất lượng hình ảnh âm Giáo viên người học trực tuyến nhìn bao qt lớp học, với hoạt động mô sôi động, dễ thương giúp người học dễ dàng tiếp nhận học, khơng nhàm chán Chúng tơi tiến thăm dò với số người dùng tới 80% người dùng đánh giá chất lượng hình ảnh, âm tốt, chương trình dễ sử dụng Chúng tơi đưa câu hỏi thăm dò cho người dùng (xem bảng 2) với tiêu chí “Hồn tồn đồng ý” điểm, “Đồng ý” điểm, “Đồng ý có lưỡng lự” điểm “Không đồng ý” điểm Hoàn toàn đồng ý Đồng ý Đồng ý có lưỡng lự Khơng đồng ý Tổng số điểm trung bình Anh chị có hài lòng với mô lớp học ảo không? 22 3.57 Anh chị có hài lòng với giao diện lớp học ảo không? 25 0 3.83 Câu hỏi 72 Chương 4: CÁC CHỨC NĂNG CỦA PHẦN MỀM Anh chị có hài lòng chất lượng, hình ảnh, âm lớp học ảo không? 27 1 3.8 Bảng 7: Đánh giá người dùng lớp học trực tuyến ảo 73 Chương 5: KẾT LUẬN VÀ KIẾN NGHỊ Chương KẾT LUẬN VÀ KIẾN NGHỊ 5.1 Kết luận Việc nghiên cứu giải pháp hệ thống lớp học ảo trực tuyến ứng dụng cho dạy học trực tuyến, với mục tiêu mô lớp học ảo với hoạt động sống động người học máy tính trực tuyến Đồng thời xử lý vấn đề tiết kiệm băng thông truyền tải liệu server client cách truyền trạng thái người ảo thay truyền Video Việc triển khai ớp học ảo ứng dụng cho dạy học trực tuyến thời gian vừa qua với đánh giá bước đầu người sử dụng cho thấy giải pháp mà chúng tơi nghiên cứu có đủ khả triển khai trường học, trường Đại học nhằm nâng cao chất lượng đào tạo bồi dưỡng nguồn nhân lực công xây dựng phát triển kinh tế xã hội Hệ thống lớp học ảo trực tuyến xây dựng khảo sát số lớp học mẫu, nhận ủng hộ giáo viên người học trực tuyến Lớp học ảo trực tuyến đảm bảo đầy đủ chức lớp học thơng thường, đảm bảo chất lượng hình ảnh âm Giáo viên người học trực tuyến nhìn bao qt lớp học, với hoạt động mô sôi động, dễ thương giúp người học dễ dàng tiếp nhận học, không nhàm chán Hệ thống lớp học ảo trực tuyến đề xuất dễ dàng tích hợp với hệ quản lý giáo vụ xây dựng Web Hệ thống lớp học trực tuyến Easy Online triển khai cho lớp học trực tuyến hệ thống quản lý dễ dàng điều chỉnh, bổ xung cho việc quản lý lớp học, lớp tập huấn trường học, quan, doanh nghiệp có yêu cầu 5.2 Kiến nghị Ứng dụng đề tài bước khởi đầu tác giả việc tìm hiểu xây dựng mơ hình lớp học ảo, thời gian tới, tác giả tiếp tục phát triển bổ sung chức khác góp phần thực hóa lớp học ảo gần với lớp học truyền thống hiệu Hiện nhận diện hành vi như: nghiêng trái, nghiêng phải, khỏi lớp học cách nhận diện di chuyển đối tượng người học qua camera 74 Chương 5: KẾT LUẬN VÀ KIẾN NGHỊ Hướng phát triển mở : tích hợp hệ thống nhận diện gương mặt người học để đồng biểu cảm gương mặt người học với người ảo, giúp cho mơ hình lớp học ảo sinh động 75 TÀ I LIỆU THAM KHẢO [1] Beate Baltes, Ed.D National University, Los Angeles, California; “Virtual Classroom Discussions versus Traditional Classroom Discussions”; Proceedings of the International Conference on Computers in Education (ICCE’2002) [2] Vrasidas, C & McIsaac, S M., “Factors influencing interaction in an online course”; The American Journal of Distance Education, 13(3), 22-36, 1999 [3] J Lynn McBrien and Phyllis Jones, University of South Florida; Rui Cheng ; Nazareth College “Virtual Spaces: Employing a Synchronous Online Classroom to Facilitate Student Engagement in Online Learning”, 2012 [4] “The Leadership Handbook”, Citrix Systems, Inc, 2015 [5] Dam Quang Hong Hai; Le Kim Hung, “Implementation of Online Learning System in face-to-face Classroom for online Distance Learning”, Hội nghị quốc gia lần thứ VIII "Nghiên cứu ứng dụng Công nghệ thông tin" FAIR 2015, Hà Nội, 2015 [6] Justin-Ferriman, Characteristics-of-a-virtual-classroom, https://www.learndash.com, (source Timeless Learning Technologies), accessed T1/16 [7] Virtual-classroom, http://www.timelesslearntech.com , accessed T1/16 [8] Rtmp-real-time-messaging-protocol, http://www.playerdiy.com, accessed T4/16 [9] Alyssa Friend Wise, Yuting Zhao, Simone Nicole Hausknecht, “Learning Analytics for Online Discussions: A Pedagogical Model for Intervention with Embedded and Extracted Analytics”, LAK '13, Leuven, Belgium, 2013 [10] Virtual-communication-technology, https://www.techwalla.com, accessed 3/10/16 [11] Project Management Approaches for Online Learning Design, Gulsun Eby (Anadolu University, Turkey) & T.VolkanYuzer (Anadolu University, Turkey), 2013 by IGI Global – Chapter 9: Training of Avatar Moderator in Sliding Mode Control Environment for Virtual Project Management,Vardan 76 Mkrttchian (HHH Technology Inc, Australia) & Galina Stephanova (Astrokhan State University, Russian Federation) [12] An Efficient MAC Layer Packet Fragmentation Scheme with Priority Queuing for Real-Time Video Streaming, Byoungheon Shin; Jalil Abdullayev; Dongman Lee, 2016 IEEE 41st Conference on Local Computer Networks (LCN) [69-77] [13] Seyed M.Buhari; Khalid Obaid Al-Shammari; Saud Ghazi; Mohd Saleem Nazmudeen; Kostandinos Tsaramirsis, “Towards simulation of the classroom learning experience: Virtual reality approach Georgios Tsaramirsis”, 2016 3rd International Conference on Computing for Sustainable Global Development (INDIACom) [14] Swati Das, “Virtual Classroom for Effective Learning in IT Industry”, 2015 International Conference on Information Technology (ICIT) [page 221226] [15] Vivian Brian Lobo; Nazneen Ansari, “Multimedia enabled virtual classroom for distance education”, 2015 International Conference on Green Computing and Internet of Things (ICGCIoT), [page 1598 – 1603] [16] Đàm Quang Hồng Hải; Võ Thế Dân; Lê Kim Hùng; Đồng Tiến Dũng, “Nghiên cứu triển khai Hệ thống Đào tạo trực tuyến sử dụng IP Video Phone”, Báo cáo tổng kết đề tài KH & CN, T11/2015, [2.3, trang 22-28] [17] Ray Satini of Blink Reaction, “Building an Effective eLearning Experience with Drupal”, Ebook [18] Diana BUTUCEA; Cezar Liviu CERVINSCHI, “Building Robust Elearning Software Systems Using Web Technologies”, Informatica Economică vol 15, no 2/2011 [19] Zongkai Yang; Quingtang Liu, “Research and development of web-based virtual online classroom”, Computes & Education 48 (2007), [page 171-184] 77 ... lớp học ảo (avatar) 21 Hình 9: Hình ảnh hội thảo trực tuyến 23 Hình 10: Các chức lớp học ảo [7] 25 Hình 11: Lớp học ảo tương tác hình ảnh, âm 26 Hình 12: Lớp học ảo. .. viên Hình 5: Lớp học ảo Topica 18 Chương 1: TỔNG QUAN Hình 6: Mơ hình lớp học online tương tác Rockit English Hình 7: Lớp học trực tuyến CITD Với lớp học trực tuyến CITD, có hình ảnh lớp học quay... 26 Hình 13: Hình ảnh lớp học ảo mơ dạng 2D 27 Hình 14: Hình ảnh lớp học ảo mô dạng 3D 27 Hình 15: Hình ảnh lớp học ảo mô dạng 3D 28 Hình 16: Kiến trúc WebRTC 30 Hình