技术笔记

介绍

通过调研 考察监控视频流推送 web 端 技术方案

技术方案

1. 调研

调研了以下几种方案

  • 方案 1：基于 websocket 的实时流方案 WebRTC ：WebRtcStreamer
  • 方案 2：VLC 插件播放方案
  • 方案 3：HLS 方案 、RTMP 方案

2. 方案 1：基于 websocket 的实时流方案

2.1 方案优势

  • 实时性好
  • 开发难度低

2.2 方案缺点

  • 需要服务端部署一套 视频解码器
  • 需要客户端支持 websocket 协议

2.3 方案实施步骤

  1. webrtc-streamer 下载地址open in new window
  2. ffmpeg 下载地址open in new window

    注意：ffmpeg 需要监控摄像头 RTSP 格式设置成 h264 编码

  3. vue 案例
<template>
  <div
    class="videoCanvas"
    :style="{
      height: height,
      width: width,
      background: '#000',
      cursor: 'pointer',
    }"
  >
    <video
      v-if="urls"
      ref="valveVideogjRef"
      autoplay
      :data-url="urls"
      :controls="false"
      muted
      playsinline
      style="width: 100%;height: 100%;"
      :style="{
        objectFit: objectFit,
      }"
    ></video>
    <span v-else class="noData"> 预留位置暂无视频 </span>

    <div
      class="vodepAbs"
      :style="{
        height: height,
        width: width,
      }"
    ></div>
    <span v-if="error" @click="handleReloadData" class="noDatareload">
      <el-icon style="color:#eee;font-size:28px;"><RefreshRight /></el-icon>
    </span>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  nextTick,
  watch,
  onUnmounted,
} from "vue";

const innerVisible = ref(false);
const state = reactive({});

const porp = defineProps({
  height: {
    type: String,
    default: "100%",
  },
  width: {
    type: String,
    default: "100%",
  },
  objectFit: {
    type: String,
    default: "fill", //fill
  },
  urls: {
    type: String,
  },
});
let webRtcServer: any = null;
const error = ref(false);
const valveVideogjRef = ref();
const init = () => {
  const WebRtcStreamer: any = window["WebRtcStreamer"];
  let server = import.meta.env.VITE_BASE_WS_URL_VIDEO;
  //  let server = 'http://192.168.43.119:8000'

  if (webRtcServer) {
    webRtcServer.disconnect();
    webRtcServer = null;
  }
  webRtcServer = new WebRtcStreamer(valveVideogjRef.value, server);
  //需要查看的rtsp地址,地址为财物系统地址
  webRtcServer.connect(porp.urls);
  webRtcServer.onError = (data: any) => {
    error.value = true;
  };
};
const handleReloadData = () => {
  error.value = false;
  if (webRtcServer) {
    webRtcServer.disconnect();
  }
  if (porp.urls) {
    nextTick(() => {
      init();
    });
  }
};
onUnmounted(() => {
  if (webRtcServer) {
    webRtcServer.disconnect();
  }
});
watch(
  () => porp.urls,
  (val) => {
    if (webRtcServer) {
      webRtcServer.disconnect();
    }
    if (val) {
      nextTick(() => {
        init();
      });
    } else {
    }
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.videoContent {
  // width: 450px;
  // height: 222px;
  //   position: relative;
}
.vodepAbs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.noDatareload {
  position: absolute;
  top: 20px;
  right: 20px;
  // transform: translate(-10%,-10%);
  font-size: 26px;
  color: #fff;
  z-index: 2;
}
.noData {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  text-align: center;
  color: #fff;
}
.videoCanvas {
  position: relative;
  background-color: #000;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
  1. 部署 1,2 服务 让后台处理就好了 不会可以联系文章作者 QQ群 953344438

3. 方案 2：VLC 插件播放方案

3.1 方案优势

  • 实时性好
  • 可以直接播放RTSP，无需任何中介服务器的帮助

3.2 方案缺点

  • 需要手动安装插件； 基于NPAPI，高版本的 Chrome 和 Firefox 不支持，只有360浏览器支持

3.3 方案实施步骤

  1. 安装 VLC 插件 下载插件1open in new window 下载插件2open in new window
  2. 编写代码，调用 VLC 插件播放 RTSP 流
  3. html实现
//html部分
<object type='application/x-vlc-plugin' windowless="true" pluginspage="http://www.videolan.org/" id="vlc" events="false">
    <param name='mrl'> 
    <param name='volume' value='50'>
    <param name='autoplay' value='true'>
    <param name='loop' value='false'>
    <param name='fullscreen' value='false'>
    <param name='controls' value='false'>
</object>
​<script>
//mrl定义相机的rtsp地址
let mrl= "rtsp://admin:buaa123456@192.168.1.106:554/h264/ch1/main/av_stream";
//获取vlc的原生dom对象
vlc=$("#vlc")[0];
//先清除上次播放列表
vlc.playlist.clear();
//添加新的播放地址
vlc.playlist.add(mrl);
//开始播放
vlc.playlist.play();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4. 方案 3：HLS 方案、 RTMP 方案

4.1 方案优势

  • 实时性一般
  • 开发难度低
  • 服务端无需特殊支持，只需要支持 http 协议即可
  • 客户端无需特殊支持，只需要支持 http 协议即可

4.2 方案缺点

  • 实时性一般

4.3 方案实施步骤

  1. 后端 ffmpeg + nginx + nginx-rtmp-module
  2. 前端 video.js EasyPlayer.js

结论

经过调研，我们最终选择了方案 1：基于 websocket 的实时流方案。该方案具有实时性好、开发难度低、服务端无需特殊支持、客户端无需特殊支持等优点，并且能够满足我们的需求。