Video Conference

1
Nội dung
 Bắt đầu
 Càiđặt phần cứng và phần mềm
 Tạo môi trường phát triển

 Tổng quát các tác vụ cho ứng dụng

2
Nội dung
 Kiến trúc Flash Media Server (FMS)
 Kiến trúc FMS
 Luồng (stream) và đối tượng chia sẻ (shared
object)
 Kết nối tới nguồn dữ liệu bên ngoài

 Workflow để tạo và triển khai ứng dụng

 Các dòng ứng dụng

3
Nội dung
 Sử dụng các lớp Media
 Các lớp FMS
 Lớp Application

 Lớp Camera

 Lớp Client

 Lớp Microphone

 Lớp NetStream

 Lớp SharedObject

 Lớp Video

4
Nội dung
 Dự án hiện tại (abvChat)
 Sơ lược dự án
 Hiện thực

 Các vấn đề còn tồn tại

5
Bắt đầu
 Mục đích:
 Giới thiệu các bước ban đầu trước khi phát triển ứng
dụng với FMS.
 Mô tả cách thiết lập môi trường phát triển và triển khai
ứng dụng.
 Cài đặt phần cứng và phần mềm
 Flash 8 Professional
 Flash Media Server
 Flash Player
 Camera và Microphone

6
Bắt đầu
 Tạo môi trường phát triển
 Bảo đảm server đang chạy
 Xác định địa chỉ URI của server
