vue3读取webrtc-stream 视频流

一.首先下载webrtc-stream,方便自己本地搭建视频流服务

https://download.csdn.net/download/cyw8998/90373521

解压后,启动命令

webrtc-streamer.exe -H 127.0.0.1:8020

二.vue3代码如下

html 复制代码
<template>
  <h1>video</h1>
  <video id="video" autoplay width="1050" height="1050"></video>
</template>

<script setup>
  import '@/assets/adapter.min.js';
  import '@/assets/webrtcstreamer.js';

  import { ref } from 'vue';
  import { computed } from 'vue';
  import { nextTick } from 'vue';
  import { useRouter } from 'vue-router'; // 引入useRouter函数
  const router = useRouter(); // 使用useRouter函数获取router实例
  console.log(router)
  const id = localStorage.getItem('id');
  const cameraUrl = localStorage.getItem('url');
  const id2 = "456";
  console.log("ididid:" + id)
  console.log("cameraUrl:" + cameraUrl)

  const webRtcServer = ref();
  const initWebRtcServer = async () => {

    nextTick(() => {

      // video:需要绑定的video控件ID
      //127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000
      // webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.10.26:8000')
      webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8020')
      //需要查看的rtsp地址
      // webRtcServer.value.connect('rtsp://admin:a12345678@192.168.3.11:554/Streaming/Channels/101')
      webRtcServer.value.connect('rtsp://rtspstream:vVMnC54NRjffltSsu0q7v@zephyr.rtsp.stream/pattern2')
    })
  }
  //页面销毁时销毁webRtc
  const webRtcServerDis = computed(() => {
    webRtcServer.value.disconnect()
    webRtcServer.value = null
  })
  initWebRtcServer();

</script>

<style scoped>
</style>

三.js文件拷贝

把压缩包中libs\adapter.min.js和webrtcstreamer.js 拷贝到Vue工程中assets目录下

相关推荐
大胡子大叔20 小时前
webrtc-streamer视频流播放(rstp协议h264笔记)
笔记·webrtc·rtsp·webrtc-streamer
_可乐无糖1 天前
AWS WebRTC: 判断viewer端拉流是否稳定的算法
linux·服务器·webrtc·aws
却道天凉_好个秋1 天前
WebRTC(十三):信令服务器
webrtc
却道天凉_好个秋11 天前
WebRTC(七):媒体能力协商
webrtc
GetcharZp15 天前
告别“只闻其名”!一文带你深入浅出 WebRTC,并用 Go 搭建你的第一个实时应用
后端·webrtc
平行云15 天前
3分钟搭建LarkXR实时云渲染PaaS平台,实现各类3D/XR应用的一键推流
云原生·webrtc·xr·云渲染·虚幻引擎·实时云渲染·像素流送
却道天凉_好个秋16 天前
WebRTC(六):ICE协议
服务器·网络·webrtc
从后端到QT16 天前
WebRtc ICE 模块分析
webrtc
平行云21 天前
LarkXR 赋能AI x XR数字供应链:引领智能设计、数字孪生与零售新未来
人工智能·webrtc·xr·云渲染·虚幻引擎·云展厅
CatalyzeSec21 天前
【插件推荐】WebRTC Protect — 防止 IP 泄漏
网络·webrtc