vue 播放海康rtsp

### 实现 RTSP 流在 Vue.js 中的集成

为了实现在现代浏览器中播放来自海康威视摄像机的 RTSP 流，通常需要借助 WebRTC 或者第三方服务来转换 RTSP 协议为适合网页使用的协议。直接通过 HTML5 `<video>` 标签无法支持 RTSP 流。

一种常见的解决方案是利用 FFmpeg 和 Nginx 的组合来进行流媒体服务器端处理，再将转码后的 HLS (HTTP Live Streaming) 或 WebSocket 推送到前端展示[^1]。

#### 使用 Nginx-RTMP 模块搭建直播服务器

安装配置 nginx 并加载 rtmp 模块可以完成从 RTSP 到 HTTP-FLV/HLS 转换：

sudo apt-get install ffmpeg nginx libnginx-mod-rtmp

编辑 `/etc/nginx/nginx.conf` 添加如下内容:

rtmp {
    server {
        listen 1935;
        chunk_size 4096;

        application live {
            live on;
            record off;
            
            exec ffmpeg -i rtsp://admin:password@camera_ip_address/Streaming/channels/1 \
                -c:v copy -f flv rtmp://localhost/live/$name;
        }
    }
}

重启 Nginx 后即可启动推拉流服务.

#### 前端部分：基于 Video.js 插件开发组件

创建名为 `HikvisionPlayer.vue` 组件文件用于封装视频播放逻辑：

<template>
  <div class="player-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
require('videojs-contrib-hls');

export default {
  name: "HikVisionPlayer",
  props: ['streamUrl'],
  data() {
      return { player: null };
  },
  mounted() {
      this.player = videojs(this.$refs.videoPlayer, {
          controls: true,
          autoplay: false,
          fluid: true,
          sources: [{
              src: this.streamUrl,
              type: 'application/x-mpegURL'
          }]
      });
  },
  beforeDestroy() {
      if (this.player) {
          this.player.dispose();
      }
  }
};
</script>

<style scoped>
.player-container {
  width: 100%;
  height: calc(100vh - 8rem);
}

@media only screen and (min-width: 768px){
  .player-container{
     max-height: none !important; 
  }  
}
</style>

此方法能够有效降低延迟至秒级以内，并提供较好的兼容性和稳定性。