1 LỜI CAM ĐOAN Tôi xin cam đoan rằng đây là công trình nghiên cứu của riêng tôi. Các số liệu và kết quả nghiên cứu trong luận văn này là trung thực vàkhông sao chép của bất kỳ ai. Các thông tin trích dẫn trong luận văn đã đƣợc chỉ rõ nguồn gốc. Hà Nội, ngày tháng năm 2014 Học viên Khúc Ngọc Hiệp 2 TÓM TẮT WebRTC là một nỗ lực để xây dựng một framework mở có khả năng giao tiếp audio và video thời gian thực, nó có thể biến các trình duyệt web thành một nền tảng cho giao tiếp giữa ngƣời với ngƣời. Giao tiếp thời gian thực trong trình duyệt web đã có trƣớc đây tuy nhiênchúng ta phải cài đặt phần mềm của bên thứ ba lên trình duyệt web. WebRTC mang lại hỗ trợ giao tiếp thời gian thực từ ngay bên trong các trình duyệt web và các nhà phát triển web có thể sử dụng một cách tự do thông qua các JavaScript API tiêu chuẩn. Điều này mang lại giao tiếp thời gian thực nhƣ là một tính năng cho web, có thể thúc đẩy sự đổi mới hơn nữa. Luận văn này nghiên cứu chuyên sâu về WebRTC, các kiến trúc và mô hình trong WebRTC, các giao thức và kỹ thuật đƣợc sử dụng trong WebRTC, các API của WebRTC và các vấn đề về bảo mật và tính riêng tƣ đƣợc giải quyết trong WebRTC. Dựa trên kết quả nghiên cứu về lý thuyết cho WebRTC và hiện trạng của hệ thống hỗ trợ khách hàng trực tuyến của các website thƣơng mại điện tử ở Việt Nam phải sử dụng các ứng dụng chat bên ngoài nhƣ Yahoo messenger và Skype, chúng tôi đã tiến hành xây dựng một ứng dụng web chat thời gian thực sử dụng WebRTC để cải tiến hệ thống hỗ trợ khách hàng này. Khách hàng sẽ không phải cài đặt thêm một ứng dụng hoặc plugin nào để có thể chat video, gửi tin nhắn và gửi file với nhân viên hỗ trợ khách hàng ngay trên trình duyệt web. Chúng tôi thấy rằng WebRTC là một công nghệ rất khả thi, và rất thích hợp cho trƣờng hợp giao tiếp một một từ trình duyệt đến trình duyệt. Mặc dù chúng tôi phát hiện ra một số thách thức chƣa đƣợc giải quyết, chúng tôi không thấy bất kỳ trở ngại không thể vƣợt qua nào sẽ ngăn cản việc chấp nhận WebRTC. WebRTC mở ra những cơ hội cho các công ty sẽ sử dụng nó trực tiếp để cung cấp một dịch vụ giao tiếp thời gian thực trên web, nó cũng tạo ra không gian cho các nhà cung cấp PaaS WebRTC trên thị trƣờng. Thêm vào đó, WebRTC cho phép kết nối với các hệ thống cũ nhƣ PSTN hay PLMN, mở ra cơ hội cho các nhà cung cấp viễn thông để khám phá tạo ra cách thức truyền thông mới cho khách hàng của họ. 3 MỤC LỤC LỜI CAM ĐOAN 1 TÓM TẮT 2 MỤC LỤC 3 DANH SÁCH HÌNH VẼ 5 DANH SÁCH BẢNG 5 BẢNG TỪ VIẾT TẮT 6 MỞ ĐẦU 7 CHƢƠNG 1: GIỚI THIỆU VỀ TRUYỀN THÔNG WEB THỜI GIAN THỰC - WEBRTC 9 1.1 Ngắn gọn về lịch sử của WebRTC 9 1.2 Kiến trúc của WebRTC 10 1.3 Chồng giao thức trong WebRTC 13 1.4 Các API của WebRTC 19 1.5 Kênh báo hiệu trong WebRTC 20 1.6 Bảo mật trong WebRTC 21 CHƢƠNG 2: GIỚI THIỆU VỀ EASYRTC FRAMEWORK 23 2.1 Giới thiệu về EasyRTC framework 23 2.2 Cài đặt và chạy máy chủ EasyRTC 24 2.3 Sử dụng EasyRTC 26 2.4 Một số API tiện ích khác của EasyRTC 30 CHƢƠNG 3: SỬ DỤNG EASYRTC FRAMEWORK ĐỂ XÂY DỰNG ỨNG DỤNG WEB CHAT THỜI GIAN THỰC 33 3.1 Phân tích hệ thống 33 3.1.1 Mục tiêu tổng thể của ứng dụng web chat thời gian thực 33 3.1.2 Thực trạng của hệ thống tư vấn bán hàng trực tuyến 33 3.1.3 Phân tích yêu cầu của ứng dụng 39 3.2 Thiết kế ứng dụng 39 3.2.1 Biểu đồ trường hợp sử dụng 39 3.2.2 Biểu đồ tuần tự 43 3.2.3 Biểu đồ lớp 45 3.2.4 Thiết kế giao diện 46 3.3 Thực hiện ứng dụng 47 4 3.4 Chạy thử và đánh giá ứng dụng 50 3.4.1 Chạy thử ứng dụng 51 3.4.2 Đánh giá ứng dụng 57 KẾT LUẬN 58 TÀI LIỆU THAM KHẢO 59 5 DANH SÁCH HÌNH VẼ Hình 1: Kiến trúc tổng thể của WebRTC [3]. 11 Hình 2: Kiến trúc bên trong của WebRTC [8]. 12 Hình 3: Chồng giao thức trong WebRTC [1] 14 Hình 4: Kênh báo hiệu trong WebRTC. 21 Hình 5: Góc hỗ trợ khách hàng trực tuyến trên website trananh.vn. 34 Hình 6: Góc hỗ trợ khách hàng trực tuyến trên website mediamart.vn. 34 Hình 7: Góc hỗ trợ khách hàng trực tuyến trên website nama.vn. 35 Hình 8: Lựa chọn hỗ trợ thông qua Skype trên website trananh.vn. 36 Hình 9: Trình duyệt yêu cầu khách hàng cho phép bật ứng dụng Skype trên máy tính. 36 Hình 10: Màn hình đăng nhập Skype trên máy tính. 37 Hình 11: Màn hình đăng nhập Skype trên máy tính - tiếp. 37 Hình 12: Bắt đầu chat với nhân viên hỗ trợ khách hàng. 38 Hình 13: Biểu đồ trƣờng hợp sử dụng. 40 Hình 14: Biểu đồ tuần tự. 45 Hình 15: Biểu đồ lớp. 46 Hình 16: Thiết kế wireframe cho ứng dụng web chat. 47 Hình 17: Nhân viên mở trang hỗ trợ khách hàng bên trong phần quản trị của website. 51 Hình 18: Nhân viên hỗ trợ khách hàng đăng nhập vào phòng hỗ trợ mà họ chịu trách nhiệm. 52 Hình 19: Khách hàng xem sản phẩm và tìm đến góc hỗ trợ khách hàng. 52 Hình 20: Khách hàng lựa chọn Gọi nhân viên hỗ trợ "Kinh doanh điện thoại". 53 Hình 21: Khách hàng lựa chọn kết nối với nhân viên hỗ trợ sau khi đã đăng nhập. 53 Hình 22: Trình duyệt yêu cầu quyền truy cập tới máy ảnh và microphone 54 Hình 23: Nhân viên hỗ trợ nhận đƣợc yêu cầu kết nối từ khách hàng và đồng ý kết nối. 54 Hình 24: Nhân viên hỗ trợ và khách hàng nói chuyện, chia sẻ webcam và gửi tin nhắn với nhau. 55 Hình 25: Gửi file khi đang nói chuyện. 55 Hình 26: Nhận file và lƣu lại trên máy tính. 56 Hình 27: Ứng dụng chạy trên điện thoại Android với trình duyệt Chrome cho Android. 56 DANH SÁCH BẢNG Bảng 1: Bảng mô tả các trƣờng hợp sử dụng. 43 6 BẢNG TỪ VIẾT TẮT Từ viết tắt Giải nghĩa WebRTC Web Real-Time Communications PaaS Platform as a Service PSTN Public Switched Telephone Network PLMN Public Land Mobile Network WWW World Wide Web SIP Session Initiation Protocol VoIP Voice over Internet Protocol IETF Internet Engineering Task Force W3C World Wide Web Consortium TCP Transmission Control Protocol UDP User Datagram Protocol STUN Session Traversal Utilities for NAT TURN Traversal Using Relays around NAT SDP Session Description Protocol DTLS Datagram Transport Layer Security SCTP Stream Control Transport Protocol SRTP Secure Real-Time Transport Protocol ICE Interactive Connectivity Establishment 7 MỞ ĐẦU World Wide Web (WWW hay Web) là hệ thống đƣợc biết đến rộng rãi nhất đƣợc truy cập qua Internet. Hơn nữa, đối với đa số ngƣời sử dụng Internet, từ "Internet" là tƣơng đƣơng với Web. Đối với họ, Internet là những gì bạn truy cập đƣợc thông qua trình duyệt web. Hai yếu tố này liên kết với nhau hơn nữa tại vì sự phát triển các tính năng và dịch vụ web cung cấp có tác động đến các phần khác của hệ sinh thái Internet, ví dụ các hệ thống khác, các nhà cung cấp dịch vụ, doanh nghiệp và ngƣời sử dụng. Vì lý do đó, sự phát triển của web là một thành phần quan trọng trong sự phát triển của bản thân Internet. Ban đầu các trang web, cũng nhƣ các trình duyệt web - giao diện để truy cập web - chỉ có dạng văn bản đơn giản. Sau đó, một trong những cột mốc quan trọng đầu tiên trong sự phát triển của web là sự ra đời của trình duyệt web Mosaic, trong đó có một giao diện ngƣời dùng hiển thị cả đồ họa và văn bản, nó trở thành phổ biến trong các tài liệu trên web. Sau đó, sự phát triển trong các trình duyệt web hiện đại và các công nghệ hỗ trợ đã mang các nội dung đa phƣơng tiện đƣa lên web. Video và audio, hình ảnh tĩnh và hình ảnh động cùng đƣợc sử dụng trong các trang web tƣơng tác, đã trở thành một chuẩn mực. Tuy nhiên, nội dung đa phƣơng tiện chủ yếu là chỉ là nội dung tĩnh đƣợc sản xuất trƣớc đó và phát hành, sau đó đƣợc gửi lên web để đến với mục tiêu ngƣời nhận. Web, mặt khác, ngày càng trở nên một nền tảng cho truyền thông, thúc đẩy bởi sự gia tăng của các mạng xã hội, một địa điểm nơi con ngƣời có thể thể hiện bản thân và chia sẻ với bạn bè, gia đình các mảnh khác nhau trong cuộc sống của họ. Bất cứ khi nào khi thông tin liên lạc thời gian thực là cần thiết, nếu không nhờ đến sự trợ giúp của phần mềm bổ sung khác, các trang web chỉ có thể cung cấp tin nhắn tức thời dựa trên văn bản. Giao tiếp web thời gian thực (Web Real-Time Communications - WebRTC), là một nỗ lực để loại bỏ hạn chế này của web đƣợc điều hành bởi một số nhà cung cấp trình duyệt chính (Google, Mozilla, Microsoft, Opera) và các công ty nổi tiếng khác (Cisco, Ericsson, vv). WebRTC là một framework mở có khả năng giao tiếp audio và video thời gian thực, nó biến các trình duyệt web thành một nền tảng truy cập chung để giao tiếp giữa ngƣời với ngƣời. Trong khi hội thoại và video thời gian thực không phải là mới với Internet, cho đến nay nó chỉ sử dụng đƣợc trong trình duyệt web bằng cách cài 8 đặt thêm phần mềm của bên thứ ba, chẳng hạn nhƣ Adobe Flash [15] hoặc Skype plug- in. WebRTC mang lại hỗ trợ cho giao tiếp thời gian thực cho các trình duyệt web và giúp các nhà phát triển web sử dụng một cách tự do thông qua Javascript API đƣợc tiêu chuẩn hóa. Cấu trúc của luận văn: Ngoài phần tóm tắt, kết luận và phụ lục. Luận văn đƣợc chia thành ba chƣơng nhƣ sau:  Chƣơng 1: Tổng quan lý thuyết. Chƣơng này đƣợc dành để nói về kiến trúc của WebRTC và các kỹ thuật đƣợc sử dụng trong nền tảng này.  Chƣơng 2: Tìm hiểu về EasyRTC framework. Chƣơng này chúng tôi tìm hiểu về một framework đƣợc xây dựng trên nền WebRTC để hỗ trợ các nhà phát triển trong việc xây dựng các ứng dụng có sử dụng WebRTC.  Chƣơng 3: Sử dụng EasyRTC framework để xây dựng ứng dụng web chat thời gian thực. Chƣơng này chúng tôi sẽ đi vào xây dựng một hệ thống web chat thời gian thực sử dụng WebRTC để hỗ trợ cho hệ thống hỗ trợ khách hàng trực tuyến của các website thƣơng mại điện tử. 9 CHƯƠNG 1: GIỚI THIỆU VỀ TRUYỀN THÔNG WEB THỜI GIAN THỰC - WEBRTC Hãy tƣởng tƣợng một thế giới nơi mà điện thoại, TV và máy tính của chúng ta đều có thể giao tiếp trên cùng một nền tảng chung. Hãy tƣởng tƣợng rằng chúng ta có thể dễ dàng thêm vào tính năng video chat và chia sẻ dữ liệu peer-to-peer cho ứng dụng web. Đó là tầm nhìn của WebRTC. Trƣớc đây khi chƣa có công nghệ WebRTC, chúng ta vẫn có thể thực hiện các cuộc gọi video, audio và chat trên trình duyệt, tuy nhiên nó đòi hỏi phải cài đặt thêm các plugin cho trình duyệt, và thậm chí cả hai ngƣời thực hiện cuộc gọi cùng phải cài đặt một loại plugin. Và nếu ngƣời sử dụng chuyển sang một máy tính khác hoặc sử dụng một trình duyệt web khác, thì lại phải cài đặt lại plugin để có thể thực hiện cuộc gọi đƣợc. Việc sử dụng plugin thƣờng hay gặp phải các vấn đề về bảo mật và gây khó khăn cho ngƣời sử dụng. Hiện tại, WebRTC là công nghệ duy nhất cho phép truyền thông thời gian thực trong trình duyệt web mà không cần cài đặt thêm bất cứ một plugin hoặc ứng dụng nào khác. WebRTC là một nỗ lực của ngành công nghiệp để đƣa khả năng truyền thông thời gian thực vào tất cả các trình duyệt web, cho phép các nhà phát triển web dễ dàng sử dụng các tính năng này thông qua các thẻ HTML5 tiêu chuẩn và các JavaScript API. Ví dụ, thực hiện một ứng dụng web có các tính năng tƣơng tự nhƣ các tính năng Skype™ cung cấp mà không cần phải cài đặt thêm bất kỳ phần mềm hay plug-in nào của bên thứ ba [1]. 1.1 Ngắn gọn về lịch sử của WebRTC Một trong những thách thức lớn nhất cho các trang web là cho phép con ngƣời giao tiếp thông qua giọng nói và video: giao tiếp thời gian thực hay RTC - Real Time Communication. Trong lịch sử, RTC đã đƣợc thực hiện một cách rất phức tạp, đòi hỏi các giấy phép công nghệ audio và video rất tốn kém hoặc các công nghệ tự phát triển riêng. Việc tích hợp công nghệ RTC với các nội dung, dữ liệu và các dịch vụ hiện có rất khó khăn và tốn nhiều thời gian, đặc biệt là trên web. 10 Gmail video chat trở nên phổ biến trong năm 2008, và vào năm 2011 Google đã giới thiệu Hangouts, nó sử dụng dịch vụ Google Talk (cũng giống nhƣ trong Gmail). Google mua lại GIPS, một công ty đã phát triển nhiều thành phần cần thiết cho RTC, chẳng hạn nhƣ các bộ codec và các kỹ thuật triệt tiếng dội. Google mở mã nguồn các công nghệ đƣợc phát triển bởi GIPS và tham gia vào các tiêu chuẩn có liên quan tại tổ chức IETF và W3C để đảm bảo sự đồng thuậncủa ngành công nghiệp [19]. WebRTC hiện nay đã thực hiện các tiêu chuẩn mở cho thời gian thực, không cần plugin chotruyền thông video, audio và dữ liệu. Nhu cầu sử dụng WebRTC là có thật:  Nhiều dịch vụ web đã sử dụng RTC, nhƣng cần phải tải về thêm các ứng dụng hoặc plugin. Trong đó bao gồm Skype, Facebook (trong đó sử dụng Skype) và Google Hangouts (sử dụng plugin Google Talk).  Tải, cài đặt và cập nhật các plugin có thể phức tạp, dễ bị lỗi và gây phiền nhiễu.  Các plugin có thể khó khăn để triển khai, gỡ lỗi, khắc phục sự cố, kiểm thử và bảo trì và nó có thể yêu cầu giấy phép và tích hợp với các công nghệ phức tạp đắt tiền. Thƣờng thì rất khó để thuyết phục mọi ngƣời cài đặt plugin ngay từ đầu. Các nguyên tắc dẫn đƣờng của dự án WebRTC là các API của nó phảilà mã nguồn mở, miễn phí, đƣợc tiêu chuẩn hóa, đƣợc xây dựng trong các trình duyệt web và phải hiệu quả hơn so với các công nghệ hiện có. WebRTC hiện tại vẫn chƣa hoàn thiện, nó vẫn đang tiếp tục đƣợc xây dựng, cả ở cấp độ API của trình duyệt và ở cấp độ giao thức. Tuy nhiên, một số trình duyệt web đã hỗ trợ hầu hết các API của WebRTC nhƣ các trình duyệt Google Chrome, Opera và Mozilla Firefox mới nhất [8]. 1.2 Kiến trúc của WebRTC Cho phép truyền thông thời gian thực trong trình duyệt là một cam kết đầy tham vọng, và có lẽ là một trong những bổ sung quan trọng nhất cho nền tảng web từ khi đƣợc hình thành cho đến nay. Với kết quả là kiến trúc WebRTC bao gồm rất nhiều tiêu chuẩn, giao thức và API mới để cho nó hoạt động:  Tổ chức W3C chịu trách nhiệm định nghĩa các APIs mới của WebRTC cho trình duyệt [2]. [...]... GIAN THỰC Trong chƣơng này, chúng tôi sẽ đi vào xây dựng một hệ thống web chat thời gian thực sử dụng WebRTC để hỗ trợ cho hệ thống hỗ trợ khách hàng trực tuyến của các website thƣơng mại điện tử 3.1 Phân tích hệ thống Trong phần này chúng tôi sẽ phân tích các yêu cầu của ứng dụng web chat thời gian thực cho hệ thống hỗ trợ khách hàng trực tuyến 3.1.1 Mục tiêu tổng thể của ứng dụng web chat thời gian thực. .. framework và cách để viết một ứng dụng WebRTC đơn giản với framework này Trong Chƣơng tiếp theo của luận văn, chúng tôi sẽ ứng dụng các kiến thức đã tìm hiểu đƣợc về WebRTC và EasyRTC framework để xây dựng một ứng dụng web chat thời gian thực nhằm cải tiến hệ thống hỗ trợ khách hàng trực tuyến trong các website thƣơng mại điện tử 32 CHƯƠNG 3: SỬ DỤNG EASYRTC FRAMEWORK ĐỂ XÂY DỰNG ỨNG DỤNG WEB CHAT THỜI GIAN. .. triển ứng dụng web sử dụng để viết ra các ứng dụng web có sử dụng chức năng truyền thông thời gian thực WebRTC C++ API: là một lớp API bên trong của WebRTC đƣợc các nhà phát triển trình duyệt web sử dụng để dễ dàng thực hiện các WebRTC JavaScript API Khối giao vận: đảm nhiệm việc thiết lập kết nối qua các mô hình mạng khác nhau sử dụng STUN, TURN và ICE, đồng thời thực hiện việc dồn kênh và thực hiện... trúc bên trong của WebRTC Chúng ta thấy có hai tầng riêng biệt trong WebRTC [8]: 1 Các nhà phát triển trình duyệt web (nhƣ Google Chrome hoặc Mozilla Firefox) sẽ quan tâm đến các WebRTC C ++ API cho kết nối peer-to-peervà các API cho audio, video và vào/ra mạng theo ý của họ 2 Các nhà phát triển ứng dụng web sẽ quan tâm đến các web API Ứng dụng Web #n Ứng dụng Web #2 Ứng dụng Web #1 WebRTC JavaScript... phát triển trình duyệt Web API viết chồng lên được cho các nhà phát triển trình duyệt Web Hình 2: Kiến trúc bên trong của WebRTC [8] Ứng dụng web: là ứng dụng viết trên nền web sử dụng các JavaScript API của WebRTCcho chức năng truyền thông thời gian thực nhƣ chia sẻ video, audio chat, chia sẻ file WebRTC JavaScript API: là các API đƣợc xây dựng bởi các nhà phát triển trình duyệt web theo tiêu chuẩn đƣợc... https://www.crocodilertc.net/ Trong số các WebRTC framework này, chúng tôi chọn sử dụng EasyRTC framework vì nó hỗ trợ đầy đủ các tính năng cần thiết của một ứng dụng WebRTC, dễ dàng sử dụng, có tính mềm dẻo, mã nguồn mở và rất phù hợp để xây dựng ứng dụng web chat mà chúng tôi đang hƣớng tới Phần còn lại của Chƣơng 2 sẽ giới thiệu về EasyRTC framework và cách sử dụng để xây dựng một ứng dụng WebRTC 2.1 Giới thiệu về... thể và duy trì chất lƣợng âm thanh cao nhất Voice Engine cũng sử dụng bộ khử tiếng vọng và bộ giảm tiếng ồn để nâng cao chất lƣợng đàm thoại 1.3 Chồng giao thức trong WebRTC Hình 3 thể hiện các giao thức đƣợc sử dụng trong WebRTC 13 Tầng ứng dụng ICE HTTP WebSocket SRTP SDP STUN TURN Tầng giao vận TLS DTLS TCP Tầng mạng UDP SCTP IP Hình 3: Chồng giao thức trong WebRTC [1] a) Giao thức HTTP WebRTC sử dụng. .. thể là xây dựng ứng dụng web chat thời gian thực dễ dàng tích hợp vào các website thƣơng mại điện tử có sẵn để hỗ trợ khách hàng trực tuyến của website thông qua các cuộc gọi trên web từ khách hàng tới nhân viên hỗ trợ khách hàng để nói chuyện, chia sẻ video, gửi tin nhắn dạng văn bản và gửi tập tin ngay trên trình duyệt web mà không cần phải cài đặt thêm bất kỳ một plugin hoặc ứng dụng nào 3.1. 2Thực. .. trong WebRTC Có một số nguyên nhân chính dẫn đến một ứng dụng thông tin liên lạc thời gian thực có thể bị lỗi bảo mật:  Media hoặc dữ liệu không đƣợc mã hóa có thể bị can thiệp trên đƣờng truyền giữa các trình duyệt  Một ứng dụng có thể ghi lại và phân phối video hoặc audio mà ngƣời sử dụng không biết WebRTC có một số tính năng để tránh những vấn đề bảo mật này [6]:  WebRTC đƣợc triển khai sử dụng giao. .. chỉ IP và cổng, và trao đổi với khách hàng WebRTC khác (peer) để cho phép kết nối, thậm chí kết nối qua NAT và tƣờng lửa  Phối hợp tín hiệu thông tin liên lạc để báo lỗi và bắt đầu hoặc kết thúc phiên  Trao đổi thông tin về media và khả năng của khách hàng, chẳng hạn nhƣ độ phân giải và codec  Giao tiếp thời gian thực với audio, video và dữ liệu Để lấy đƣợc và truyền các dòng dữ liệu, WebRTC thực . đƣợc xây dựng trên nền WebRTC để hỗ trợ các nhà phát triển trong việc xây dựng các ứng dụng có sử dụng WebRTC.  Chƣơng 3: Sử dụng EasyRTC framework để xây dựng ứng dụng web chat thời gian thực. . SỬ DỤNG EASYRTC FRAMEWORK ĐỂ XÂY DỰNG ỨNG DỤNG WEB CHAT THỜI GIAN THỰC 33 3.1 Phân tích hệ thống 33 3.1.1 Mục tiêu tổng thể của ứng dụng web chat thời gian thực 33 3.1.2 Thực trạng của hệ thống. THÔNG WEB THỜI GIAN THỰC - WEBRTC 9 1.1 Ngắn gọn về lịch sử của WebRTC 9 1.2 Kiến trúc của WebRTC 10 1.3 Chồng giao thức trong WebRTC 13 1.4 Các API của WebRTC 19 1.5 Kênh báo hiệu trong WebRTC