web video playback

1. Three major live video protocols:

1.
The full name of RTMP is Real Time Messageing Protocol, a real-time messaging protocol;
origin: a transmission protocol proposed by Adobe based on the audio and video flv packaging format corresponding to the Flash Player player;
advantages:
1. The delay is very low, generally between 1~ 3s;
2. Stable continuous playback for a long time;
3. General video conferencing and interactive live broadcast are sufficient;
Disadvantages:
1. Based on the application layer TCP long connection protocol data transmission, non-public ports may be blocked by firewalls;
2. It It is Adobe's proprietary protocol, and many devices cannot play it, especially on the IOS mobile terminal, which requires the use of a third-party decoder;
3. It is unstable under high concurrency.
Extension:
1. RTMP is the main protocol, in addition, it includes variants such as RTMPT / RTMPS / RTMPE / RTMFP;
2. Among them, RTMFP is a protocol based on UDP transmission; it is often used in P2P communication;
application: live streaming (Live ), on-demand (VOD); more for streaming (host side);

*Push stream: content producer; the process of transmitting the live video signal to the network has relatively high requirements on the network environment. If it is unstable, there will be phenomena such as live broadcast stuttering, and the viewing experience will be poor; *Pull stream:
content Consumers; pull the live data from the server, analyze, transcode, and finally present it on the terminal;

P2P

1. The full name is peer to peer, point-to-point or end-to-end communication technology;
2. The problem to be solved: devices in different intranet environments communicate directly through their respective intranet IPs;
3. Basic conditions: the intermediate server has a public network ip address ; NAT network address exchange protocol (Network Address Translation): Intranet penetration, hole punching, probes, middleware, etc.;
4. Front-end application: WebRTC (Web Real-Time Communications) real-time communication technology: establish point-to-point between browsers Links to realize the transmission of audio and video streams or other data; online chat room, screen sharing, file sharing, point-to-point transmission of large files, real-time games, live broadcast, web search based on p2p; 5. Intermediate services: 1. peerjs
self Transit service provided; 2. Build peerjs-server by yourself; 3. Backend build transit

HLS

1. Full name: HTTP Live Streaming;
2. Origin: Apple's HTTP-based streaming media real-time transmission protocol;
3. Principle: Cut the entire streaming media data into continuous ts files with shorter duration (small fragments, a few seconds ) and access ts files sequentially through M3U8 index files;
4. Advantages:
1. Based on HTTP, it allows to penetrate any firewall or proxy server that allows HTTP data.
2. It is easy to use content distribution network to transmit media stream and speed up.
5. Disadvantage: high delay of 10s+;
6. Application: on-demand and live broadcast fields;
* An important sign to distinguish between on-demand and live broadcast: whether there is an m3u8 index file #EXT-X-ENDLIST;

HTTP-FLV

Full name: HTTP FLASH VIDEO
Advantages:
1. Based on HTTP, it allows to penetrate any firewall or proxy server that allows HTTP data.
2. You can use HTTPS as an encrypted channel.
3. Good mobile support.
4. The delay is as low as 2s.

2. Front-end commonly used video library

1. VideoJS (recommended)

Official website: https://docs.videojs.com/
Advantages: open source and free; large and comprehensive; built with pure CSS+JS, high scalability; compatible with all browsers;
disadvantages: documents are pure English, do not support RTSP streams (commonly used for video surveillance ) to play, depends on flash.
Note:
1. rtmp: type is set to: rtmp/flv.
2. hls: type is set to: application/x-mpegURL.

2. CKPlayer (not recommended)

Official website: https://www.ckplayer.com/
Advantages: relatively complete functions; independent configuration files; independent material and skin support;
disadvantages: not suitable for small screen playback, the style is easy to be confused; UI style is not very friendly; independent functions will be added later , relatively difficult; occupies the main package of the project;
use:
1. It needs to be placed in the public or assets file, and index.html is imported as a static file;
2. The local and sandbox environment UIs are inconsistent;
3. [Screenshot button] in full screen , will disappear, because it is only positioned relative to the parent;
4. The function control of the video screen, the DOM structure is dynamically output, there is no class value, and the ui cannot be covered;
5. The volume control does not support vertical display;

3. Watermelon player

Official website: https://v2.h5player.bytedance.com/
Bytedance combines its own business to create a wheel; [Video screenshot] There are pitfalls, but I dare not step on them.

4、DPlayer

Official website: https://dplayer.js.org/zh/Advantages
:
1. The API is simple;
2. The UI style is more in line with modern aesthetics, and the button control structure is clear; the style can be overridden by class;
3. Integrated barrage;
4. Support Mainstream videos need to be combined with other component libraries: hls.js, flv.js, etc.;
5. GitHub is continuously maintained; Issue has solutions to common problems;
screenshot function:
1. The built-in screenshot configuration cannot set the name of the picture; default Dplayer.png;
2. Take over the screenshot data and let the developer operate: https://github.com/DIYgod/DPlayer/issues/1006
Right-click menu:
1. Block: https://github.com/DIYgod/DPlayer/ Issues/544
prohibits continuous requests for m3u8 and ts files:
1. Although the player is destroyed, the HLS service is still running: https://github.com/DIYgod/DPlayer/issues/628
2. HLS.js configuration: https ://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsstartlevel
Vue secondary packaging:
https://console.cloud.baidu-int.com/devops/icode/repos /baidu/adu/v2xapp-key-vehicle-front/blob/develop:src/components/videoPlayer/dPlayer.vue

"dplayer": "^1.26.0",
"hls.js": "^1.0.5",
 
import DPlayer from '@/components/videoPlayer/dPlayer';
 
<DPlayer
    class="video-area"
    :ref=""
    :key=""
    :className=""
    :videoUrl=""
></DPlayer>

3. Canvas canvas pollution

Implications: Since the pixels in a bitmap may come from a variety of sources, including images or video retrieved from other hosts, security concerns inevitably arise. Reference: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
Scenarios: h5 painting sharing posters, front-end cropped images, composite images, front-end video screenshots, use of html2Canvas plug-ins, etc.
Result: The browser will prevent reading data from the canvas, such as toDataURL(), toBlob(), getImageData() methods are not available.

Solution

let video = document.querySelector('#dplayer video');
video.setAttribute('crossOrigin', 'anonymous'); // 重点，前提：服务端的视频支持跨域
 
const canvas = document.createElement('canvas');
canvas.width = this.player.video.videoWidth;
canvas.height = this.player.video.videoHeight;
canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL('image/jpg');

Possible solution: use the ability of image tags to cross domains

// 西瓜视频、网上大多资料的解决方案
let img = new Image();
img.setAttribute('crossorigin', 'anonymous') // 给图片设置允许跨域
image.src = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
img.onload = function () {
    
    
    // do Something
}
img.error = function () {
    
    }