存在的问题

  • rtsp
    无奈间接在网页端播放，须要插件的反对。不思考。
  • rtmp
    能够在网页播放，然而播放器须要flash的反对，chrome在2020年后对flash的反对非常不敌对,然而提早比拟底。
  • hls
    能够在网页播放，也不须要插件和flash的反对，然而毛病在于hls将网页进行切片传输，每次切片都会造成工夫的提早，而且在网络不好的中央，视频会有克顿和无奈播放的景象。

本文应用ffmpeg对网络镜头的视频流进行转码为hls，通过nginx进行代理，网页端通过hls.js显示网络镜头的画面。

ffmpeg转码为hls

通过ffmpeg将rtsp转码为hls，转码的输出为网络摄像机的子码流，视频和音频的解码间接应用镜头的解码编码器h264和acc。-hls_time 为 hls切片的工夫距离，工夫越短则提早越低，然而传输的带宽越大对服务器要求更高，-hls_list_size为.m3u8文件的长度，-hls_wrap为本地交换文件的大小。

start ffmpeg ^-i rtsp://username:password@192.168.1.123/Streaming/Channels/102?transportmode=unicast  ^-c copy ^-f   hls  ^-hls_time 1.0 ^-hls_list_size 2 ^-hls_wrap   2  ^ C:/nginx-1.19.2/html/hls/test.m3u8

搭建nginx并配置

nginx.conf配置文件

#user  nobody;worker_processes  1;#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {    worker_connections  1024;}http {    include       mime.types;    default_type  application/octet-stream;    # 跨域拜访    add_header Access-Control-Allow-Origin *;    add_header Access-Control-Allow-Headers X-Requested-With;    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;    #access_log  logs/access.log  main;    sendfile        on;    keepalive_timeout  65;    server {        listen       80;        #charset koi8-r;        #access_log  logs/host.access.log  main;        location / {            root   html;            index  index.html index.htm;        }}

前端视频显示

前端为了可能播放hls, 应用hls.js播放直播视频，hls.js不须要任何的播放器，能够间接在video元素上运行

https://www.npmjs.com/package...
  • html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>hls test</title></head><body>    <h1>hls test</h1>    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>    <video id="video"></video>    <script>        var video = document.getElementById('video');        // 视频的门路        var videoSrc = 'http://localhost/hls/test.m3u8';        if (Hls.isSupported()) {            var hls = new Hls();            hls.loadSource(videoSrc);            hls.attachMedia(video);            hls.on(Hls.Events.MANIFEST_PARSED, function () {                video.play();            });        }        else if (video.canPlayType('application/vnd.apple.mpegurl')) {            video.src = videoSrc;            video.addEventListener('loadedmetadata', function () {                video.play();            });        }    </script></body></html>
  • vue
<template>    <div>        <video ref="videoRef" height="500px" autoplay />    </div></template><script>import Hls from 'hls.js'export default {    data() {        return {            hls:''        }    },    mounted: function() {        const videoRef = this.$refs.videoRef        const url = 'http://localhost/hls/test.m3u8'        this.hls = new Hls();        this.hls.loadSource(url)        this.hls.attachMedia(this.$refs.videoRef)        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {            console.log('加载胜利');            this.$refs.video.play();          });        this.hls.on(Hls.Events.ERROR, (event, data) => {            console.log('加载失败');        });    }}</script>

最终显示成果

视频的提早大略有3-4秒，对于实时性较高的利用还是达不到要求。