Website Live Broadcast
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
The web-live page also has text chat area. When you create the lesson, you can set whether only allow the loged-in audience to watch the live class or join in the text chat. The viewer needs to fill in the mobile phone number to log in.
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) |
FQA
Q1. What is iframe and how to implement it? A1. Iframe is generally used to include other pages. For example, you can load the content of other websites or other pages of your website on our own website. Usually, you can use iframe to directly nest iframe tags on the page and specify src.
eg：<iframe src="url"></iframe>Q2. What is pull-stream and how to use it? A2. Pull stream: The server already has the content for live streaming and the server url can be pulled to other addresses. That is, there are streaming video files in the server. These video files are read according to different network protocol types (such as RTMP, HLS, FLV), which is called pull streaming.