new_nc.connect("rtmp:/doc_record/room_01");
new_nc.connect("rtmp://myServer.myDomain.com/doc
_record/room_01");
 Chỉ định các dạng file để publish
 Viết code Action Script client-side

 Viết code Action Script server-side

7
Bắt đầu
 Tổng quát các tác vụ cho ứng dụng
1. Xác định tên ứng dụng và đăng ký ứng dụng với server:
tạo thư mục với tên ứng dụng trong thư mục
applications của FMS.
2. Tạo file FLA và chứa đoạn code sau:
my_nc = new NetConnection();
my_nc.connect("rtmp://myDomain.com/registered_app_nam
e");
3. Lưu file FLA.
4. Đặt file server-side Action Script (main.asc hoặc
my_app.asc) vào thư mục đã đăng ký.
5. Publish SWF file.
8
Kiến trúc Flash Media Server (FMS)

 Kiến trúc FMS

 HTTP

 RTMP (Real Time Message

Protocol)
 Nhiều người dùng có thể kết
nối đến cùng một ứng dụng
trên server.

9
Kiến trúc Flash Media Server (FMS)
 Luồng (stream) và đối tượng chia sẻ (shared
object)
 Stream là một luồng các message dữ liệu, audio, video
được đồng bộ theo thời gian.
 Stream khi ghi sẽ lưu dưới định dạng file .FLV

10
Kiến trúc Flash Media Server (FMS)

 Luồng (stream) và đối tượng chia sẻ (shared

object)
 Shared Object: có 2 loại cơ bản: local và remote.
 Local shared object: dùng để chứa thông tin cục bộ và có
thể lưu dữ liệu xuống máy tính người dùng.
 Remote shared object: lưu thông tin chia sẻ giữa các
client và có thể đồng bộ giữa các client.

11
Kiến trúc Flash Media Server (FMS)

 Kết nối tới nguồn dữ liệu bên ngoài

 Web service
 Database

 Các ứng dụng FMS khác

12
Kiến trúc Flash Media Server (FMS)
 Workflow để tạo và
triển khai ứng dụng
 Client component:
chứa giao diện người
dùng và Action Script
để kết nối đến FMS.
 Server component: có
file ASC giúp điều
khiển thông tin chia
sẻ, logic tương tác
giữa các client và
giao tiếp với các tài
nguyên bên ngoài.

13
Kiến trúc Flash Media Server (FMS)

 Các dòng ứng dụng

 Dòng kết nối

14
Kiến trúc Flash Media Server (FMS)

 Các dòng ứng dụng

 Gọi phương thức của server từ client

15
Kiến trúc Flash Media Server (FMS)

 Các dòng ứng dụng

 Gọi phương thức của client từ server

16
Kiến trúc Flash Media Server (FMS)

 Các dòng ứng dụng

 Dòng đối tượng chia sẻ

17
Sử dụng các lớp Media
 Các lớp FMS  Các lớp server-side
 Lớp Application
 Các lớp client-side
 Lớp Client
 Lớp Camera
 Lớp File
 Lớp Microphone
 Lớp LoadVars
 Lớp NetConnection
 Lớp NetConnection
 Lớp NetStream  Lớp SharedObject
 Lớp SharedObject  Lớp Stream
 Lớp Video  Lớp WebSevice
 Lớp XML
 Lớp XMLSocket
 Lớp XMLStreams
18
Sử dụng các lớp Media
 Lớp Application
 Chấp nhận và từ chối kết nối từ phía client
 Tạo các hàm được gọi khi ứng dụng bắt đầu hoặc kết
thúc, khi client kết nối hoặc ngắt kết nối.
 Các phương thức cơ bản:
 application.onAppStart
 application.onConnect
 application.acceptConnection
 applicaiton.rejectConnection
 application.onDisconnect

19
Sử dụng các lớp Media
 Lớp Camera
 Lấydữ liệu từ webcam để gắn vào đối tượng
NetStream. Từ đây có thể truyền dữ liệu lên
server và ghi dữ liệu. Ta cũng có thể thiết lập
chất lượng cho webcam.
my_cam = Camera.get();
my_cam.setQuality(bandwidthSpeed,quality) ;
nsOut = new NetStream(nc);
nsOut.attachVideo(my_cam);

20
Sử dụng các lớp Media
 Lớp Client
 Khigắn một phương thức vào đối tượng Client
bên phía server, phương thức này sẽ được gọi
tương ứng bên phía client.

21
Sử dụng các lớp Media
 Lớp Microphone
 Lấy dữ liệu từ microphone để gắn vào đối
tượng NetStream. Từ đây có thể truyền dữ liệu
lên server và ghi dữ liệu. Ta cũng có thể thiết
lập điều chỉnh cho microphone.
myMic = Microphone.get();
myMic.setRate(22);
nsOut = new NetStream(nc);
nsOut.attachAudio(myMic);

22
Sử dụng các lớp Media
 Lớp NetStream
 Chứa dữ liệu video, audio và có thể chứa nhiều
loại dữ liệu khác. Dữ liệu này có thể được
publish qua mạng, ghi xuống đĩa cứng, và ta có
thể thiết lập thời gian buffer trước khi chơi.
nsOut = new NetStream(nc);
nsOut.attachVideo(Camera.get());
nsOut.attachAudio(Microphone.get());
nsOut.publish("user"+this.myID);

23
Sử dụng các lớp Media
 Lớp SharedObject
 Đối tượng SharedObject được sử dụng để lưu
giữ thông tin chia sẻ giữa các client và server.
 Phương thức để đồng bộ giữa các client.

SharedObject.onSync
 Sử dụng các slot để lưu giữ thông tin chia sẻ.
SharedObject.data

24
Sử dụng các lớp Media
 Lớp Video
 Là
một đối tượng đồ họa giúp hiển thị dữ liệu
audio, video đến người dùng.
nsIn = new NetStream(nc);
yourVideo.attachVideo(nsIn);

25
Dự án hiện tại: abvChat
 Sơ lược dự án
 Là một ứng dụng web thuần túy
 Có thể nhận được webcam

 Người dùng có thể bắt đầu chát video mà

không cần phải đăng ký (chỉ thông báo qua
email cho người muốn chát)
 Có thể điều chỉnh được âm thanh, camera

 Có thể lưu được message video (âm thanh,

hình ảnh)
26
Dự án hiện tại: abvChat
 Login:

27
Dự án hiện tại: abvChat
 Invite:

28
Dự án hiện tại: abvChat
 Chat

29
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía server
 application.onAppStart = function();
 application.onConnect = function(client, name);

 application.onDisconnect = function(client);

30
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
function showScreen(name) {
//Hiển thị các đối tượng giao diện đồ họa tương
//ứng với từng trạng thái của chương trình. Ở
//đây có 3 trạng thái: Login, Invite và Chat.
}

31
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
function onActivate() {
//Thiết lập các giá trị cấu hình ban đầu như
//tên server sẽ kết nối đến, tên ứng dụng…
}

32
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.login_btn.onRelease = function() {
//Xử lí sự kiện nút nhấn Login | Stop | Logout
//Kết nối đến server nếu là nút Login, ngừng
//chát đồng bộ lại các client nếu là nút Stop và
//ngắt kết nối nếu là nút Logout
}

33
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
function connectToFlashCom(bool) {
//Kết nối đến server nếu bool == true
//và ngắt kết nối đến server nếu bool == false
}

34
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
nc.onStatus = function(info) {
//Xử lí sự kiện trả về của hàm
//kết nối đến server
}

35
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
nc.setID = function(id) {
//Cập nhật lại ID cho client
//Hàm này được gọi bởi server
}

36
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
function connectSO() {
//Kết nối đến đối tượng chia sẻ
}

37
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.so.onSync = function(list) {
//Hàm đồng bộ lại các client khi đối tượng
//chia sẻ có thay đổi (người dùng login hay
//logout)
}

38
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.updateList = function() {
//Hàm cập nhật lại danh sách các người dùng
//đang online
}

39
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.onSlotChanged = function(id) {
//Hàm xử lý đồng bộ khi trên đối tượng chia sẻ
//có một client nào đó thay đổi thuộc tính
}

40
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.onSlotDeleted = function(id) {
//Hàm xử lý đồng bộ khi trên đối tượng chia sẻ
//có một client nào đó Logout
}

41
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.invite_btn.onRelease = function() {
//Hàm xử lý sự kiện cho nút nhấn Invite
}

42
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
listListener.change = function(evt_obj:Object) {
//Hàm xử lý sự kiện cho list các user
}

43
Dự án hiện tại: abvChat
 Hiện thực:
 Các hàm bên phía client:
this.myrecord_btn.onRelease = function() {
//Hàm xử lý sự kiện cho nút nhấn record
}

44
Dự án hiện tại: abvChat
 Các chức năng đã hiện thực
 Đã nhận được webcam và microphone.
 Có thể chát video giữa 2 người

45
Dự án hiện tại: abvChat
 Các vấn đề còn tồn tại
 Điều chỉnh âm thanh và camera
 Ghi message video xuống đĩa

 Gởi mail

46
Tham khảo
 Links:
 http://www.adobe.com/devnet/flashmediaserver
/
 http://livedocs.adobe.com/flex/201/langref/flash/
net/FileFilter.html

47