CHƢƠNG 3 XÂY DỰNG ỨNG DỤNG HỖ TRỢ TRỰC TUYẾN
3.4. CÀI ĐẶT ỨNG DỤNG
3.4.1. Chuẩn bị môi trƣờng và công cụ phát triển
Để tiến hành phát triển ứng dụng WebRTC thì chúng ta cần phải chuẩn bị môi trƣờng và cài đặt các cơng cụ sau đây:
1. Trình duyệt web: Bạn cần cài đặt 1 trình duyệt web có hỗ trợ WebRTC.
2. Mơi trƣờng lập trình (dùng Node.js):
Có thể tóm tắt một vài điều về Node.js nhƣ sau:
Node.js cho phép lập trình viên xây dựng các ứng dụng có tính mở rộng cao sử dụng Javascript trên server.
Có khả năng xử lý hàng ngàn kết nối đồng thời với chi phí tối thiểu trên một tiến trình đơn luồng.
Thống nhất cú pháp lập trình JavaScript cả Client lẫn Server.
Sau khi cài đặt xong Node.js thì chƣơng trình npm cũng đồng thời đã đƣợc cài đặt trên máy của bạn. Bạn cần cài đặt thêm các module cần thiết socket.io và node-static. Cài đặt dễ dàng với npm bằng cú pháp lệnh sau trên Terminal của bạn.
npm install socket.io
Socket.io giúp tạo ra kết nối hai chiều trên một kết nối socket giữa browser client và server.
npm install node-static
Node-static giúp tạo ra một máy chủ HTTP đơn giản, cung cấp các file tĩnh để client truy cập thơng qua trình duyệt Web.
3. EasyRTC framework:
Để xây dựng ứng dụng hỗ trợ trực tuyến, chúng tôi đã sử dụng EasyRTC framework, đây là một framework đƣợc xây dựng trên WebRTC và nó có các API để giúp các nhà phát triển sử dụng WebRTC đƣợc dễ dàng hơn. Ngoài ra, để xây dựng giao diện cho ứng dụng, chúng tôi lựa chọn sử dụng Bootstrap framework, đây là một framework về HTML, CSS và JavaScript cho phát triển các ứng dụng trên nền web.
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); }