7. Bố cục của luận văn
3.4.2. Xây dựng hàm kết nối
Khi ngƣời học truy cập vào trang web quản lý đào tạo sau đó tìm đến mục hỗ trợ trực tuyến. Tại đây ngƣời học sẽ nhập vào tên của mình và bấm vào nút kết nối.
đoạn mã nhƣ sau:
//Nhập tên của bạn
<input type="text" id="userNameField" placeholder="Tên của bạn" /> //Tạo nút kết nối
<button id="connectButton" onclick="connect()">Kết nối</button>
Khi ngƣời dùng bấm vào nút “Kết nối” chƣơng trình sẽ gọi đến server và thực thi hàm connect(). Hàm connect có nội dung nhƣ sau:
Để sử dụng các kênh dữ liệu, cả hai bên kết nối phải kích hoạt các kênh truyền dữ liệu trƣớc khi gọi (hoặc chấp nhận một cuộc gọi):
easyrtc.enableDataChannels (true);
easyrtc.setPeerListener(addToConversation);
easyrtc.setRoomOccupantListener(convertListToButtons);
easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);
Trách nhiệm chính của hàm connect( ) để kết nối tới máy chủ tín hiệu EasyRTC, nó có những tham số đầu vào sau:
applicationName: là một chuỗi để xác định tên của ứng dụng, mỗi ứng dụng có một tên khác nhau vì vậy sẽ có thể có danh sách ngƣời dùng khác nhau.
LoginSuccess(easyrtcId): là một hàm đƣợc gọi khi kết nối thành công. easyrtcId là một định danh duy nhất cho ngƣời dùng kết nối.
LoginFailure(errorCode, message): là một hàm đƣợc gọi khi kết nối không thành công. ErorCode là mã lỗi đƣợc trả về, và message là một chuỗi mô tả lỗi trả về.
Chúng ta phải kết nối thành công trƣớc khi thực hiện gọi một ngƣời dùng nào khác.
Hàm convertListToButtons này sẽ đƣợc gọi khi bất kỳ một ngƣời dùng nào khác kết nối hoặc ngắt kết nối và nó cũng đƣợc gọi ngay sau khi gọi hàm easyrtc.connect( ). Hàm này có nhiệm vụ lấy danh sách tất cả các kết nối hiện tại
và gán thông tin cho client. Hàm convertListToButtons có mã nguồn nhƣ sau:
//Lấy thẻ có tên otherClients (phía người học)
var otherClientDiv = document.getElementById('otherClients'); //Lấy thẻ có tên admin (phía cán bộ phòng Đào tạo)
var otherAdminDiv = document.getElementById('admin'); //Duyệt tất cả các kết nối hiện có và gán thông tin cho client for(var easyrtcid in occupants) {
var button = document.createElement("button"); if(otherClientDiv){
if(easyrtc.idToName(easyrtcid) == "Cán bộ tư vấn"){
var label = document.createTextNode("Cán bộ hỗ trợ phòng Đào tạo"); button.appendChild(label);
otherClientDiv.appendChild(button); }
}
if(otherAdminDiv){
var label = document.createTextNode("Kết nối với người học "+easyrtc.idToName(easyrtcid)); button.appendChild(label); button.className = 'btn btn-primary'; otherAdminDiv.appendChild(button); } } 3.4.3. Xây dựng hàm performCall
Để thực sự bắt đầu một cuộc gọi peer-to-peer, chúng ta cần gọi phƣơng thức easyrtc.call( ) với các tham số đầu vào nhƣ sau:
easyrtcid: một định danh duy nhất cho ngƣời dùng cần kết nối tới.
function successCB: hàm callback đƣợc gọi khi khởi tạo cuộc gọi thành công.
không thành công.
function acceptedCB(accepted,easyrtcid): hàm callback đƣợc gọi khi cuộc gọi đƣợc phía bên kia chấp nhận hay không.
Hàm easyrtc.call( ) đƣợc thực hiện nhƣ sau:
var acceptedCB = function(accepted, easyrtcid) {
//Nếu cán bộ phòng Đào tạo không đồng ý kết nối thì hiện thông báo cho người học biết.
if( !accepted ) {
showMessage("Xin lỗi, hiện tại cán bộ hỗ trợ đang bận, bạn có thể gọi vào lúc khác.");
} };
var successCB = function() {
if( easyrtc.getLocalStream()) { setUpMirror();
} };
var failureCB = function() {};
easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
Hàm easyrtc.getLocalStream( ) dùng để truy cập webcam và microphone. Nếu truy cập webcam thành công, video stream truy xuất từ webcam sẽ đƣợc gắn vào thẻ video (selfVideo) mà bạn đã chèn vào trang HTML5 bằng lời gọi hàm easyrtc.setVideoObjectSrc( ).
easyrtc.setVideoObjectSrc(document.getElementById("selfVideo"),"");
Tiếp đến, chúng ta cần thiết lập một hàm callback để gắn dòng media trả về từ ngƣời đƣợc gọi vào thẻ video (callerVideo).
easyrtc.setStreamAcceptor( function(callerEasyrtcid, stream) { var video = document.getElementById(„callerVideo‟); easyrtc.setVideoObjectSrc(video, stream);
Chúng ta cũng cần một hàm callback để thực hiện xóa dòng media ra khỏi thẻ video khi dòng media đóng lại.
easyrtc.setOnStreamClosed( function (callerEasyrtcid) {
easyrtc.setVideoObjectSrc(document.getElementById(„callerVideo‟), ""); });
3.4.4. Xây dựng hàm gửi tin nhắn
Khi kênh dữ liệu đƣợc mở ra, chúng ta có thể gửi tin nhắn bằng cách gọi hàm sau:
function sendStuffWS(otherEasyrtcid) {
var text = document.getElementById('sendMessageText').value; if(text.replace(/\s/g, "").length === 0) {
return; }
easyrtc.sendDataWS(otherEasyrtcid, "message", text); }
3.5. CHẠY THỬ VÀ ĐÁNH GIÁ ỨNG DỤNG
Trong phần này chúng tối tiến hành chạy thử ứng dụng phòng Đào tạo trực tuyến và đánh giá tính hiệu quả của ứng dụng đƣợc xây dựng.
3.5.1 Chạy thử ứng dụng
Sau khi cán bộ phòng Đào tạo đăng nhập vào hệ thống quản lý của website đã đƣợc tích hợp ứng dụng hỗ trợ trực tuyến, họ có thể nhận đƣợc các cuộc gọi đến từ ngƣời học. Ngƣời học truy cập vào trang web quản lý đào tạo và tìm đến mục hỗ trợ trực tuyến để kết nối với cán bộ phòng Đào tạo.
Hình 3.9. Người học xem các thông tin trên trang web quản lý đào tạo và tìm đến menu hỗ trợ trực tuyến.
Ngƣời học nhập vào tên của mình sau đó bấm vào nút “Connect” để khởi tạo kết nối.
Ngƣời học bấm vào nút “Cán bộ hỗ trợ tƣ vấn” để gửi cuộc gọi đến cán bộ phòng Đào tạo.
Hình 3.11. Người học bấm vào nút kết nối với cán bộ hỗ trợ tư vấn để được hỗ trợ
Phía trình duyệt của cán bộ phòng Đào tạo sẽ hiển thị lên một thông báo “Có một cuộc gọi đến từ Nguyễn Văn Nghĩa bạn có chấp nhận không”.
Hình 3.12. Cán bộ tư vấn nhận được yêu cầu kết nối từ người học và đồng ý kết nối
Nếu cán bộ phòng Đào tạo không đồng ý kết nối thì trình duyết của ngƣời học sẽ nhận đƣợc một thông báo “Xin lỗi, hiện tại cán bộ tƣ vấn đang bận, bạn có thể gọi vào lúc khác”.
Hình 3.13. Người học nhận phản hồi không đồng ý kết nối từ cán bộ phòng đào tạo
Nếu cán bộ phòng Đào tạo đồng ý kết nối, thì chƣơng trình sẽ thực việc gán audio video stream của ngƣời học lên trình duyệt của cán bộ phòng Đào tạo.
Đồng thời chƣơng trình sẽ thực việc gán audio video stream của cán bộ phòng Đào tạo lên trình duyệt của ngƣời học.
Hình 3.15. Giao diện của người học
Lúc này cán bộ phòng Đào tạo và ngƣời học có thể nói chuyện, chia sẻ webcam và gửi tin nhắn với nhau.
Hình 3.16. Cán bộ tư vấn và người học nói chuyện, chia sẻ webcam và gửi tin nhắn với nhau
3.5.2. Đánh giá hiệu quả của ứng dụng
a. Ưu điểm
- Qua việc tích hợp và chạy thử ứng dụng hỗ trợ trực tuyến chúng tôi nhận thấy việc tích hợp ứng dụng hỗ trợ trực tuyến vào một website rất nhanh chóng. Ngƣời học có thể nhanh chóng kết nối đƣợc với cán bộ phòng Đào tạo ngay trong trình duyệt web, mà không cần phải sử dụng đến một plugin hoặc một ứng dụng chat độc lập nhƣ Skype hoặc Yahoo messenger.
- Ngƣời học và cán bộ phòng Đào tạo vẫn có thể thực hiện các cuộc đàm thoại, các cuộc gọi video, chat và chia sẻ file nhƣ khi sử dụng ứng dụng chat độc lập nhƣ Skype hoặc Yahoo.
b. Nhược điểm
Nhƣ vậy ứng dụng đã đáp ứng đƣợc những yêu cầu đƣợc đề ra ở phần phân tích hệ thống, tuy nhiên vẫn còn một số những hạn chế sau đây:
- Thiết kế hệ thống hiện tại chỉ cho phép một cán bộ phòng Đào tạo hỗ trợ một ngƣời học tại một thời điểm.
- Ứng dụng chƣa cho phép lựa chọn hỗ trợ ngƣời học chỉ thông qua tin nhắn văn bản. Hiện tại, ứng dụng luôn sử dụng microphone và webcam khi kết nối.
KẾT LUẬN
Trong luận văn này, chúng tôi đã tìm hiểu về kiến trúc, các giao thức, các API,… của WebRTC. Đồng thời, chúng tôi đã tìm hiểu về một framework sử dụng WebRTC là EasyRTC framework, nó giúp các nhà phát triển ứng dụng sử dụng WebRTC đƣợc dễ dàng hơn. Chúng tôi cũng đã phân tích, thiết kế và cài đặt một ứng dụng hỗ trợ trực tuyến sử dụng WebRTC và EasyRTC framework để tích hợp vào các website quản lý đào tạo của trƣờng Đại học Sƣ phạm – Đại học Đà Nẵng nhằm phục vụ cho việc hỗ trợ ngƣời học.
Chúng tôi nhận thấy mặc dù WebRTC vẫn còn tiếp tục đƣợc phát triển và chƣa phải là một phiên bản chính thức, nhƣng việc sử dụng WebRTC đã tỏ ra rất hiệu quả trên các ứng dụng web. Nó đã cải thiện đƣợc hiệu năng, giảm độ trễ, tốc độ truyền tải để đáp ứng nhu cầu của ngƣời dùng bây giờ và sau này.
Nhƣ vậy, WebRTC đã mở ra một kỷ nguyên mới cho ngành công nghiệp viễn thông thời gian thực, các nhà phát triển khắp có thể tự mình tạo ra một ứng dụng RTC mà trƣớc đó công nghệ RTC chỉ có thể đƣợc phát triển bởi các tập đoàn lớn có đủ kinh phí, khả năng chi trả giấy phép đắt đỏ của các plugin kèm theo. WebRTC mở ra một làn sóng mới cho các ứng dụng phát triển trên đa nền tảng Windows, Linux, Mac, Mobie OS … và đặc biệt là đa thiết bị nhƣ Smartphone hiện đang thịnh hành và tƣơng lai có thể là Smart watch hay tivi hiện đại sử dụng hệ điều hành.
Để hƣớng tới việc phát triển thêm ứng dụng của mình, chúng tôi sẽ cố gắng xây dựng và nâng cấp ứng dụng có thể hỗ trợ một lúc nhiều ngƣời học hơn. Bên cạnh đó chúng tôi sẽ phát triển ứng dụng có thể tùy chọn hỗ trợ dƣới dạng tin nhắn hoặc gọi audio video giống nhƣ các ứng dụng chat Skype hay Yahoo messenger.
TÀI LIỆU THAM KHẢO
[1] Alan B. Johnston and Daniel C. Burnett (2013), WebRTC: APIs and
RTCWEB Protocols of the HTML5 Real-Time Web, Digital Codex
LLC, pp. 10, 124, 128, 132.
[2] Andrii Sergiienko (2014), WebRTC Blueprints, Packt Publishing, pp. 42. [3] Ilya Grigorik (2013), High Performance Browser Networking, O'Reilly
Media, pp. 310-312.
[4] Doug Pelton (2013), EasyRTC Framework Tutorial, http://easyrtc.com/docs/guides/easyrtc_client_tutorial.php
[5] E. Rescorla (2013), Security Considerations for RTC- Web, http://tools.ietf.org/html/draft-ietf-rtcweb-security.
[6] Justin Uberti and Sam Dutton (2013), WebRTC General Overview, https://webrtc.org/architecture/
[7] J. Rosenberg and H. Schulzrinne (2012), An Offer/Answer Model with the
Session Description Protocol (SDP), http://tools.ietf.org/html/rfc3264.
[8] Margaret Rouse (2008), Real-time communications (RTC),
http://searchunifiedcommunications.techtarget.com/definition/real-time- communications
[9] Sam Dutton (2013), Getting Started with WebRTC, http://www.html5rocks.com/en/tutorials/webrtc/basics/.
[10] Sean Turner, Ted Hardie and Cullen Jennings (2014), Rtcweb
Status Pages, http://tools.ietf.org/wg/rtcweb/charters.
[11] TokBox, “WebRTC‟s Bright Future”, http://tokbox.com/about- webrtc/infographic.
[12] Wikipedia,“Interactive Connectivity Establishment”,
http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment. [13] Wikipedia, “STUN server”, http://vi.wikipedia.org/wiki/STUN.