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

发布于:2025-07-06 ⋅ 阅读:(25) ⋅ 点赞:(0)

这真的是血与泪的教训,花了将近两天的时间才解决问题,一直以为是视频流本身的问题,使用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>