1. What is streaming media?
Streaming media refers to a technology and process that compresses a series of media data, sends the data in segments over the Internet, and instantly transmits audio and video on the Internet for viewing. This technology allows data packets to be sent like running water; if Without this technology, the entire media file must be downloaded before use. Streaming transmission can transmit live videos or videos pre-stored on the server. When a viewer watches these video files, the video data is played by specific playback software immediately after being sent to the viewer's computer. Users watch while downloading without having to wait for the entire file to be downloaded; when streaming media files are played over the network, the files themselves are not stored on the local disk, thus saving a lot of disk space overhead. Streaming media actually refers to a new media transmission method, including sound stream, video stream, text stream, image stream, animation stream, etc. Streaming media servers are widely used in video on demand, video conferencing, distance education (relaying the computer window screen to other people during live games or online classes), telemedicine, online live broadcast systems, and campus security access camera video streams. 2.
Streaming media transfer protocol
RTSP (Real-Time Stream Protocol) is a text-based multimedia playback control protocol jointly proposed by Real Networks and Netscape. RTSP defines the streaming format, and the streaming data is transmitted via RTP; RTSP has very good real-time effect and is suitable for video chat, video monitoring, etc. Generally, cameras are in RTSP format. h5 does not natively support this format. The advantage is that it can control the video frame, so it can host applications with high real-time performance. This advantage is the biggest advantage over HTTP. The complexity is mainly concentrated on the server side, which can perform double-speed playback function, and other video protocols cannot support it. The network delay is low, generally within 0.5S; the disadvantage is that the complexity of the server side is relatively high, and the implementation is also complicated. The ios side does not support this protocol, and the support for mobile terminals is weak; except for the Firefox browser that can directly play RTSP streams, almost no other browsers can directly play RTSP streams. RTSP protocol, this protocol has similar effects to RTMP. Technically, it only differs in how many channels are occupied in transmitting data and the transmission format stream. RTSP can actually be used for live broadcast. But still due to the market environment, RTSP is currently mainly used in security monitoring. Like RTMP, it has already formed its own profit chain.
RTMP (Real Time Message Protocol) was proposed by Adobe to solve the problems of multiplexing and packetizing of multimedia data transmission streams. It has the advantages of low latency, high stability, and supports all camera formats. The RTMP protocol uses real-time streaming transmission, so files will not be cached on the client. This feature shows that it is difficult for users to download videos under the RTMP protocol. The video stream can be dragged and moved from any point in time. The server sends a request for playback and does not require the video to have keyframes. In comparison, videos under the HTTP protocol need to have key frames before they can be dragged at will. The rtmp protocol only supports flashplayer, which means that it can only be installed on the PC (or in the Android environment where the flashplayer component is installed, which is relatively rare). When used under certain circumstances, the browser can load the flash plug-in and play it directly. However, flash has already faded away. Therefore, currently RTMP is mainly used to extract streams. That is, when you set up the decoder to send the video to the hosting platform, the video is sent to the CDN using the RTMP protocol and then delivered to the player using another protocol (usually HLS).
HTTP: When using http protocol, the video format needs to be m3u8 or HTTP-FLV protocol video stream. The HLS protocol consists of three parts: HTTP, M3U8, and TS. Among these three parts, HTTP is the transmission protocol, M3U8 is the index file, and TS is the audio and video media information. m3u8 is delayed. It is not real-time, and the real-time transmission is not as good as the rtmp protocol. Because the live broadcast principle of m3u8 is to continuously compress the live broadcast source into ts files of specified length (such as 9 seconds, 10 seconds per ts file) and update the list in the m3u8 file in real time to achieve the live broadcast effect. This will have a time delay of at least 9,10 seconds. If the compression is too small, the video may become stuck due to client network issues. HTTP-FLV encapsulates streaming media data into FLV format, and then transmits it to the client through the HTTP protocol. There is a convention in the HTTP protocol: the content-length field, the length of the body part of http. If there is this field when the server replies to the http request, the client The client receives data of this length and then considers the data transmission to be completed. If the server does not reply with this field in the http request, the client will continue to receive data until the socket connection between the server and the client is disconnected. http-flv live broadcast uses the second principle. The server does not add the content-length field when replying to the client's request. After replying to the http content, it then sends flv data, and the client continues to receive the data.
Except for HTTP and WebSocket transmission protocols, other transmission protocols cannot be universally transmitted to browsers. Therefore, if you want to make a universal H5 video player, it is basically a video player with HTTP/WebSocket protocol. If it is Video sources similar to RTMP and RTSP type protocols are inevitable and need to be converted by the server.
3. Construction of push server
Option 1: Nginx adds module nginx-rtmp-module
Solution 2: Nginx adds module http-flv-module
nginx-http-flv-module is a streaming media server based on nginx-rtmp-module. It has all the functions of nginx-rtmp-module, and adds a variety of new functions. The function comparison is as follows. For details, see https://github.com/winshining/nginx-http-flv-module 
. You can install it according to your actual situation. http-flv-module is more powerful.
Since the project needs to play HTTP-FLV, option 2 was chosen.
nginx adds module compilation
// 下载nginx
# mkdir -p /root/nginx
# cd /root/nginx
# yum -y install pcre-devel openssl openssl-devel //安装依赖
# wget http://nginx.org/download/nginx-1.21.6.tar.gz //下载nginx包
# tar xf nginx-1.21.6.tar.gz
//下载nginx-http-flv-module
# mkdir -p /opt/nginx-1.21.6/module
# cd /opt/nginx-1.21.6/module
# wget https://github.com/winshining/nginx-http-flv-module/archive/refs/heads/master.zip
# unzip master.zip
# cd /root/nginx/nginx-1.21.6
//安装目录是/opt/nginx-1.21.6，安装模块nginx-http-flv-module-master【重点就是这个】和ssl用于日后配置https证书
# ./configure --prefix=/opt/nginx-1.21.6 --add-module=/opt/nginx-1.21.6/module/nginx-http-flv-module-master --with-http_ssl_module
# make
# make install // 如果你是热部署升级，一定不要执行这个命令
// 修改nginx配置文件 避免粘贴过来格式混乱，在 Vim 视图，输入如下命令:set paste，可以使 vim 进入 paste 模式，这时候再整段复制黏贴，就OK了
# vim /opt/nginx-1.21.6/conf/nginx.conf
//修改完成，检查nginx配置文件是否正确，启动nginx 即可,记得开放防火墙、安全组端口1935 和88
# cd /opt/nginx-1.21.6/sbin
# ./nginx -t
# ./nginx nginx.config is configured as follows
#增加如下配置即可
# 推流时会发布到多个子进程
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp {
server {
listen 1935; #监听的端口号
chunk_size 8192; # 单一推流数据包的最大容量
application hls { # 创建rtmp应用hls
live on; # 当路径匹配时，开始播放
#HLS协议进行m3u8实时直播.如果是http-flv不需要配置下面的
wait_key on;#保护TS切片
hls on; #实时回访
hls_nested on;#每个流都自动创建一个文件夹
hls_path /tmp/hls; #媒体块ts的位置
hls_fragment 5s; #每个ts文件为5s的样子
hls_playlist_length 30s; #保存m3u8列表长度时间，默认是30秒，可考虑三小时10800秒
hls_cleanup on;#是否删除列表中已经没有的媒体块TS文件，默认是开启
hls_continuous on;#连续模式
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
server {
listen 88;
server_name localhost;
error_log logs/rtmp/error.log;# http协议下的访问日志
access_log logs/rtmp/access.log;
location /stat { # 开启这两个页面可以观察rtmp流的统计,不需要可去掉
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl { # 查看状态的部分，不需要可去掉
root /opt/nginx-1.19.1-rtmp/nginx-http-flv-module/;
}
location /flv_live { # 拉http-flv的配置
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
# 通过http访问的这个路径会被转发到/tmp/hls 寻找对应的m3u8文件和视频片段例如 111.m3u8，111-622.ts，前缀名字为视频上传流的stream_key
location /hls { # 拉m3u8的配置
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /tmp/hls;
expires -1;
add_header 'Cache-Control' 'no-cache';
}
location / { # 首页
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}4. Push flow
Option 1: According to the need of this project, push the windows host computer screen data stream to the cloud, so OBS is used to push the stream.
1. Download OBS-Studio-26.0.2-Full-Installer-x64.exe and install it on the windows host computer
2. Run the software and click: File->Settings->Push. Set the streaming password as you like, such as 111. This is to distinguish the stream_key when pulling the stream later.
3. Window collection, select the page to be pushed
4. Click to start streaming. If the red box at the bottom appears, it means it has been successful.
Solution 2: Use ffmpeg to push the video stream to nginx
# mkdir -p /usr/local/ffmpeg
# cd /usr/local/ffmpeg
# wget https://github.com/FFmpeg/FFmpeg/archive/refs/heads/master.zip
# unzip master.zip
# ./configure
# 如果提示nasm/yasm not found or too old. Use --disable-x86asm for a crippled build.
# yum install yasm
# ./configure # 再次编译
# make
# make installPush local video file zhangsan.mp4 to stream
# ffmpeg -stream_loop -1 -re -i zhangsan.mp4 -c copy -f flv rtmp://192.168.1.232:1935/http_flv/stream_key
-i 要处理视频文件的路径，此处地址是一个监控摄像头
-s 像素
-f 强迫采用flv格式