乐趣区

关于前端:海康威视监控使用html播放

jiezi

存在的问题

  • 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 秒，对于实时性较高的利用还是达不到要求。

退出移动版