Phần sau đây hƣớng dẫn cách viết một ứng dụng WebRTC đơn giản với EasyRTCframework, bằng cách tạo một trang web cho phép hai ngƣời có thể kết nối và nói chuyện với nhau. Chú ý, phần sau đây không bao gồm toàn bộ các API của EasyRTC. Chúng ta có thể xem toàn bộ các API của EasyRTC tại địa chỉ http://easyrtc.com/docs/.
Tạo một trang web demo.html, trong phần <head> của trang này, chúng ta thêm liên kết đến hai file JavaScript củaEasyRTC “socket.io.js” và “easyrtc.js”, đồng thời nó cũng liên kết đến file JavaScript của chúng ta sẽ tạo trong phần dƣới đây "mylogic.js", file này sẽ chứa toàn bộ logic của ứng dụng [20].
<head>
<title>WebRTC Demo</title>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/easyrtc/easyrtc.js"></script> <script type="text/javascript" src="mylogic.js"></script>
</head>
Chúng ta thêm hai thẻ <video> vào trong phần <body> của trang web. Một thẻ <video> để hiển thị video từ máy ảnh của máy tính cục bộ, một thẻ <video> để hiển thị video từ một máy kết nối đến.
<body>
<video style="float:left" id="self" width="300" height="200" muted="muted"></video>
<div style="position:relative;float:left;width:300px"> <video id="caller" width="300" height="200"></video> </div>
</body>
Nếu chúng ta không cho lựa chọn “muted” trong thẻ video “self”, nó sẽ bị lặp âm thanh từ loa của chúng ta tới microphone.
Bây giờ chúng ta bắt đầu viết một số logic ứng dụng trong file “mylogic.js”, bắt đầu với một hàm khởi tạo mà nó sẽ đƣợc gọi khi trang web đƣợc mở lên.
27
Trách nhiệm chính của hàm khởi tạo này là gọi hàm easyrtc.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. successCallback (easyrtcId, roomOwner): 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. roomOwner là true nếu ngƣời dùng tạo ra phòng để kết nối đến.
errorCallback (errorCode, errorText): là một hàm đƣợc gọi khi kết nối không thành công. errorCode là mã lỗi đƣợc trả về, và errorText 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 gọi một ngƣời dùng nào khác.
Trong hàm khởi tạo, chúng ta cũng sẽ khai báo hàm callback để biết đƣợc ai vừa kết nối vào máy chủ:
easyrtc.setRoomOccupantListener( roomListener)
Hàm callback roomListener 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ào ứng dụng “Company_Chat_Line”, và nó cũng đƣợc gọi ngay sau khi gọi hàm easyrtc.connect( ).
Hàm khởi tạo sẽ trở thành nhƣ sau: function my_init() {
easyrtc.setRoomOccupantListener( roomListener); var connectSuccess = function(myId) {
console.log("My easyrtcid is " + myId); }
var connectFailure = function(errorCode, errText) { console.log(errText);
}
easyrtc.initMediaSource(
function(){ // success callback
var selfVideo = document.getElementById("self");
28 easyrtc.connect("Company_Chat_Line", connectSuccess, connectFailure); }, connectFailure ); }
Hàm callback roomListener có hai tham số đầu vào: Tên phòng mà ngƣời dùng kết nối đến.
Danh sách các định danh của ngƣời dùng đã kết nối vào cùng một ứng dụng. Trong ví dụ của chúng ta, hàm callback roomListener sẽ duy trì một danh sách các nút để gọi những ngƣời khác kết nối tới ứng dụng "Company_Chat_Line". Chúng ta sẽ thêm một <div> vào trong phần<body> để chứa các nút này.
<body> ...
<div id="otherClients"></div> ...
</body>
Hàm callback roomListener đƣợc viết nhƣ sau: function roomListener(roomName, otherPeers) {
var otherClientDiv = document.getElementById('otherClients'); while (otherClientDiv.hasChildNodes()) {
otherClientDiv.removeChild(otherClientDiv.lastChild); }
for(var i in otherPeers) {
var button = document.createElement('button'); button.onclick = function(easyrtcid) {
return function() {
performCall(easyrtcid); }
29 label = document.createTextNode(i); button.appendChild(label); otherClientDiv.appendChild(button); } }
Để thực sự bắt đầu một cuộc gọi đến một ngƣời, 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 successCallback(easyrtcid): hàm callback đƣợc gọi khi khởi tạo cuộc gọi thành công.
function errorCallback(errorCode, errorText): hàm callback đƣợc gọi khi khởi tạo cuộc gọi không thành công.
function accepted(wasAccepted,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: function performCall(easyrtcid) { easyrtc.call(
easyrtcid,
function(easyrtcid) { console.log("completed call to " + easyrtcid);}, function(errorCode, errorText) { console.log("err:" + errorText);}, function(accepted, bywho) {
console.log((accepted?"accepted":"rejected")+ " by " + bywho); }
); }
Chú ý lời gọi đến easyrtc.getLocalStream( ) và easyrtc.setVideoObjectSrc( ). Lời gọi thứ nhất lấy một đối tƣợng media địa phƣơng cho máy ảnh và microphone khi lời gọi đến hàm easyrtc.initMediaSource thực hiện thành công. Lời gọi hàm thứ hai gắn một thẻ video vào một đối tƣợng dòng media. Đặt lại với nhau, chúng cung cấp một hàm gƣơng, cho phép ngƣời dùng theo dõi hình ảnh của mình trôngnhƣ thế nào.
30
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 caller.
easyrtc.setStreamAcceptor( function(callerEasyrtcid, stream) { var video = document.getElementById('caller');
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('caller'), ""); });