一.首先下載webrtc-stream，方便自己本地搭建視頻流服務
https://download.csdn.net/download/cyw8998/90373521
解壓后，啟動命令
webrtc-streamer.exe -H 127.0.0.1:8020
二.vue3代碼如下
<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')})}//頁面銷毀時銷毀webRtcconst webRtcServerDis = computed(() => {webRtcServer.value.disconnect()webRtcServer.value = null})initWebRtcServer();</script><style scoped>
</style>三.js文件拷貝
把壓縮包中libs\adapter.min.js和webrtcstreamer.js 拷貝到Vue工程中assets目錄下
)