前端 播放rtsp 实时视频流_前端播放rtsp视频流

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

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

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

页面使用

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();

 })