海康摄像头无插件浏览器监控(一)（ffmpeg+nginx+vue）

前言

迫于某个应用，需要内网开发一个能在网页上录制视频，并且回放，还能选取每个片段进行剪辑的，于是调研了下摄像头，公司目前只有一个海康的摄像头，于是看了下，特此记录下使用过程，本篇只调研到了无插件播放，后续会深入研究下页面的问题。

摄像头rtsp 转m3u8

海康的摄像头支持 rtsp 推流，使用VLCPlayer 尝试以后可以正常获取流，但是从浏览器播放需要海康的插件，于是考虑采用ffmpeg 来将 rtsp 转化为 m3u8。
下载 ffmpeg ，配置好环境变量，下载nginx ,修改相关配置文件 nginx.conf

#配置nginx 转发m3u8
 server {
        listen        20000;
        server_name  localhost;
        root   "D:/home";
        location / {
            index index.php index.html error/index.html;
            autoindex  off;
           types{  
            application/vnd.apple.mpegurl m3u8;  
             video/mp2t ts;  
          }  
          add_header Cache-Control no-cache;
          add_header Access-Control-Allow-Origin *;
        }

}

ffmpeg 转化m3u8

ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/ch1/sub/av_stream" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 10000  -vcodec copy -s 216x384 -b 1024k -y D:/home/test2.m3u8

这是将m3u8 索引文件写到本地磁盘，文件大小限制为了 10000 个 ts
然后用nginx 代理到 本地磁盘 的 m3u8 的文件夹来解析。

m3u8 播放

浏览器播放，正常按照前端开发就可以，vue 可以使用 vue-video-player来播放

<template>
	<div class="container">
		<div class="player">
		<video-player class="video-player vjs-custom-skin"
			ref="videoPlayer"
			:playsinline="true"
			:options="playerOptions"
		></video-player>
 </div>
 </div>
</template>
 
<script>
import { videoPlayer } from "vue-video-player";
export default {
	name: 'living',
	data () {
		return {
			playerOptions: {
				//playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoplay: false, //如果true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 导致视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [{
					type: "application/x-mpegURL",
					src: "http://192.168.2.9:20000/test2.m3u8" //你的m3u8地址（必填）
				}],
				poster: "poster.jpg", //你的封面地址
				width: document.documentElement.clientWidth,
				notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				//  controlBar: {
				//   timeDivider: true,
				//   durationDisplay: true,
				//   remainingTimeDisplay: false,
				//   fullscreenToggle: true //全屏按钮
				//  }
			}
		}
	},
	components: {
		videoPlayer
	},
	methods: {
		//事件
	}
}
</script>
 
<style scoped>

</style>

这样就能在浏览器里实时播放海康的摄像头的视频流，而不需要装任何插件。

后续

视频流取到了，保存的 m3u8 也可以转 mp4

ffmpeg -i "http://192.168.2.9:20000/test2.m3u8" -vcodec copy -acodec copy -absf aac_adtstoasc test.mp4

视频剪辑

ffmpeg -i input.mp4 -ss 00:10:03 -t 00:03:00 -vcodec copy -acodec copy output.mp4

本地摄像头也可以实现

#获取音视频设备列表
ffmpeg -list_devices true -f dshow -i dummy
# 将设备推流为 m3u8
ffmpeg -f dshow -i video="HD 720P webcam":audio="麦克风 (USB microphone)" -strict -2 -f hls -hls_list_size 0 D:/home/123.m3u8