使用webrtc-streamer播放海康rtsp监控视频vue3 vite ts

精选原创

牛掰666 2024-09-19 10:40:03 ©著作权

文章标签 ide 服务器 Vue 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者牛掰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

WebRTC Streamer 是一个基于 WebRTC 的流媒体服务器，它能够将 RTSP 流转换为 WebRTC 流，从而使浏览器可以直接播放这些流。

准备工作

安装 WebRTC Streamer 服务器：确保你已经在服务器端安装并配置好了 WebRTC Streamer。
获取 RTSP 流地址：获取海康威视摄像头的 RTSP 流地址，通常形式为 rtsp://username:password@ip_address:port/stream。
配置 WebRTC Streamer：将 RTSP 流地址配置到 WebRTC Streamer 中，使其能够将 RTSP 流转换为 WebRTC 流。

安装依赖

首先，你需要在你的 Vue 3 + Vite + TypeScript 项目中安装所需的依赖包。

npm install webrtc-streamer-client

创建 Vue 组件

接下来，创建一个 Vue 组件来处理 WebRTC 连接和视频播放。

`VideoPlayer.vue`

<template>
  <div>
    <video ref="videoPlayer" autoplay playsinline></video>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { StreamerClient } from 'webrtc-streamer-client';

export default defineComponent({
  setup() {
    const videoPlayer = ref<HTMLVideoElement | null>(null);
    const streamerClient = new StreamerClient('ws://your-streamer-server:port/streamer', {});

    const startStream = async () => {
      try {
        await streamerClient.connect();
        const stream = await streamerClient.subscribe('your-channel-name', { audio: false, video: true });
        videoPlayer.value!.srcObject = stream;
      } catch (error) {
        console.error('Failed to start stream:', error);
      }
    };

    onMounted(() => {
      startStream();
    });

    onUnmounted(() => {
      streamerClient.disconnect();
    });

    return {
      videoPlayer,
    };
  },
});
</script>

<style scoped>
video {
  width: 100%;
  height: auto;
}
</style>

配置 WebRTC Streamer 服务器

确保你的 WebRTC Streamer 服务器已经配置好了 RTSP 流地址，并且能够正确地将 RTSP 转换为 WebRTC 流。下面是一个简单的配置示例：

配置文件 `streamer.conf`

[General]
log_level = info

[RTSP]
address = rtsp://username:password@ip_address:port/stream
name = your-channel-name

启动 WebRTC Streamer 服务器

在服务器端启动 WebRTC Streamer：

./webrtc-streamer -c streamer.conf

使用组件

在你的 Vue 3 应用程序中引入并使用 VideoPlayer 组件。

`App.vue`

<template>
  <div id="app">
    <VideoPlayer />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import VideoPlayer from './components/VideoPlayer.vue';

export default defineComponent({
  components: {
    VideoPlayer,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>