Phát sóng trực tiếp trên web là gì? #
Phát trực tiếp trên web ClassIn có nghĩa là giáo viên sử dụng lớp học ClassIn để giảng dạy và học sinh sử dụng trình duyệt web để xem trực tiếp thay vì phải tải và đăng nhập vào ứng dụng ClassIn. Tài liệu này cung cấp hai giải pháp kết nối, nhà trường/ tổ chức có thể nhúng trang phát sóng trực tiếp vào nền tảng/ứng dụng của mình.
So với lớp học tương tác trong ứng dụng ClassIn, phát sóng trực tiếp trên web không giới hạn số lượng người xem có thể tham gia và người xem không cần phải tải xuống ClassIn. Nhược điểm là nó cho phép người xem nhắn tin trao đổi đơn giản. Giáo viên sẽ không thấy được camera hay trao đổi thông qua micro với người xem. Người xem cũng không thể tương tác với các công cụ giảng dạy phức tạp khác trong lớp học.
Tình huống ứng dụng phù hợp với những lớp học lớn hàng chục nghìn người, các sự kiện trực tiếp, v.v., khi lớp học không có yêu cầu tương tác nhiều với người xem.
Cách 1: Sử dụng iframe để lồng trang phát trực tiếp ClassIn trong nền tảng của nhà trường/ tổ chức #
Giải pháp này giúp nhúng trang phát trực tiếp của ClassIn vào nền tảng của bạn (App, Trình duyệt web, v.v.). Để biết địa chỉ của trang phát trực tiếp, hãy tham khảo Cách lấy địa chỉ phát lại trực tiếp của ClassIn.
Ưu điểm: Chi phí triển khai thấp, nhà trường/ tổ chức không cần tự phát triển trình phát web; hỗ trợ thiết lập bắt buộc đăng nhập để xem livestream; hỗ trợ tải xuống dữ liệu người xem hoặc nhà trường/ tổ chức có thể đăng ký dịch vụ nhận dữ liệu để hệ thống tự động gửi thông tin về sau mỗi lần phát trực tiếp;
Nhược điểm: Khả năng tùy chỉnh thấp, chỉ có thể sử dụng giao diện được thiết kế của ClassIn. Bản thân URL truy cập web phát trực tiếp không có chức năng xác thực. Nếu URL bị lộ, nội dung phát sóng trực tiếp có thể bị người dùng khác ngoài phạm vi nhà trường/ tổ chức nhìn thấy. Nhà trường/ tổ chức cần sử dụng các biện pháp kỹ thuật để ngăn chặn địa chỉ bị lộ cũng như bật yêu cầu đăng nhập để xem cho URL;
Các tình huống ứng dụng: phát sóng trực tiếp với số lượng lớn người xem để thu hút sự chú ý, phát sóng trực tiếp vì mục đích phúc lợi công cộng và lớp học đông người;
Các bước tích hợp: tích hợp lịch trình lớp và người dùng → lưu lại địa chỉ phát trực tiếp của lớp học → nhúng trang phát trực tiếp vào trang web hoặc nền tảng tương ứng bằng iframe → nhận dữ liệu thông tin liên quan đến livestream phát trực tiếp thông qua dịch vụ đăng ký nhận dữ liệu → xử lý, lưu trữ và hiển thị dữ liệu trên nền tảng của nhà trường/ tổ chức
- Ví dụ: Thêm iframe vào trang Hiển thị hiệu ứng: Nhấp để chuyển đến chế độ xem
<iframe src="https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733"></iframe>
1.1 Lấy URL địa chỉ trình phát trực tiếp ClassIn #
Nhà trường/ tổ chức có thể lấy URL phát trực tiếp từ các APIs: Tạo lớp học (Lesson) 、Tạo nhiều lớp học cùng lúc (Multiple Lesson) 、Chỉnh sửa thông tin lớp học 、Thiết lập ghi hình, phát trưc tiếp và phát lại video ghi hình cho hàng loạt lớp học. Giá trị của trường ‘live_url’ được gửi về chính là URL của trang phát trực tiếp. Khi lớp học đang diễn ra thì URL sẽ là đóng vai trò như 1 địa chỉ phát trực tiếp; khi lớp học kết thúc – nhà trường/ tổ chức có thể dùng chính URL này để làm địa chỉ phát lại lớp học đã diễn ra
Ví dụ:https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733
Nếu nhà trường/ tổ chức muốn học sinh đăng nhập từ nền tảng của nhà trường sau đó được điều hướng qua trang phát trực tiếp mà không cần đăng nhập lại thì vui lòng tham khảo bước tiếp theo:
1.2 Không cần phải đăng nhập hai lần vào phòng chat của người chơi trực tiếp #
Nếu trang phát trực tiếp yêu cầu người dùng phải đăng nhập trước khi xem, phương pháp này có thể cho phép người dùng đăng nhập mà không cần phải nhập lại mật khẩu tài khoản.
1.2.1 Tạo địa chỉ xem phát trực tiếp của lớp học mà không cần phải đăng nhập #
- Sau khi bạn nhận được địa chỉ phát lại trực tiếp của lớp học
- ví dụ:
https://www.eeo.cn/live.php?lessonKey=xxx
- Bạn cần thêm tài khoản, biệt danh và checkCode sau địa chỉ
https://live.eeo.cn/live_partner.html?lessonKey=00d1c98a91c52568
- ví dụ:
- Các thông số và quy tắc cụ thể như sau:
- Các tham số gồm: secret, account, nickname, checkCode
- Secret là khóa kết nối API lấy được từ Trang quản lý classin.com
- Account là tài khoản của học sinh (ít hơn 32 ký tự), nickname là biệt danh của học sinh (ít hơn 24 ký tự)
- checkCode = md5(secret+lessonKey+account+nickname)
- Ví dụ URL hoàn chỉnh:
https://live.eeo.cn/live_partner.html?lessonKey=00d1c98a91c52568&account=13700000000&nickname=classin&checkCode=d8c57caf088529b4ddd15b0f694d847b
1.2.2 Tạo địa chỉ xem phát trực tiếp của toàn bộ khóa học mà không cần phải đăng nhập #
- Lưu ý: Địa chỉ này có thể cho phép người dùng xem được toàn bộ các lớp trực tiếp và video phát lại của bất kỳ lớp học nào trong khóa học. Nếu bạn không muốn người dùng xem được tất cả lớp học trong khóa học, vui lòng sử dụng 1.2.1 Tạo địa chỉ phát trực tiếp lớp học đơn lẻ ở trên.
- Sau khi bạn có được liên kết trình phát thông qua API Địa chỉ trình phát trực tiếp/phát lại khóa học
- ví dụ:
https://www.eeo.cn/webcast.php?courseKey=xxx&lessonid=xxx
- Bạn có thể lấy courseKey và lessonid từ địa chỉ phát sóng trực tiếp
- Bạn cần thêm tài khoản, biệt danh và checkCode
https://live.eeo.cn/webcast_partner.html
sau địa chỉ
- ví dụ:
- Các thông số và quy tắc cụ thể như sau:
- Các tham số cụ thể là courseKey, lessonid, account, nickname, checkCode
- Lessonid là tùy chọn và các tham số khác là bắt buộc.
- Account là tài khoản của học sinh (ít hơn 32 ký tự), nickname là biệt danh của học sinh (ít hơn 24 ký tự)
- checkCode = md5(secret+courseKey+account+nickname)
- Secret là khóa kết nối API lấy được từ Trang quản lý classin.com
- Ví dụ URL hoàn chỉnh
https://live.eeo.cn/webcast_partner.html?courseKey=7be856f28907f1a2&lessonid=123456&account=18600123456&nickname=eeo&checkCode=febe50cd50ba4d3af506bfa118a3845b
1.2.3 Cách lấy dữ liệu người dùng xem phát sóng trực tiếp/phát lại #
Vui lòng tham khảo cách Đăng ký dịch vụ nhận dữ liệu (Datasub) để nhận dữ liệu được gửi về theo thời gian thực trong lớp học có bao gồm dữ liệu xem trực tiếp/phát lại.
Liên hệ Đội ngũ ClassIn để được hướng dẫn thủ tục nhận Datasub.
Cách 2: Dẫn luồng phát trực tiếp/phát lại của ClassIn để hiển thị trong trình phát của nhà trường/ tổ chức #
Chú ý: Phương thức này yêu cầu nhà trường/ tổ chức phải tự phát triển trình phát video. ClassIn chỉ cung cấp luồng phát
Giao diện của luồng phát trực tiếp & phát lại của ClassIn là cố định và không thể điều chỉnh. Tuy nhiên giao diện hiển thị phát trực tiếp & phát lại có thể hoàn toàn được điều chỉnh theo ý muốn của nhà trường/ tổ chức. Nếu nhà trường/ tổ chức có trình phát riêng hỗ trợ định dạng mp4, hoặc cần điều chỉnh kiểu dáng và chức năng của trang phát trực tiếp, nhà trường/ tổ chức có thể áp dụng giải pháp này. Giải pháp này chỉ sử dụng luồng video trực tiếp của lớp học ClassIn và bạn cần phát triển các phần khác trên giao diện của trang
Ưu điểm: khả năng tùy chỉnh linh hoạt, thuận tiện cho việc phát triển các tính năng phụ như: xác thực, mã hóa, ghi âm, v.v.;
Nhược điểm: Chi phí phát triển cao, đòi hỏi nhà trường/ tổ chức có đội ngũ lập trình viên trình độ cao và nhất định phải Đăng ký dịch vụ nhận dữ liệu (Datasub) để nhận các dữ liệu liên quan;
Các tình huống ứng dụng: bán các khóa học đã ghi hình, yêu cầu cao về bảo mật phát sóng trực tiếp, mức độ tùy chỉnh cao, v.v.
2.1 Làm thế nào để có được địa chỉ phát trực tuyến? #
Nhà trường/ tổ chức có thể lấy URL phát trực tiếp từ các APIs: Tạo lớp học (Lesson) 、Tạo nhiều lớp học cùng lúc (Multiple Lesson) 、Chỉnh sửa thông tin lớp học 、Thiết lập ghi hình, phát trưc tiếp và phát lại video ghi hình cho hàng loạt lớp học. Hiện tại có 3 giao thức được hỗ trợ là: RTMP, HLS và FLV
Sau đây là so sánh ưu điểm và nhược điểm của địa chỉ pull-stream. So sánh sau đây chỉ mang tính chất tham khảo.
RTMP | HLS | FLV (HTTP-FLV) | |
---|---|---|---|
Tên | Giao thức tin nhắn thời gian thực | Phát trực tiếp HTTP | RTMP qua HTTP |
Giao thức | Kết nối liên tục TCP | Kết nối HTTP ngắn | Kết nối liên tục HTTP |
Nguyên lý | Dữ liệu nhận được tại mỗi thời điểm được chuyển tiếp ngay lập tức | Thu thập dữ liệu trong một khoảng thời gian, tạo các tệp ts (ba phân đoạn) và cập nhật chỉ mục m3u8 | Giống như RTMP, sử dụng giao thức HTTP (cổng 80) |
Độ trễ | 1-3 giây | 5-20 giây (tùy vào phân đoạn) | 1-3 giây |
Hỗ trợ Web | Cần cài plug-in trên H5 | Hỗ trợ trình duyệt H5 | Cần cài plug-in trên H5 |
Khác | Hỗ trợ đa nền tảng kém, yêu cầu hỗ trợ Flash | Cần gửi nhiều yêu cầu trong quá trình phát trực tiếp, đòi hỏi chất lượng mạng cao | Yêu cầu hỗ trợ Flash, không hỗ trợ nhiều luồng âm thanh, nhiều luồng video và không tiện cho việc tìm kiếm (ví dụ: kéo tua thanh tiến trình) |
What is Website Live Broadcast? #
The EEO supports to broadcast the live classroom in a browser. Teachers need to enter the virtual classroom in the CLassIn app and start the classroom recording. Students can view the recording of the live class on a website directly without log into the ClassIn app, and interact with the teacher in text chat. The Website Live Broadcast has no limit on the number of the viewers. Students don’t have to download the ClassIn app. When the live class is finished, audience can use the same page to view the lesson replay.
Usage scenarios: Broadcast the company’s annual function, propagada activities or classes that need to be viewed by millions of the students at the same time. Do not require video-audio interaction between audience and the teacher.
You can embed the ClassIn’s broadcast page into your app or website and provide seamless experience for your clients.
Notes: When students view the live class in the browser, they are watching the scene recorded from the teacher’s perspective. They are actually not in the virtual classroom, and thus cannot use the interactive tools in the classroom and cannot video and audio interact with the teacher.
Here are two solutions to embed the ClassIn’s web-live page into your system.
Solution 1. iframe:Embed the ClassIn page in your own system, app or web. #
The solution is compatible with most of the system except for the Mini-Programs in the Wechat. How to obtain the url of the web broadcast and replay page
Pros: Low requirement on developement. No need to design and develop the video player yourself. The ClassIn page contains the function of live streaming and live chat area. You can control whether to allow the viewers to login to view the page. You can download the data collected by the ClassIn page in the EEO School Dashboard, or receiving those data via API.
Cons: Low extensibility. Do not have strict authentication. There are possibilities that the live broadcast gets spreaded.
Usage scenarios: Broadcast live classes to attract potential customers; live broadcast of charity activities.
Integration steps: Create courses and lessons on your system via API → Store the url of the web-live lesson into your database → Embed the ClassIn web-live page on your system via iframe → Receive viewers’ data via API(ClassIn’s data subscription service) → Analyze and display the data on your system
Sample:add iframe in your page
<iframe src="https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733"></iframe>
Effect: Click and go to ClassIn web-live page
1.1 How to obtain the url of the web broadcast and replay page #
Notes:The ClassIn web-live and replay page cannot be integrated with mini programs in the Wechat.
You can get the url via APIs: Create a Lesson 、Create Multiple Lessons 、Edit Lesson 、Set Recording, Web-live and Web Replay for Lessons. The value returned in the field of ‘live_url’ is the url of the web-live page. When the lesson is ongoing, the url is to broadcast the live lesson; and when the lesson is finished, you can use the same url to replay the class. Sample:https://www.eeo.cn/live.php?lessonKey=0a9c56ba30c05733
If you want your students to stay loged in when they go to the ClassIn web-live page from your system, you can refer to How to avoild a second-time log in
1.2 How to avoild a second-time log-in in the ClassIn page #
The solution enables your audience stay loged in when they jumps to the ClassIn web-live page from your system. The viewers don’t need to input their ClassIn account and password when entering the ClassIn web-live page. The ClassIn account is used in the text chat and data collection.
1.2.1 How to stay loged in on Lesson’s web-live/replay page** #
- After you obtain the web-live page for certain lesson
- eg:
https://www.eeo.cn/live.php?lessonKey=xxx
- You need to add the value of the viewer’s account, nickname, checkCode after the
https://live.eeo.cn/live_partner.html?lessonKey=00d1c98a91c52568
. - Notes: The stay loged in web-live/replay url is different from the original web-live-replay url.
- eg:
- How to get the values of the parameters?
- Parameters needed are secret, lessonKey, account, nickname, checkCode
- secret: find SECRET in the classin.com-Profile-API-API对接密钥(the first tag)
- lessonKey: find lessonKey in the url of the web-live and replay page
- account: the student’s account(mobile phone number), nickname: the student’s nickname
- checkCode = md5(secret+lessonKey+account+nickname)
- Here is an example of passing required parameters in the url
https://live.eeo.cn/live_partner.html?lessonKey=00d1c98a91c52568&account=13700000000&nickname=classin&checkCode=d8c57caf088529b4ddd15b0f694d847b
1.2.2 How to stay loged in on a course’s web-live/replay page** #
- Notes: The course’s web broadcast url contains the links of all the lessons, which means viewers can access each lesson’s web broadcast/replay page from the course’s web-live/replay page. If you only want the viewer to visit specific lessons, please use the lesson’s web broadcast url.
- Obtain the url of web broadcast/replay via API, Obtain url of course’s web broadcast/replay
- eg:
https://www.eeo.cn/webcast.php?courseKey=xxx&lessonid=xxx
- Get the courseKey and lesosnid in the url returned by API to obtain url of course’s web broadcast/replay
- Add the parameters of account, nickname, checkcode after the
https://live.eeo.cn/webcast_partner.html
- Notes: The stay loged in web-live/replay url is different from the original web-live-replay url.
- eg:
- How to get the values of the parameters?
- Parameters needed: courseKey, lessonid, account, nickname, checkCode
- lessonid is selectable, the other parameters are required
- account: Max 32 chars nickname: Max 16 chars
- checkCode = md5(secret+courseKey+account+nickname)
- secret is the SECRET displayed in the classin.com-API tag.
- URL Sample:
https://live.eeo.cn/webcast_partner.html?courseKey=7be856f28907f1a2&lessonid=123456&account=18600123456&nickname=eeo&checkCode=febe50cd50ba4d3af506bfa118a3845b
1.2.3 How to obtain data related to webpage livestreaming and replay #
Please refer to Data Subscription
You can subscribe to the data of students viewing the webpage live streaming, which is sent in real-time. The data of the webpage replay is sent after class. Please contact our IT support to subscribe to the data you need.
Solution2. Develop your own video player and pull the ClassIn’s streaming and displays it in your own video player #
The layout of the ClassIn web-live/replay page is fixed and cannot be customized. This solution is targeted for schools already have a video player for live streaming and mp4 display or prefer to customize their own broadcast pages. You only pull the live video of the ClassIn classroom and broadcast it in your player.
Pros: Good scalability. Convenient for redevelopment, authentication, encryption, recording, etc
Cons: Requires extra development workload and technical ability. You need to develop the live streaming page and make it compatible with PCs and mobile devices. If you want to replay the classes, you also need to receive the recording url pushed by ClassIn. (https://docs.eeo.cn/api/en/datasub/classrelated.html#3recording-class-file-generated-message)
Usage scenarios: For schools provide class videos as products, or require absolute security when live streaming the class, or desire for customization.
Integration steps: Schedule courses and lessons from your system via API → Obtain and store the pull-stream url → Live stream:broadcast the pull-stream url in your player → Receive the url of the classroom recording via API → Replay:Play the url received in your player
2.1 How to obtain the pull-stream url #
You can get the pull-stream url via Create a Lesson 、Create Multiple Lessons 、Edit Lesson 、Set Recording, Web Live/Replay for Lessons. Three protocols are provided, RTMP, HLS and FLV.
How to decide which protocol to use?
RTMP | HLS | FLV(HTTP-FLV) | |
---|---|---|---|
Full Name | Real Time Message Protocol | HTTP Liveing Streaming | RTMP over HTTP |
Protocals | Long TCP Connectioin | Short HTTP Connection | Long HTTP Connection |
Principle | Real-time data is forwarded as soon as it is received | Collect data for a period of time, generate ts slice files(three slices) and update the m3u8 index | Same as RTMP, using HTTP protocol(port 80 |
Time delay | 1-3s | 5-20s(Depending on the slice) | 1-3s |
Web support | Plug-ins are required in H5 | Support the H5 | Plug-ins are required in H5 |
Others | Weak performance in cross-platform live streaming. Require capability of Flash | Need to be requested for multiple times during the live streaming. High requirement on the Internet quality | Require capability of Flash. Do not support muti-audio stream, multi-video stream. Not easy to seek(1.e. drag process bar) |