In recent years, the growing demand for multi-platform adaptation has led to the rise of adaptive bitrate playback of streaming media, which has forced Web and mobile developers to rethink the logic of video technology. First of all, the giants released HLS, HDS and Smooth Streaming protocols separately, hiding all relevant details in their dedicated SDKs. Developers can't freely modify the logic of the multimedia engine in the player: you can't modify the rules of adaptive bitrate and cache size, or even the length of your slices. These players may be simple to use, but you don't have too many options to customize it, and even bad features can only be tolerated.
But with the increase of different application scenarios, the demand for customizable functions is getting stronger and stronger. Just between live broadcast and on-demand, there are differences in buffer management, ABR strategies, and caching strategies. These requirements gave birth to a series of lower-level multimedia operation APIs: Netstream on Flash, Media Source Extensions on HTML5, and Media Codec on Android. At the same time, a standard HTTP-based streaming format MPEG-DASH appeared in the industry. . These more advanced capabilities provide developers with greater flexibility, allowing them to build players and multimedia engines that suit their business needs.
Today we will share how to build a modern player and what key components are needed to build such a player. Generally speaking, a typical player can be broken down into three parts: UI, multimedia engine and decoder.
User Interface (UI): This is the uppermost part of the player. It defines the viewing experience of the end user through three different functional characteristics: skin (the appearance design of the player), UI (all customizable features such as playlists and social sharing, etc.) and business logic (specific business logic) Features such as advertising, device compatibility logic, and certification management, etc.).
Multimedia engine: It handles all the logic related to playback control, such as the analysis of description files, the pull of video clips, and the setting and switching of adaptive bitrate rules. We will explain this part in detail below. Since these engines are generally tightly bound to the platform, it may be necessary to use a variety of different engines to cover all platforms.
Decoder and DRM manager: The lowest part of the player is the decoder and DRM manager. The functions of this layer directly call the APIs exposed by the operating system. The main function of the decoder is to decode and render the video content, while the DRM manager controls whether to have the right to play through the decryption process.
Next, we will use examples to introduce the different roles played by each layer.
1. User Interface (UI)
The UI layer is the top layer of the player. It controls what your users can see and interact with. At the same time, you can customize it with your own brand to provide your users with a unique user experience. This layer is closest to the front-end development part we are talking about. Inside the UI, we also include business logic components, which constitute the uniqueness of your playback experience, although the end user cannot directly interact with this part of the function.
The UI part mainly contains three components:
1) Skin
Skin is a general term for the visually related parts of the player: progress control bars, buttons, animated icons, etc., as shown in Figure 2. Like most design components, this part of the component is also implemented using CSS, which can be easily integrated by designers or developers (even if you are using a complete solution such as JW Player and Bitdash).
2) UI logic
The UI logic part defines all visible interactions during playback and user interaction: playlists, thumbnails, selection of playback channels, and social media sharing. Based on the playback experience you expect to achieve, many other features can be added to this part in the past, many of which exist in the form of plug-ins, and perhaps you can find some inspiration: Plugins · videojs/video.js Wiki · GitHub logic part There are many functions included. We will not introduce them in detail, but take the UI of the Eurosport player as an example to intuitively experience these functions.
In addition to the traditional UI elements, there is also a very interesting feature. When the user is watching the DVR streaming media, the live broadcast is displayed in the form of a small window, and the audience can return to the live broadcast at any time through this small window. Since the layout or UI and the multimedia engine are completely independent, these features can be implemented using dash.js in HTML5 with just a few lines of code. For the UI part, the best way to implement it is to add various features to the UI core modules in the form of plug-ins/modules.
3) Business logic
In addition to the "visible" features of the above two parts, there is another invisible part that constitutes the uniqueness of your business: authentication and payment, acquisition of channels and playlists, and advertising. There are also some technology-related things, such as A/B test modules, and device-related configurations. These configurations are used to select multiple different media engines among a variety of different types of devices.
In order to uncover the hidden complexity at the bottom, we will explain these modules in more detail here:
Device detection and configuration logic: This is one of the most important features, because it separates playback and rendering. For example, based on different versions of your browser, the player may automatically choose a multimedia engine based on HTML5 MSE, hls.js, or a flash-based playback engine FlasHls to play HLS video streams for you. The biggest feature of this part is that no matter what underlying engine you use, you can use the same JavaScript or CSS to customize your UI or business logic in the upper layer.
The ability to detect user equipment allows you to configure the end user’s experience as needed: if you are playing on a mobile device instead of a 4K screen device, you may need to start with a lower bitrate.
A/B test logic: A/B test is to be able to gray some users in the production process. For example, you may provide some Chrome users with a new button or a new multimedia engine, and you can also ensure that all of its work is going on as planned.
Advertising (optional): Processing advertising on the client side is one of the most complex business logic. As shown in the flowchart of the plug-in module videojs-contrib-ads, there are multiple steps in the process of inserting ads. For HTTP video streaming, you will more or less use some existing formats such as VAST, VPAID or Google IMA, which can help you pull video ads from the ad server (usually outdated non-responsive formats) , Placed in the early, mid and late stages of the video for playback, and cannot be skipped.
sum up:
For your customization needs, you may choose to use JW Player that includes all classic functions to play (it also allows you to customize some of the functions), or customize your own features based on an open source player such as Videojs. Even in order to unify the user experience between the browser and the native player, you can also consider using React Native for UI or skin development, and Haxe for business logic development. These excellent libraries can be in many different types The same set of code bases are shared between the devices.
2, the multimedia engine
In recent years, the multimedia engine has appeared in the player architecture as a new independent component. In the MP4 era, the platform processed all playback-related logic, and only some of the multimedia processing-related features (only functions such as playback, pause, drag and drop, and full-screen mode) were opened to developers.
However, the new HTTP-based streaming media format requires a brand new component to handle and control the new complexity: parsing declaration files, downloading video clips, adaptive bit rate monitoring, decision-making designation, and more. At first, the complexity of ABR was handled by the platform or equipment provider. However, with the increasing demand for anchor control and customized players, some new players have gradually opened up some lower-level APIs (such as Media Source Extensons on the Web, Netstream on Flash and Media Codec on the Android platform ), and quickly attracted many powerful and robust multimedia engines based on these underlying APIs.
Next, we will explain in detail the details of each component in the modern multimedia processing engine:
1) Declaration file interpretation and parser
In HTTP-based video streaming, everything starts with a description file. The declaration file contains meta-information that the media server needs to understand: how many different types of video quality, language, and letters, etc., and what are they. The parser obtains the description information from the XML file (a special m3u8 file for HLS), and then obtains the correct video information from the information. Of course, there are many types of media servers, and not all of them implement the specifications correctly, so the parser may need to deal with some additional implementation errors.
Once the video information is extracted, the parser will parse the data from it to construct a streaming visual image and know how to obtain different video clips. In some multimedia engines, these visual images first appear in the form of an abstract multimedia image, and then draw the different characteristics of different HTTP video stream formats on the screen.
In the live streaming scene, the parser must also periodically re-acquire the declaration file in order to obtain the latest video clip information.
2) Downloader (download declaration files, multimedia clips and keys)
The downloader is a module that wraps the native API for processing HTTP requests. It is not only used to download multimedia files, but can also be used to download declaration files and DRM keys when necessary. The downloader plays a very important role in handling network errors and retries, while being able to collect data on the currently available bandwidth.
Note: Downloading multimedia files may use the HTTP protocol, or other protocols, such as the WebRTC protocol in the point-to-point real-time communication scenario.
3) Streaming Engine
The streaming playback engine is the central module that interacts with the decoder API. It imports different multimedia clips into the encoder, and handles multi-rate switching and differences during playback (such as the difference between declaration files and video slices, and automatic freezes). Frame skipping).
4) Resource quality parameter predictor (bandwidth, CPU, frame rate, etc.)
The estimator obtains data from various dimensions (block size, download time per fragment, and number of frames skipped), and aggregates them to estimate the bandwidth and CPU computing power available to users. This is the output used for ABR (Adaptive Bitrate, adaptive bitrate) switching controller to make judgments.
5) ABR switch controller
The ABR switcher may be the most critical part of the multimedia engine-usually the most overlooked part. The controller reads the data (bandwidth and number of frames skipped) output by the estimator, uses a custom algorithm to make judgments based on these data, and tells the streaming engine whether it needs to switch the video or audio quality. There are a lot of research work in this field, and the biggest difficulty is to find a balance between re-buffering risk and switching frequency (too frequent switching may lead to bad user experience).
6) DRM Manager (optional component)
Today all paid video services are based on DRM management, and DRM is largely dependent on the platform or equipment, we will see when we explain the player later. The DRM manager in the multimedia engine is a wrapper for the content decryption API in the lower-level decoder. Whenever possible, it will try to shield the differences in the implementation details of browsers or operating systems in abstract ways. This component is usually tightly connected with the stream processing engine because it often interacts with the decoder layer.
7) Format conversion multiplexer (optional component)
As we will see later, each platform has its limitations in terms of packaging and encoding (Flash reads H.264/AAC files encapsulated in FLV containers, and MSE reads H.264/AAC files encapsulated in ISOBMFF containers. file). This leads to some video clips that need to be formatted before decoding. For example, with the MPEG2-TS to ISOBMFF format conversion multiplexer, hls.js can use MSE format content to play HLS video streams. The format conversion multiplexer at the multimedia engine level has been questioned; however, with the improvement of modern JavaScript or Flash interpretation power, the performance loss it brings is almost negligible, and it will not cause much impact on the user experience.
sum up
There are also many different components and features in the multimedia engine, from subtitles to screenshots to ad insertion and so on. Next, we will also write a separate article to compare the differences between a variety of different engines, through some tests and market data to give some substantive guidance for engine selection. It is worth noting that to build a player compatible with various platforms, it is very important to provide multiple freely replaceable multimedia engines, because the underlying decoder is related to the user platform. Next, we will focus on this aspect.
3. Decoder and DRM Manager
For decoding performance (decoder) and security considerations (DRM), the decoder and DRM manager are closely bound to the operating system platform.
1) Decoder
The decoder handles the logic related to the bottom layer playback. It unpacks videos in different encapsulation formats, decodes their content, and then delivers the decoded video frames to the operating system for rendering, and finally allows end users to see.
As video compression algorithms become more and more complex, the decoding process is a process that requires intensive calculations, and in order to ensure decoding performance and smooth playback experience, the decoding process needs to be strongly dependent on the operating system and hardware. Most of the current decoding relies on the help of GPU accelerated decoding (this is also one of the reasons why the free and more powerful VP9 decoder has not won the H.264 market position). If there is no GPU acceleration, decoding a 1080P video will take up about 70% of the CPU calculation, and the frame loss rate may be very serious.
On the basis of decoding and rendering video frames, the manager also provides a native buffer. The multimedia engine can directly interact with the buffer to understand its size in real time and refresh it when necessary.
As we mentioned earlier, each platform has its own rendering engine and corresponding API: Flash platform has Netstream, Android platform has Media Codec API, and the Web has standard Media Sources Extensions. MSE is becoming more and more eye-catching and may become the de facto standard on other platforms after the browser in the future.
2) DRM Manager
Today, DRM is necessary when transferring paid content produced by studios. These contents must be prevented from being stolen, so the code and working process of DRM are blocked from end users and developers. The decrypted content will not leave the decoding layer, so it will not be intercepted.
In order to standardize DRM and provide certain interoperability for the implementation of various platforms, several Web giants jointly created Common Encryption (CENC) and the universal multimedia encryption extension Encrypted Media Extensions to provide multiple DRM providers (for example, EME can be used for Playready on the Edge platform and Widewine on the Chrome platform to build a set of common APIs that can read the video content encryption key from the DRM authorization module for decryption.
CENC declared a set of standard encryption and key mapping methods, which can be used to decrypt the same content on multiple DRM systems, only by providing the same key.
Inside the browser, based on the meta-information of the video content, EME can identify which DRM system is used for encryption, and call the corresponding decryption module (Content Decryption Module, CDM) to decrypt the content encrypted by CENC. The decryption module CDM will handle the work related to content authorization, obtain the key and decrypt the video content.
CENC does not specify the authorization issuance, authorization format, authorization storage, and usage rules and permissions mapping relationship and other details. The handling of these details is the responsibility of the DRM provider.
4. summary
Today we have a deep understanding of the different contents of the three levels of the video player. The best part of this modern player structure is that its interactive part is completely separated from the logic part of the multimedia engine, allowing the anchor to customize the end user experience seamlessly and freely and flexibly. , Simultaneously using different multimedia engines on a variety of different terminal devices can ensure the smooth playback of a variety of different formats of video content.
On the Web platform, thanks to the help of multimedia engines such as dash.js, Shaka Player and hls.js, which tend to be mature libraries, MSE and EME are becoming new standards for playback, and more and more influential manufacturers are using them. These playback engines. In recent years, attention has also begun to extend to set-top boxes and Internet TVs, and we have also seen more and more such new devices use MSE as their underlying multimedia processing engine. We will continue to invest more efforts to support these standards.
|
|
|
|
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: |
|
