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:[email protected]:554/Streaming/Channels/101')
      webRtcServer.value.connect('rtsp://rtspstream:[email protected]/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目录下

相关推荐
chen_song_2 天前
WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试
算法·音视频·webrtc·交互·媒体
程序员阿灿2 天前
ZLMediaKit 源码分析——[3] ZLToolKit 中EventPoller之网络事件处理
网络·webrtc·zlmediakit·zltoolkit
EasyCVR3 天前
视频AI赋能水利行业生态治理,水电站大坝漂浮物实时监测与智能预警方案
webrtc·智能硬件
拖孩5 天前
[特殊字符]我在 Chatterbox(话匣子)中 WebRTC 的使用-上篇(基本介绍)
开发语言·php·webrtc
多看书少吃饭5 天前
WebRTC简介及应用
前端·vue.js·websocket·webrtc
chen_song_7 天前
WebRTC中音视频服务质量QoS之FEC+NACK调用流程
udp·音视频·webrtc·rtc·h264·nack·fec
_洛_神10 天前
Webrtc编译官方示例实现视频通话
音视频·webrtc
EasyCVR10 天前
跨平台IPC通信、嵌入式WebRTC轻量化引擎:解析EasyRTC在ARM/Linux平台的性能突破
linux·arm开发·webrtc
GDAL10 天前
WebRTC协议全面教程:原理、应用与优化指南
webrtc
m0_7482400211 天前
WebRTC实现双端音视频聊天(Vue3 + SpringBoot)
spring boot·音视频·webrtc