vue项目引入webrtc-streamer渲染rtsp视频流解决花屏问题

这真的是血与泪的教训，花了将近两天的时间才解决问题，一直以为是视频流本身的问题，使用vlc发现视频流正常，就是项目中不正常，不死心又在网页中查看视频流http://127.0.0.1:8000/webrtcstreamer.html?video=rtsp://xxx，发现网页也显示正常，又去官网查看，发现了不一样的点，网上的帖子都是这么写的 webRtcServer.connect('rtsp://xxx')，但是官网后面会携带有其他参数，后续发现了一个帖子是解决这个花屏问题的，在项目中试了一下，发现真的可以，我也来记录一下这个问题。
1.webrtc-streamer官网下载压缩包，解压，cmd命令webrtc-streamer.exe -o运行exe

2.将这两个文件导入public文件夹，在index页面引入

3.vue代码,webRtcServer.connect('rtsp://xxx',null,"rtptransport=tcp",null) rtptransport=tcp是关键，之前没写这个导致视频卡顿且花屏，写上这个就好了。

<template>
    <div class="rtsp_video">
        <video id="video" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted ,nextTick} from "vue";
const props = defineProps({
    videourl: {
        type: String,
        required: false,
    },
});
let webRtcServer 
const camera_ip = ref('127.0.0.1:8000')
onMounted(() => {
        //webrtc-streamer.exe -o在window版本下运行这个命令   new WebRtcStreamer('video', location.protocol + '//' + camera_ip.value)
        webRtcServer = new WebRtcStreamer('video', 'http:' + '//' + camera_ip.value)
        //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
        webRtcServer.connect('rtsp://xxx',null,"rtptransport=tcp",null)
       
})
onUnmounted(() => {
    webRtcServer.disconnect()
    webRtcServer = null
})
</script>
<style lang="less" scoped>
.rtsp_video{
    height: 480px;
    border: 2px solid rgb(101, 149, 221);
}
</style>