The interactive live broadcast involves the server, teacher client, iOS/Android student client, and Web/Wap student client. This article focuses on the interaction process of Maimai, the design of Maimai module on the front-end, and the design of interactive and chat components on the front-end. For the realization of the chat function of the chat room itself, because the access to the Yunxin IM SDK is mainly realized through the Api call package, I will not go into details.
Before designing the system, first need to consider the following questions:
• Requirements definition and function division of each end, how each end interacts
• Agreement between each end
• The client asks the microphone and the teacher to receive
• Synchronization of interactive information after the client enters the interactive live broadcast room
With the above questions, let's first sort out the services that we can rely on. The following services provided by NetEase Cloud are shown in the figure below. Combined with the design of our own system requirements, we can quickly integrate the functions of IM and interactive live broadcast.
• Yunxin IM service provides a complete set of basic instant messaging capabilities, which can quickly integrate instant messaging and real-time network capabilities into the enterprise's own applications.
• Yunxin’s interactive live broadcast function supports real-time interaction between the host and the audience.
Framework
Our basic needs are mainly the following three parts:
1. Students enter the chat room on the App client, and can initiate a request for wheat;
2. On the teacher's side, you can approve or reject the student's request;
3. After the teacher agrees to a student’s request, the student can enter the live broadcast room to interact.
Combine the requirements and sort out the following basic microphone request, connection microphone, and interactive processes, as shown in the figure below. Different styles of data flow represent different agreements.
Here are some additional concepts:
1. The SDK of the client Yunxin IM, the client sends P2P messages to the teacher through Yunxin IM
2. Client interactive live broadcast SDK, client connects to interactive live broadcast
3. Yunxin SDK on the teacher end, accept p2p messages
4. Teacher-end interactive live broadcast SDK, interact with client-side live broadcast
5. The SDK of Yunxin IM on the web, sending and receiving messages
6. Customize the message, and the data structure of the message sent by each end
Design and implementation
Implementation This section mainly introduces the implementation of the teacher client and the Web/Wap student client mentioned in the overview of the previous section. It mainly includes the following parts: process refinement, teacher IM module, Web student terminal module, configuration, advantages, and existing problems.
Process refinement
First, let’s introduce the implementation of the teacher’s end, and make supplementary explanations to some of the details in the order of the numbers in the figure below. The teacher side has two main parts, one is native, which is called teacher’s native in this article, and the other is a web page, which is called teacher IM in this article. The teacher native and teacher IM communicate through jsbridge and custom messages.
First of all, sort out the jsbridge communication between teacher native and teacher IM as follows:
-notifyQueueChange
-notifyVolume
-notifyCustomMsg
-checkUpdate
-notifyLiveStatus
Combine the above flow chart, and then make a detailed description of the process:
1. Client initialization
Each end obtains a unified chat room address by requesting the server
2. Teacher initialization
After the teacher IM is initialized, it obtains the chat room address through the server request (getPresenterLiveInfo), obtains the chat room singleton, informs the teacher that the native chat room is ready, and obtains the interactive live broadcast data.
3. The process of inviting wheat
• The client sends a p2p message to the teacher native. The teacher native uses jsbridge to call the notifyCustomMsg of the teacher IM, and the teacher IM updates the waiting queue for the Mai request that it maintains.
• The teacher’s IM clicks to agree or reject, and the teacher’s native is notified via a message, and the teacher’s native informs the client of the request through P2P.
• The client uses the interactive live broadcast SDK, connects the microphone to the live room, and sends a message to the teacher native through the interactive live broadcast SDK.
• The teacher native calls the notifyQueueChange method to update the lists in the teacher IM
• Teacher IM, asynchronously request (informServer) to update the server's upload and download queues, send custom messages (im-sdk), and broadcast to notify each client.
Teacher IM module
Combining the flow chart and the detailed description of the process above, the front-end modules are designed and split, as shown in the following figure.
Here LivePcChat is a chat component in Tab, LiveInteractivePresenter is a component that processes interactive operations, and XXcache is a component that encapsulates corresponding data layer operations. The specific component instance, call, data request and processing process are as shown in the sequence diagram below:
Web student module
For the Web/Wap student terminal, because the Web/Wap student terminal itself has not yet developed the function of maiden. Here, take the Web student terminal as an example to introduce the realization of the Web/Wap student terminal in the interactive list and chat interaction. The chat room part of itself and the chat room on the teacher end reuse chat components, so the modules are also divided here first. You can refer to the division of components on the teacher side to compare some of the components reused by the teacher side and the student side. The following figure shows the split of the web student side.
It can be seen from the comparison in the table below that, in addition to the processing logic related to Yingmai, other functions of the IM on the teacher side and the web student side can be reused.
Configuration
Interactive live broadcast is an iteration based on the original live broadcast, so here we must ensure the configurability of interactive live broadcast in various education product lines. The configuration mentioned here is similar to the configuration of other modules and component access in the education public component pool. It also relies on the education general component cache-base, which is read in the config when the live page or project single page is loaded (institutional background) Configuration, one-key configuration.
Pros and cons analysis
The advantages of using this design are
1. All server requests are sent through the web page, reducing the maintenance cost of the teacher;
2. The configurability of the module. In different business lines, it can be configured to decide whether to connect to the interactive live broadcast;
3. The components are granular. In different modules, the teacher side can access the chat component and the interactive component, the microphone component, and the student side can only access the interactive list component;
4. It relies to the greatest extent on the functions implemented by the existing Yunxin sdk, which can meet the requirements in a relatively short time.
The problem
1. The process of Yingmai is more complicated, because it involves multiple ends, and debugging at each end is a waste of time. This is also the purpose of organizing this article. After getting through the understanding of the process of each end, each end can first locate the end of the problem during debugging, and then the problem can be found in a certain link in a targeted manner.
2. Because it is carried out on the basis of the original iteration, many components are not encapsulated into educational standard components, but under the premise of clear logic, they can be optimized in subsequent iterations.
3. Optimize the method of front-end implementation.
sum up
Through this article, we will sort out the logic of each end of the interactive live broadcast to facilitate the later access to the understanding of the interactive live broadcast process. For the client and teacher, you can understand the implementation of the interfaces and messages provided by the front end. If it is necessary to access the interactive live broadcast module in another subsequent project, it can be quickly accessed and debugged, and at the same time, it can further optimize the existing problems raised above.
|
|
|
|
How far(long) the transmitter cover?
The transmission range depends on many factors. The true distance is based on the antenna installing height , antenna gain, using environment like building and other obstructions , sensitivity of the receiver, antenna of the receiver . Installing antenna more high and using in the countryside , the distance will much more far.
EXAMPLE 5W FM Transmitter use in the city and hometown:
I have a USA customer use 5W fm transmitter with GP antenna in his hometown ,and he test it with a car, it cover 10km(6.21mile).
I test the 5W fm transmitter with GP antenna in my hometown ,it cover about 2km(1.24mile).
I test the 5W fm transmitter with GP antenna in Guangzhou city ,it cover about only 300meter(984ft).
Below are the approximate range of different power FM Transmitters. ( The range is diameter )
0.1W ~ 5W FM Transmitter ：100M ~1KM
5W ~15W FM Ttransmitter : 1KM ~ 3KM
15W ~ 80W FM Transmitter : 3KM ~10KM
80W ~500W FM Transmitter : 10KM ~30KM
500W ~1000W FM Transmitter : 30KM ~ 50KM
1KW ~ 2KW FM Transmitter : 50KM ~100KM
2KW ~5KW FM Transmitter : 100KM ~150KM
5KW ~10KW FM Transmitter : 150KM ~200KM
How to contact us for the transmitter?
Call me +8618078869184 OR
Email me [email protected]
1.How far you want to cover in diameter ?
2.How tall of you tower ?
3.Where are you from ?
And we will give you more professional advice.
About Us
FMUSER.ORG is a system integration company focusing on RF wireless transmission / studio video audio equipment / streaming and data processing .We are providing everything from advice and consultancy through rack integration to installation, commissioning and training.
We offer FM Transmitter, Analog TV Transmitter, Digital TV transmitter, VHF UHF Transmitter, Antennas, Coaxial Cable Connectors, STL, On Air Processing, Broadcast Products for the Studio, RF Signal Monitoring, RDS Encoders, Audio Processors and Remote Site Control Units, IPTV Products, Video / Audio Encoder / Decoder, designed to meet the needs of both large international broadcast networks and small private stations alike.
Our solution has FM Radio Station / Analog TV Station / Digital TV Station / Audio Video Studio Equipment / Studio Transmitter Link / Transmitter Telemetry System / Hotel TV System / IPTV Live Broadcasting / Streaming Live Broadcast / Video Conference / CATV Broadcasting system.
We are using advanced technology products for all the systems, because we know the high reliability and high performance are so important for the system and solution . At the same time we also have to make sure our products system with a very reasonable price.
We have customers of public and commercial broadcasters, telecom operators and regulation authorities , and we also offer solution and products to many hundreds of smaller, local and community broadcasters .
FMUSER.ORG has been exporting more than 15 years and have clients all over the world. With 13 years experience in this field ,we have a professional team to solve customer's all kinds of problems. We dedicated in supplying the extremely reasonable pricing of professional products & services. Contact email : [email protected]
Our Factory
We have modernization of the factory . You are welcome to visit our factory when you come to China.
At present , there are already 1095 customers around the world visited our Guangzhou Tianhe office . If you come to China , you are welcome to visit us .
At Fair
This is our participation in 2012 Global Sources Hong Kong Electronics Fair . Customers from all over the world finally have a chance to get together.
Where is Fmuser ?
You can search this numbers " 23.127460034623816,113.33224654197693 " in google map , then you can find our fmuser office .
FMUSER Guangzhou office is in Tianhe District which is the center of the Canton . Very near to the Canton Fair , guangzhou railway station, xiaobei road and dashatou , only need 10 minutes if take TAXI . Welcome friends around the world to visit and negotiate .
Contact: Sky Blue
Cellphone: +8618078869184
WhatsApp: +8618078869184
Wechat: +8618078869184
E-mail: [email protected]
QQ: 727926717
Skype: sky198710021
Address: No.305 Room HuiLan Building No.273 Huanpu Road Guangzhou China Zip:510620
|
|
|
|
English: We accept all payments , such as PayPal, Credit Card, Western Union, Alipay, Money Bookers, T/T, LC, DP, DA, OA, Payoneer, If you have any question , please contact me [email protected] or WhatsApp +8618078869184
-
PayPal.  www.paypal.com
We recommend you use Paypal to buy our items ,The Paypal is a secure way to buy on internet .
Every of our item list page bottom on top have a paypal logo to pay.
Credit Card.If you do not have paypal,but you have credit card,you also can click the Yellow PayPal button to pay with your credit card.
---------------------------------------------------------------------
But if you have not a credit card and not have a paypal account or difficult to got a paypal accout ,You can use the following:
Western Union.  www.westernunion.com
Pay by Western Union to me :
First name/Given name: Yingfeng
Last name/Surname/ Family name: Zhang
Full name: Yingfeng Zhang
Country: China
City: Guangzhou
|
---------------------------------------------------------------------
T/T . Pay by T/T (wire transfer/ Telegraphic Transfer/ Bank Transfer)
First BANK INFORMATION (COMPANY ACCOUNT):
SWIFT BIC: BKCHHKHHXXX
Bank name: BANK OF CHINA (HONG KONG) LIMITED, HONG KONG
Bank Address: BANK OF CHINA TOWER, 1 GARDEN ROAD, CENTRAL, HONG KONG
BANK CODE: 012
Account Name : FMUSER INTERNATIONAL GROUP LIMITED
Account NO. : 012-676-2-007855-0
---------------------------------------------------------------------
Second BANK INFORMATION (COMPANY ACCOUNT):
Beneficiary: Fmuser International Group Inc
Account Number: 44050158090900000337
Beneficiary's Bank: China Construction Bank Guangdong Branch
SWIFT Code: PCBCCNBJGDX
Address: NO.553 Tianhe Road, Guangzhou, Guangdong,Tianhe District, China
**Note: When you transfer money to our bank account, please DO NOT write anything in the remark area, otherwise we won't be able to receive the payment due to government policy on international trade business.
|
|
|
|
* It will be sent in 1-2 working days when payment clear.
* We will send it to your paypal address. If you want to change address, please send your correct address and phone number to my email [email protected]
* If the packages is below 2kg,we will be shipped via post airmail, it will take about 15-25days to your hand.
If the package is more than 2kg,we will ship via EMS , DHL , UPS, Fedex fast express delivery,it will take about 7~15days to your hand.
If the package more than 100kg , we will send via DHL or air freight. It will take about 3~7days to your hand.
All the packages are form China guangzhou.
* Package will be sent as a "gift" and declear as less as possible,buyer don't need to pay for "TAX".
* After ship, we will send you an E-mail and give you the tracking number.
|
|
|
For Warranty .
Contact US--->>Return the item to us--->>Receive and send another replace .
Name: Liu xiaoxia
Address: 305Fang HuiLanGe HuangPuDaDaoXi 273Hao TianHeQu Guangzhou China.
ZIP:510620
Phone: +8618078869184
Please return to this address and write your paypal address,name,problem on note: |
|
