Shulou(Shulou.com)06/03 Report--

Write at the beginning

Mini Program upgraded its real-time audio and video recording and playback capabilities, and opened hardware connection functions such as Wi-Fi and NFC (HCE). At the same time, new features such as on-demand loading, custom components, and more access levels are provided to enhance the capabilities of third-party platforms to meet increasingly rich business needs.

In order to connect users and merchants more efficiently, Mini Program provides real-time audio and video recording and playback components. After self-service activation of Mini Program that meets the category requirements, you can build or use cloud services to achieve one-way, two-way or even multi-directional audio and video functions, such as online teaching, remote consultation, video customer service, and multi-person meetings.

2017-12-26 WeChat Mini Programs pushed such a message, document, code is also a simple one-off, users need to build or use cloud services to achieve one-way, two-way or even multi-directional audio and video functions. Currently, only flv and rtmp formats are supported.

This blog introduces the use of nginx's rtmp module to make nginx services support rtmp protocol, and can complete the functions of push and playback.

Development environment

Linux (centos7), Nginx (openresty), nginx-rtmp-module

Installation

Since openresty has been installed before, see the blog post for details. Here we just need to install the nginx-rtmp-module module.

Download and extract the module:

Wget https://github.com/arut/nginx-rtmp-module/archive/master.zipunzip master.zip

Stop the original Nginx service:

Nginx-s stop

Configure and edit:

. / configure-- add-module=/home/nginx-rtmp-module-mastermake

Copy Nginx:

# # configure cp / home/openresty/build/nginx-1.11.2/objs/nginx / usr/local/openresty/nginx/sbin according to your own software path

Configure the rtmp service:

Rtmp {# RTMP service server {listen 1935; # / Service port chunk_size 4096; # / / the size of the data transfer block application vod {play / opt/video; # / / video file storage location. } application live {# LVB live on;}

Check and start the service:

Nginx-tnginx playback

Upload a video file test.flv to the / opt/video directory.

Download a VLC media player, Toolbar-Media-Open Network streaming-Network, then occasionally enter Network URL (rtmp://ip:port/vod/test.flv) and click play.

Look back

Review the configuration of the video server in real time:

Events {use epoll;# choose epoll model to achieve the best IO performance worker_connections 1024;} rtmp {# RTMP service server {listen 1935; # / / service port chunk_size 4096; # / / the size of the data transfer block application vod {play / opt/video; # / / video file storage location. } application live {# LVB live on; hls on; # this parameter transforms the LVB server into a real-time playback server. Wait_key on; # protects video slices so that mosaics are not generated. Location of hls_path / opt/video/hls; # sliced video files. Hls_fragment 600s; # sets the HLS fragment length. Hls_playlist_length 10m; # sets the length of the HLS playlist, which here is 10 minutes. Hls_continuous on; # continuous mode. Hls_cleanup on; # deletes excess slices. Hls_nested on; # nested mode. }}}

HTTP Service:

Server {listen 80; server_name rtmp.52itstyle.com; location / stat {rtmp_stat all; rtmp_stat_stylesheet stat.xsl;} location / stat.xsl {root / home/nginx-rtmp-module-master/;} location / {root html; index index.html index.htm } location / live {# this is also the field to be added. Types {application/vnd.apple.mpegurl m3u8; video/mp2t ts;} alias / opt/video/hls; expires-1; add_header Cache-Control no-cache; add_header Access-Control-Allow-Origin *;} error_page 500 502 503 504 / 50x.html Location = / 50x.html {root html;}} Wechat push

The phone opens the Mini Program page to perform video push service. Later, we will find some ts files and index.m3u8 files in the / opt/video/hls/itstyle directory.

Note that the itstyle in url can be defined freely, which is equivalent to a room ID.

PC push

PC LVB uses the push URL of OBS (recommended) or XSplit installed on PC (windows/mac) to push compressed and encoded images of live activities, teaching, projection or games. At the same time, viewers can watch real-time images through the playback URL corresponding to the push address.

PC LVB process is very simple. The main steps are as follows:

Customize a push address through RTMP to solve the problem of where to push; use third-party push software to set the push audio / video source and coding parameters to solve the problem of what to push; viewers can use our RTMP DEMO to set the playback address to watch and solve the problem that the content reaches the audience.

Recommended reading: guide to the use of third-party push tools

Web playback

Xiaozhibo.html:

Mini LVB var player = new TcPlayer ('id_test_video', {"m3u8": "http://rtmp.52itstyle.com/live/itstyle002/index.m3u8"," autoplay ": safari browser under true,//iOS And most mobile browsers do not open the ability of automatic video playback of "coverpic": "https://blog.52itstyle.com/usr/uploads/2017/12/2652725976.jpg"," width ": '480 videos / video display width, please try to use video resolution width" height ":' 320 videos / video display height Please try to use video resolution height})

The cross-domain problem crossdomain.xml is placed in the root directory of the website:

Test access address: http://rtmp.52itstyle.com/xiaozhibo.html

Reference documentation:

Http://www.cnblogs.com/zx-admin/p/5783523.html

Https://cloud.tencent.com/document/product/267

Https://github.com/arut/nginx-rtmp-module/wiki/Directives#rtmp

Author: Xiaoqi

Source: https://blog.52itstyle.com

Sharing is happy, but also witnessed the process of personal growth, most of the articles are work experience summary and peacetime learning accumulation, based on their own cognitive deficiencies are inevitable, please correct and make progress together.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.