vue中web端播放rtsp视频流（摄像头监控视频）（海康威视录像机）

在Vue中播放RTSP视频流通常需要使用WebRTC技术，因为浏览器原生不支持RTSP协议。你可以使用第三方库，如node-rtsp-stream与ffmpeg，将RTSP转换为Web可接受的流格式（如HLS或WebRTC）。

以下是一个简化的流程和示例代码：

1. 使用node-rtsp-stream在服务器端转换RTSP流为WebRTC。
2. 在Vue组件中使用webRTC视频标签播放转换后的流。

服务器端设置（Node.js）:

安装node-rtsp-stream:

npm install node-rtsp-stream

使用node-rtsp-stream转换RTSP流为WebRTC:

const Stream = require('node-rtsp-stream');
stream = new Stream({
  name: 'name',
  streamUrl: 'rtsp://your_camera_ip:port/stream',
  wsPort: 9999,
  ffmpegOptions: { // ffmpeg 标志
    '-stats': '', // 打印编码进度统计信息
    '-r': 30 // 设置帧率
  }
});

客户端（Vue组件）:

<template>
  <div>
    <video autoplay playsinline controls ref="videoElement"></video>
  </div>
</template>
 
<script>
export default {
  name: 'VideoStream',
  mounted() {
    this.createPeerConnection();
    this.createWebRTC();
  },
  methods: {
    createPeerConnection() {
      this.peerConnection = new RTCPeerConnection({
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          // 可以添加更多的stun和turn服务器
        ]
      });
    },
    createWebRTC() {
      this.peerConnection.ontrack = (event) => {
        this.$refs.videoElement.srcObject = event.streams[0];
      };
 
      const ws = new WebSocket('ws://localhost:9999');
      ws.on('message', (message) => {
        const json = JSON.parse(message);
        if (json.description) {
          this.peerConnection.setRemoteDescription(new RTCSessionDescription(json));
          this.peerConnection.createAnswer().then(sdp => {
            this.peerConnection.setLocalDescription(sdp);
            ws.send(JSON.stringify(sdp));
          });
        } else if (json.candidate) {
          this.peerConnection.addIceCandidate(new RTCIceCandidate(json.candidate));
        }
      });
    }
  }
};
</script>

请注意，这只是一个简化的示例，实际应用中你可能需要处理更多的错误和事件，并确保WebSocket和信令协议与node-rtsp-stream服务端配合使用。

这个流程假设你已经有了一个运行node-rtsp-stream的服务器，并且你的Vue应用可以连接到这个服务器。如果你需要部署服务器，请确保服务器安全和稳定运行，并处理好网络问题和防火墙设置。