前端 播放rtsp 实时视频流

Docker部署WebRTC-Streamer_webrtc-streamer docker-CSDN博客 前端及后端相关配置

下载webrtc-streamer  在项目中引入adapter.min.js 和webrtcstreamer.js

webrtcstreamer.js 文件中导出 export default WebRtcStreamer;

页面使用

<template>

  <video id="video" controls autoplay muted width="500" height="500"></video>

</template>

<script setup>

import { ref ,onMounted,onUnmounted } from "vue";

import WebRtcStreamer from "./webrtcstreamer.js"

const webRtcServer = ref(null);

onMounted(() => {

  initVideo();

});

// 创建视频实例

const initVideo = () => {

  const video = document.getElementById('video');

    if (video) {

       // webrtc服务器地址

       // 后端部署webrtc 地址

        const serIp = 'http://10.11.180.111:8000'

        webRtcServer.value = new WebRtcStreamer("video", serIp);

      // //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。

      // //注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改

      webRtcServer.value.connect(

          "rtsp://77.110.228.219/axis-media/media.amp"

      );

    } else {

      console.error('视频元素未找到');

    }

};

// 销毁视频实例

 onUnmounted(() => {

   webRtcServer.value.disconnect();

 })

</script>