Project requirements, need front-end page real-time display of the video collected by the camera, video ah, before no contact, after some research, try, have to say, online articles are really similar, stepped on many pits, sorted as follows.

One, popular science

1. The process

2. Common video streaming formats

● RTMP ● RTSP ● HLS ● FLV ● RTSP ● HLS ● FLV

3.FLV

Native video labels only support Ogg, MPEG4, and WebM formats ● Flash plug-in is required by default to play ● Bilibili open source FLV. js plug-in can be directly transcoded, vue projects directly use ○ Streaming video encoding must be H.264

4.HLS

● The whole stream is divided into a small FILE download based on HTTP, so it is not suitable for live broadcast, the latency will be higher than other protocols, high requirements for network quality ● Front-end processing of HLS format video streams, introducing vide.js

5.RTSP

● Real-time transmission protocol ● Large screen project most videos are transmitted and displayed by installing monitoring cameras ● Low latency, directly provided by the manufacturer, and network load balancing ● Mobile terminal is not supported, browser compatibility is poor, requiring a browser of an earlier version and plug-in installation

6.RTMP

● Based on TCP, high real-time, high stability, mainly used for live streaming ● Generally transmitted for FLV stream

Two, code implementation

Regardless of project requirements for the time being, the concrete realization of front-end realizable approaches is carried out as follows:

1. Internet Explorer + VLC plug-in

  • Install the VLC plug-in in Internet Explorer to play videos in RTSP and RTMP formats. The code is as follows

Disadvantages:

  • You need to specify the browser and install the specified plug-in
  • The VLC plug-in is not stable and often does not respond during testing

2. Play vUE in FLV format

In the VUE project, flv.js is installed to play video streams in FLV encoding format directly

3. Directly play the HLS format

4. The webrtc

4.1 documents:Webrtc.org/getting-sta…

4.2 WeBRTC features are particularly powerful, there are few references on the web, the current attempt is to weBRTC-Streamer plug-in, RTSP direct playback

  • Download webrtC-Streameran installation package, start webrTC service, command behavior: . / webrtc – the streamer RTSP: / / 172.16.100.36:8554 / CV/admin: 123, pit is RTSP address must be standard, otherwise unable to play
  • RTSP address does not correspond to the standard display
  • RTSP address standard after

  • The corresponding code

  • The webrtC-Streamer plugin itself does not support RTMP

4.3 the vue – webrtc

  • The survey is mostly used for live broadcasting, and the corresponding function for directly playing RTSP and RTMP has not been found at present

Third, summary

From several program survey, browser does not support flash plug-in has become a trend, do not recommend IE + VLC plug-in program, as for the other several direct play method, depending on the project needs, but my personal opinion, the mainstream should be WebrTC (ps: Many of the local test addresses involved in the code screenshots are transferred from the background with ffmpeg 😊😊😊)

Video xiao Bai, welcome correction!

Keep trying, update…… later