HTML5 live video

It can be seen that, from PC to mobile, more and more live broadcast apps are online, and mobile broadcast has entered an unprecedented explosion stage. However, for most mobile live broadcast, it is still mainly implemented by native clients, but HTML5 also plays an irreplaceable role in the mobile live broadcast end, such as HTML5 With the advantages of fast transmission and easy to release, HTML5 can also play live video when it is the most important.

The complete live broadcast can be divided into the following:
(1) Video recording terminal: Generally speaking, it is a computer audio and video input device or a camera or microphone at the mobile terminal. Currently, mobile phone video is the main part.
(2) Video player: it can be a player on the computer, a native player on the mobile phone side, and a video label of HTML5. At present, it is still the main native player on the mobile phone.
(3) Video server: generally, it is a nginx server, which is used to accept the video source provided by the video recording side and provide the streaming service to the video playback end.

2、 HTML5 recording video:
For HTML5 video recording, the powerful webrtc (WEB real time communication) is a technology that supports real-time voice or video conversation in web browser. The disadvantage is that it only supports better on PC chrome and the mobile side is not ideal.
The basic process of recording video with webrtc is:
Call window.navigator.webkitGetUserMedia (obtain the video data of the user's PC camera).
Convert acquired to video stream data to window.webkitRTCPeerConnection (a video stream data format).
Using websocket to transfer video stream data to server
Because many methods need to be prefixed with browser, many mobile browsers do not support webrtc, so the real video recording is still implemented by the client (IOS, Android), and the effect will be better.

3、 HTML5 broadcast live video:
For video playback, you can use HLS (HTTP live streaming) protocol to play live streaming. IOS and Android both support this protocol naturally. It is simple to configure and use video tags directly.
Here is a simple code to play live video using video:
(1) what is HLS protocol:
In short, the whole stream is divided into small files, which are downloaded based on HTTP. Only some are downloaded at a time. The previous mentioned file of.M3u8 introduced in HTML5 broadcast live video is based on HLS protocol, which stores the metadata of video stream.
Each.M3u8 file corresponds to several TS files, which are the data for the real video storage. The m3u8 file only stores the configuration information and related paths of some TS files. When the video is played, the.M3u8 file is dynamically changed. The video label will parse the file and find the corresponding TS file to play. So in order to speed up the speed, the.M3u8 file will be used to analyze the file and find the corresponding TS file for playback. Therefore, in order to speed up the speed, the.M3u8 file will be used to analyze the file and find the corresponding TS file for playback. Therefore, in order to speed up Put it on the web server, and the TS file on the CDN.
The.M3u8 file is actually a M3U file encoded with UTF-8. This file cannot be played by itself, but only the text file containing the playback information.

(2) HLS request process:
The URL of the HTTP request m3u8.
The server returns a playlist of m3u8, which is updated in real time. Generally, the URL of 5 segments of data is given at a time.
The client parses the playlist of m3u8, and then requests the URL of each segment in order to obtain the TS data stream.

(3) HLS live broadcast delay:
We know that the HLS protocol divides the live stream into a small segment of video to download and play. So suppose that the list contains 5 TS files, each TS file contains 5 seconds of video content, then the overall delay is 25 seconds. Because when you see these videos, the host has recorded the video and uploaded it, so the delay is caused by this. Of course, the list length and the size of a single TS file can be shortened to reduce the delay. In the extreme, the list length can be reduced to 1 and the TS duration is 1s. However, this will increase the number of requests and increase the server pressure. When the network speed is slow, more buffer will be generated. Therefore, the TS time recommended by Apple officially lasts for 10s, so it will greatly change the delay of 30s. So the server receives the stream, transcoding, saves, cuts the block, and then distributes it to the client. Here is the root cause of the delay.
For more questions about delays, please refer to Apple's official address:
https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

However, HTML5 live video has some irreplaceable advantages:
① Good communication, easy to share and other operations.
② It can be released dynamically, which is conducive to real-time iteration of product requirements and rapid launch.
③ Without installing app, open the browser directly.

4、 IOS collection (recording) audio and video data OS
For audio and video acquisition and recording, first, the following concepts are clarified:
（1）Video coding: video coding refers to the way that a file in a video format is converted into another video format file through a specific compression technology. The video recorded by iPhone we use must be encoded, uploaded and decoded before it can be played in the user-side player.
（2）Codec standard: the most important codec standards in video stream transmission include H.261, H.263 and H.264 of ITU, in which HLS protocol supports H.264 format coding.
（3）Audio coding: similar to video coding, the original audio stream is encoded, uploaded, decoded according to certain standards, and played in the player. Of course, audio also has many coding standards, such as PCM code, wma code, AAC code, etc. the audio coding method supported by our HLS protocol is AAC code.

The video and audio data acquisition is mainly divided into the following steps:

（1）the video and audio data acquisition by using the camera on IOS
（2）In IOS, the original audio and video data stream can be collected by avcapturesession and avcapturedevice.
（3）The video is encoded with h264, and the audio is AAC coded. In IOS, there are already packaged coding libraries to realize the coding of audio and video.
（4）The audio and video data after coding are assembled and sealed;
（5）Establish RTMP connection and push it up to the server.

The following is the specific process of collecting audio and video data:
(1) about RTMP:
Real time messaging protocol (RTMP) is a set of live video protocol developed by Macromedia, and now belongs to adobe. As with HLS, it can be used for video broadcast. The difference is that RTMP can not play in IOS browser based on flash, but it is better in real time than HLS. So this protocol is generally used to upload video stream, which is, video stream is pushed to server.

(2) push flow
The so-called streaming refers to sending the audio and video data we have encoded to the video stream server. In IOS code, RTMP streaming is commonly used. Librtmp IOS, a third-party library, can be used for streaming. Librtmp encapsulates some core APIs for users to call. For example, push the API and so on, configure the server address, and then push the transcoding video stream to the server.
So how to build a streaming server?
Simple streaming server is built. Since the video stream we upload is based on RTMP protocol, the server must support RTMP. It may take the following steps:
（1）Install a nginx server.
（2）The RTMP extension of nginx is installed. Configure conf file for nginx
（3）Restart nginx and write the streaming address of RTMP as rtmp://ip : 1935/hls/mystream, where HLS_ Path represents the address of the generated.M3u8 and TS files, HLS_ Fragment represents the length of slice, and mystream represents an instance. The file name to be generated can be set by itself.

5、 User interaction in live broadcast:
For the user interaction in live broadcast, it can be roughly divided into:
giving gifts.
To comment or to play
For gift delivery, DOM and CSS3 can be used to realize the logic of gift sending and some special gift animation on HTML5. The technical difficulties are not very big.
For a barrage, to be a little more complex, you may need to pay attention to the following:
The real-time performance of the projectile can be sent and received in real time by webscock and rendered.
For browsers that do not support websocket, they can only be degraded to long polling or front-end timer sending requests to obtain real-time pop-up.
Animation and collision detection (i.e. no overlap) and so on in the rendering

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: