共计 2488 个字符，预计需要花费 7 分钟才能阅读完成。
存在的问题
- 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 秒，对于实时性较高的利用还是达不到要求。
正文完
