Portable WIFI Trouble Diary (5)---Remote Video Surveillance

6. Remote video monitoring

In order to implement a web camera based on portable WIFI, I referred to the following video courses:

Teacher Wei Dongshan takes you step by step to build a video surveillance project from scratch

The system consists of three parts:Streaming terminal(portable WIFI), Streaming media server< /span>(browser/VLC player)Streaming client(cloud server),

Solution: Deploy the Nginx-RTMP Server platform based on docker on the cloud server. Then use the ffmpeg open source tool to push the video stream of the USB camera to the cloud server. Finally, simply develop a front-end interface to pull the video stream on the browser side/or use VLC player to directly open the rtmp address to play the video.

6.1 Insert the camera

Plug the USB camera into the USB docking station. My camera is a 1080p autofocus camera I bought on Taobao with a microphone. (The USB docking station uses a higher power charging head, and the 1A charging head cannot carry the USB camera)

Use the following command to install the lsusb tool in Debian system:
```
sudo apt-get install usbutils
```
Enter the following command to view the list of connected USB devices on the system:
```
lsusb
```

If your camera is properly connected to the system, the command will output information about the USB camera, including manufacturer and device ID. The information I printed out is as follows:

Bus 001 Device 003: ID 090c:1000 Silicon Motion, Inc. - Taiwan (formerly Feiya Technology Corp.) Flash Drive
Bus 001 Device 004: ID 0c45:636b Microdia USB 2.0 Camera
Bus 001 Device 002: ID 05e3:0610 Genesys Logic, Inc. Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

Use pacmd list-sources command to view the currently available audio input devices. You can see that my audio device number isdevice.string = "hw:1"
Use thels /dev command to print all device nodes. You can see that after inserting the camera, there are morevideo3j nodes. The device node used as the camera is< /span>/dev/video3

6.2 Configure streaming media server

There are many existing rtmp server solutions. I use nginx-rtmp server to accept and process video streams.

github open source address:arut/nginx-rtmp-module

Use docker to quickly deploy to my cloud server.

docker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp 
#-v ./nginx.conf:/etc/nginx/nginx.conf   自定义配置文件参数

Default address for push streaming:

rtmp://your-rtmp-server:1935/stream/视频流名称

Default access address for video streaming:

rtmp://your-rtmp-server:1935/stream/视频流名称
https://your-rtmp-server:8080/hls/视频流名称.m3u8
https://your-rtmp-server:8080/live/视频流名称.m3u8

Server video streaming statistics access address:

http://your-rtmp-server:8080/stat

6.3 FFmpeg streaming

Reference links:

FFmpeg is an open source cross-platform audio and video processing tool that can process audio, video and other multimedia formats. It can encode, decode, transcode, and edit multimedia files such as audio and video. It has very powerful functions and scalability, and is widely used in the field of audio and video processing.

FFmpeg can also use a variety of push protocols for push streaming, such as RTMP, RTSP, HLS, UDP, etc. We can use the command line to easily process audio and video, including extracting audio and video, encapsulating them into corresponding formats, encrypting and other operations.

First, install FFmpeg on your portable WIFI. It takes up 330M of storage space, which is quite large, and it takes a while to install.

Use port 1935 to push the stream to the cloud server:

ffmpeg -f v4l2 -video_size 640x480 -framerate 25 -i /dev/video2 -f alsa -ac 1 -r 8000 -i hw:1,0 -c:v libx264 -b:v 100k -maxrate 100k -bufsize 1000k -preset veryfast -tune zerolatency -c:a aac -b:a 8k -f flv rtmp://twinbee.cn/stream/webcam

parameter	meaning	parameter	meaning
-f v4l2	Set the input device to v4l2 camera	- and	Number of audio channels
-video_size	Set video screen size	-r	Set audio sample rate
-framerate	Set frame rate	-i hw:1,0	Set the location of the audio input device
-i /dev/video2	Set the location of the video input device	-c:v libx264	Set video encoder to H.264
-f alsa	Set the audio input device to alsa	-b:v	Specifies the average bitrate of the video
-c:a aac	Set the audio encoder to AAC	-maxrate	Specify the maximum bitrate of the video
-b:a	Specify the audio bitrate	-bufsize	Specify the buffer size of the video
-f flv	Set the output format to FLV	-preset	Specify the default value for video encoding
rtmp://twinbee.cn/stream/webcam	Specify push address	-tune	Specify optimization parameters for video encoding

Among them, webcam is the name of our customized video stream, and stream is the application name of the default configuration of nginx-rtmp server (can be modified through the configuration file).

6.4 VLC player playback

In VLC player – media – open network streaming and enter the address we configured:

rtmp://twinbee.cn/stream/webcam

start up:

6.5 Web display

Currently popular video streaming protocols:

protocol	http-flv	rtmp	hls
transfer method	http stream	tcp stream	http stream
Video packaging format	flv	flv	Ts file
Delay	Low	Low	high
Data segmentation	continuous flow	continuous flow	slice file
h5 play	flv.js	video.js	hls.js

We just used the VLC software rtmp protocol to pull the video stream. On the web page, rtmp video stream playback requires browser flash support, but after the end of 2020, all browserswill no longer support flash plug-ins, rtmp video stream and use flv.js to play it. http-flv cannot be played in the browser. At this time, you can re-encapsulate rtmp into Video stream

a. Reconfigure RTMP server

Github address: https://github.com/winshining/nginx-http-flv-module

nginx-rtmp server does not support http-flv output, so it needs to be reconfigured as nginx-http-flv server. It is a streaming media server based on nginx-rtmp-module, which supports http-flv output and is equivalent to the upgraded version of nginx-rtmp.

One-click deployment using docker:

docker run --rm -it -p 8080:80 -p 1935:1935 mugennsou/nginx-http-flv

Docker deployment documentation:http-flv/README_CN.md at master · mugennsou/http-flv · GitHub

The default application name in its configuration file is demo

So the address of rtmp streaming is:

rtmp://your-rtmp-server:1935/demo/视频流名称

Video stream access address:

http://your-rtmp-server:8080/live?app=demo&stream=视频流名称

b. Re-push the stream

ffmpeg -f v4l2 -video_size 640x480 -framerate 25 -i /dev/video2 -f alsa -ac 1 -r 8000 -i hw:1,0 -c:v libx264 -b:v 100k -maxrate 100k -bufsize 1000k -preset veryfast -tune zerolatency -c:a aac -b:a 8k -f flv rtmp://twinbee.cn/demo/webcam

http-flv online test address: http://bilibili.github.io/flv.js/demo/ (no flash plug-in required)

Use the above website to test the push address and the push is successful!

c.H5 front-end interface

Write a simple HTML interface and deploy it on my personal WordPress website page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTTP-FLV 播放器</title>
    <!-- 引入 flv.js 库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
</head>
<body>
    <video id="videoPlayer" controls></video>
    <script>
        if (flvjs.isSupported()) {
      
      
            // 配置播放器
            var videoPlayer = document.getElementById('videoPlayer');
            var flvPlayer = flvjs.createPlayer({
      
      
                type: 'flv',
                // 指定 HTTP-FLV 流 URL
                url: 'http://twinbee.cn:8080/live?app=demo&stream=webcam'
            });
            flvPlayer.attachMediaElement(videoPlayer);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

There is a delay of about 10 seconds in the picture. Don't quite know why yet.

After the browser does not support the flash plug-in, the solution for h5 to play rtmp live stream