Đang tải... (xem toàn văn)
WebRTC (Web RealTime Communications) là một tập hợp các hàm lập trình dùng cho việc liên lạc thời gian thực bằng video, âm thanh cũng như các loại dữ liệu khác. WebRTC có thể giúp chúng ta gọi điện video ngay trong trình duyệt mà không cần đăng kí tài khoản, cũng không cần cài thêm plugin gì phức tạp, ngoài ra chúng còn được xài để phát triển game chơi trực tiếp trong trình duyệt và rất nhiều loại ứng dụng khác.
Lý thuyết thực hành Webrtc -=[Crane – Nguyễn Bá Phước]=- Giới thiệu WebRTC (Web Real-Time Communications) tập hợp hàm lập trình dùng cho việc liên lạc thời gian thực video, âm loại liệu khác WebRTC giúp gọi điện video trình duyệt mà không cần đăng kí tài khoản, không cần cài thêm plugin phức tạp, chúng xài để phát triển game chơi trực tiếp trình duyệt nhiều loại ứng dụng khác WebRTC APIs: WebRTC gồm API là: MediaStream (aka getUserMedia) RTCPeerConnection RTCDataChannel MediaStream (aka getUserMedia) Đồng stream media (video, audio) Gồm tham số là: Constraints: cấu hình stream (width, height, framerate …) Success callback: hàm trả stream thành công Failure callback: hàm trả stream thất bại Cần user permission để khởi động (audio [mic], video [webcam]) MediaStream (aka getUserMedia) … Mỗi MediaStream có nhãn kiểu như: “vcRV163GDxf2EmX52YzN4WmdWFVOTtaQiDPb” Được lấy từ stream.getAudioTracks() hay stream.getVideoTracks() Signaling: session control, network and media information Không thuộc WebRTC Dùng để kết nối máy với giao thức mạng SIP, XMPP, Socket,… Có thông tin trao đổi là: Session control messages: khởi tạo / đóng kết nối, báo lỗi Network configuration: hiển thị địa IP Port Media capabilities: thông tin codec, độ phân giải Signaling: session control, network and media information … RTCPeerConnection Sử dụng để giao tiếp (video/audio) peers Làm nhiều thứ Xử lý tín hiệu Xử lý codec Xử lý giao tiếp peer to peer Bảo mật Quản lý băng thông RTCPeerConnection (biểu đồ minh họa) RTCPeerConnection (ví dụ) Stream data với RTCDataChannel Đầu tiên tạo file html Nó sử dụng RTCPeerConnection và RTCDataChannel để cho phép trao đổi text message Các phương thức gần giống với RTCPeerConnection, có hàm sendData() createConnection() có code Stream data với RTCDataChannel … Kết hợp RTCPeerConnection Signaling Ở phần sử dụng NodeJS để chạy webapp NodeJS có nhiệm vụ: Chuyển tiếp message Quản lý WebRTC video chat room Kết hợp RTCPeerConnection Signaling … HTML Kết hợp RTCPeerConnection Signaling … JS Kết hợp RTCPeerConnection Signaling … Khởi tạo package.json để chạy NoteJS Dùng lệnh npm install thư mục chứa để chạy cài đặt thư viện Kết hợp RTCPeerConnection Signaling … Index.js đặt thư mục chứa Chạy lệnh node index.js để bật web vào trình duyệt với url “localhost:8080” để chạy webrtc, vào tab khác chạy url tương tự vào console xem kết Kết hợp RTCPeerConnection Signaling … Sau thử cài đặt signaling service exchange message Ta bắt đầu kết hợp peer connection signaling Thêm tags video mục vào file html Chụp ảnh hình chia qua data channel Đầu tiên tạo data channel Tiếp theo webcam video với getUserMedia() Chụp ảnh hình chia qua data channel … Tạo event mà nhấn nút Snap, chụp lại hình ảnh webcam video, hiển thị canvas Chụp ảnh hình chia qua data channel … Tạo event click nút Send, để chuyển ảnh thông qua data channel Chụp ảnh hình chia qua data channel … Thêm event mà nhận message xử lý hình ảnh, canvas Note! Cần chạy nodejs window để bỏ qua lỗi Allow Origin ... Xử lý tín hiệu Xử lý codec Xử lý giao tiếp peer to peer Bảo mật Quản lý băng thông RTCPeerConnection (biểu đồ minh họa) RTCPeerConnection (ví dụ) RTCPeerConnection + Server WebRTC. ..Giới thiệu WebRTC (Web Real-Time Communications) tập hợp hàm lập trình dùng cho việc liên lạc thời gian thực video, âm loại liệu khác WebRTC giúp gọi điện video trình duyệt... Constraints: cấu hình stream (width, height, framerate …) Success callback: hàm trả stream thành công Failure callback: hàm trả stream thất bại Cần user permission để khởi động (audio [mic],