Big front-end skills

ES6, React, Vue, Webpack, Angluar

Service class

Node. js, express.js, koa.js

3D data image

three.js

2 d image

D3.js, Raphael. Js, echart.js

video

Video.js, hls.js, flv.js

live

Principle of live

  • HLS corresponds to video in ts format, which is supported only by Apple’s Browser
  • Mp4, WebM on demand
  • HLS, FLV partial live broadcast

Broadcast protocol

  • HLS tm video format delay
  • The CONFIGURATION of the RTMP FLV video format is complex
  • Http-flv protocol FLV video format with low latency

HLS agreement

  • Live playlist
  • Event PlayList (Static list)
  • Vod PlayList (full list

The delay is related to m318 files and slicing

RTMP protocol

RTMP is an acronym for Real Time Messaging Protocol. This protocol is based on TCP and is a protocol family, including RTMP and RTMPT/RTMPS/RTMPE. RTMP is a network protocol designed for real-time data communication. It is mainly used for audio, video and data communication between Flash, AIR platforms, and streaming/interactive servers that support RTMP. Anchor client. FLV video format.

The acquisition side uses web to do the protocol is WEbrTC.

HTTP – FLV agreement

The advantages of combining the two

  • FLV video format
  • Establishing a long connection
  • Establishing the HTTP Protocol

  1. Firewall interference can be avoided to some extent (for example, some equipment rooms only allow port 80 to pass).
  2. It is compatible with HTTP 302 jump and flexible scheduling
  3. You can use HTTPS as an encryption channel
  4. Good support for mobile (Android,ios)

video

Properties and methods

  • Map poster

  • Control the controls,

  • Autoplay autoplay

  • Loop play loop

  • Preload preload

  • The volume volume

  • Play Address Setting

  • Mute muted

  • Play time Setting

<! <video controls controlslist="nodownload nofullscreen"></video> <! - map - > < video poster = '. / poster. JPG "> < / video > <! --> <video autoplay></video> <! -- unmuted videos are not allowed to autoplay --> <video muted></video> <! --> <video loop></video> <! Video preload </video> <! --> <video id="_volume"></video> <script> var v = document.getelementbyid ('_volume') v.volume = 0.5 </script> <! <script> var v = document.getelementbyid ('_volume') v.currentTime = 60 <script> var v = document.getelementbyId ('_volume') v.rc = './test-2.mp4' </script> <! <source SRC ="movie.mp4" type="video/mp4"> <source SRC ="movie.ogg" Type ="video/ogg"> Your browser does not support the video tag. </video> <script> var v = document.getElementById('_volume') setTimeout(function(){ console.log('src',v.currentSrc); },1000) </script>Copy the code

The event

  • Video search
  • The length change
  • Metadata loading
  • Video download monitor
  • Playable monitor
  • Broadcast listening
  • Stop listening
  • Find the start
  • Find the end
  • Video load wait
  • End of the video
<video id="_volume"></video> <script> var v = document.getElementById('_volume'); console.log(v.duration); V. addeventListener (' loadStart ',function(e){console.log(' loadStart '); Function (e){console.log(' loadStart '); // Check the duration of the video console.log(v.duration); Function (e){console.log('loadedmetadata'); function(e){console.log('loadedmetadata'); Function (e){console.log('loadeddata'); // Load the next frame v.ardDeventListener ('loadeddata',function(e){console.log('loadeddata'); Function (e){console.log('progress');}) // The listener ('progress',function(e){console.log('progress'); Function (e){console.log('canplay'); Function (e){console.log('canplaythrough'); Function (e){console.log('play'); }) // pause v.addeventListener ('pause',function(e){console.log('pause'); Function (e){console.log('seeking'); }) // end of seeking v.addeventListener ('seeked',function(e){console.log('seeked'); Function (e){console.log('waiting'); function(e){console.log('waiting'); }) // When audio/video is ready after it has been paused or stopped for buffering,function(e){console.log('playing'); Function (e){console.log('timeupdate'); }) // returns whether audio/video playback has ended. Echo Listener('ended',function(e){console.log('ended'); }) // Return the MediaError object v.addeventListener ('error',function(e){console.log(v.error.code); }) </script>Copy the code

Production of live streams

Method 1: nginx + FFmpeg

  1. Install Nginx and FFMPEG
  2. Configure nginx
  3. Ready to video
  4. Use FFMPEG to push stream

Install Nginx

Mac: brew install nginx-full –with-rtmp-module Windows: nginx.org/en/download…

Windows download the following nginx/Windows-1.18.0 PGP

Install ffmpeg

Mac: Brew install ffmpeg Windows: ffmpeg.org/download.ht… Ffmpeg download ffmpeg

Ffmpeg checks whether it is installed

Enter ffmpeg

Configure nginx

location /hls { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root /usr/local/var/www; add_header Cache-Control no-cache; } RTMP {server {# rtmplive; # max_connections 1024; } # enable live on; hls on; /usr/local/var/ WWW/HLS hls_fragment 5s; }}}Copy the code

Nginx does not register a configuration error when starting nginx. [emerg] unknown directive “RTMP” in D:\nginx-1.18.0/conf/nginx.conf:9 However, I came down with the test example in nginx-rtmp-module which still reported an error. Nginx 1.7.11.3 Gryphon /sbin/nginx -s reload: nginx-rtmp-module: nginx-rtmp-module: nginx-rtmp-module: nginx-rtmp-module: nginx-rtmp-module: nginx-rtmp-module Aside the problem of

Push the flow

ffmpeg -re -i IPX-451.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtm ffmpeg -re -i IPX-451.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream

Download the VLC player to verify the push stream process

Approach two integrates services

  1. Download service
  2. Installation services
  3. Preparing source Videos
  4. Open the service
  5. Use FFMPEG to push stream

Start services under the server

open server

Push flow command

ffmpeg -re -i IPX-451.mp4 -c copy -f flv rtmp://localhost:1935/live/movie

Verify the address

  • RTMP: RTMP: / / localhost: 1935 / live/movie
  • FLV: http://127.0.0.1:7001/live/movie.flv
  • HLS: http://127.0.0.1:7002/live/movie.m3u8

H5 live

  • Video. js: customize UI, shortcut keys, bullet screen, and playing HLS
  • HLS. Js: HLS type live broadcast on demand, small
  • Flv. js: http-FLV protocol

Install ESLint globally

npm i eslint -g

Configuration eslint – init

There is a problem with the Hexo blog I built by myself, I cannot update the blog. I will migrate part of the blog to Nuggets first, and I will migrate to Nuggets later if I can. Fallen- Down hexo is hexo’s Fallen-down.

The relevant data

  • [Video]H5 and small program live development video tutorial √

  • How to develop an H5 small program live

  • DPlayer: indicates the video player

  • Xgplayer: HTML5 video player with parser to save traffic

  • Nginx-rtmp-module: media streaming server based on nginx

  • H5 and small program live development video source code: HTML5 video player with parser, can save traffic

  • Videojs plug-ins and skins

  • Super simple FFmpeg installation method √

  • Vue: cannot load file C: Users\XXX\AppData\Roaming\ NPM \vue. Ps1, because script √ cannot be run on this system

  • Unknown Directive “RTMP “√

  • Build RTMP live server with nginx-rtmp-module √

  • About HLS live stream HTML page play solution √

  • HTML5 live video and H5 live literacy

  • Big front end introduction and live broadcast principle

  • Live streaming in the front end

  • Use flv.js for live streaming

  • Web front-end HTML5 live function development

  • Use flv.js to quickly build HTML5 web live broadcast

  • html5-dash-hls-rtmp

  • About the ID compatibility problem when flv.js is playing in ios terminal

  • Front-end technology in live broadcast