1、下載webrtc-streamer，下載的最新window版本
Releases · mpromonet/webrtc-streamer · GitHub
?2、解壓下載包
?3、webrtc-streamer.exe啟動服務(wù)
（注意：這里可以通過當(dāng)前文件夾下用cmd命令webrtc-streamer.exe -o這樣占用cpu會很少，直接雙擊exe文件會占用cpu）
cmd? webrtc-streamer.exe -o 啟動如下圖所示，此時在瀏覽器訪問127.0.0.1:8000可以看到本機(jī)監(jiān)控畫面
?4、將下載包html文件夾下webrtcstreamer.js文件和html/libs文件夾下adapter.min.js文件復(fù)制到vue項目public目錄下。在index.html文件里引入這兩個js文件
5、修改視頻編碼：(H.264)
6、編寫實時播放測試頁面?
<template>
? <video id="video" controls autoplay muted width="800" height="600"></video>
</template>
<script setup>
const webRtcServer = ref();
// webrtc服務(wù)器地址
const IP = "http://127.0.0.1:8000";
onMounted(() => {
? initVideo();
});
?onBeforeUnmount(() => {
? destroyVideo();
});
// 頁面激活
onActivated(() => {
? // 緩存頁面 打開頁面 實現(xiàn)播放
? const video = document.getElementById("video");
? video.paused && video.play();
});
// 頁面停用
onDeactivated(() => {
? // 緩存頁面 離開頁面 實現(xiàn)暫停
? const video = document.getElementById("video");
? video.play && video.pause();
});
?// 創(chuàng)建視頻實例
const initVideo = () => {
? webRtcServer.value = new WebRtcStreamer("video", IP);
? //需要查看的rtsp地址,根據(jù)自己的攝像頭傳入對應(yīng)的rtsp地址即可。
??//注意：視頻編碼格式必須是H264的，否則無法正常顯示，編碼格式可在攝像頭的后臺更改
? webRtcServer.value.connect(
? ? "rtsp://admin:123456@192.168.1.64:554/Streaming/Channels/101"
? );
};
// 銷毀視頻實例
const destroyVideo = () => {
? webRtcServer.value &&
? ? (webRtcServer.value.disconnect(), (webRtcServer.value = null));
};
</script>
<style scoped lang="scss">
</style>
?
7、錄像機(jī)NVR回放視頻流地址編寫
rtsp://用戶名:密碼@IP:554/Streaming/tracks/通道及碼流starttime=年月日t時分秒z&endtime=年月日t時分秒z?
例如 回放開始時間為2024-03-12 10:30:00結(jié)束時間為2024-03-12 11:40:30且通道號為1的主碼流視頻
// 其它步驟同上
const url="rtsp://admin:123456@192.168.1.65:554/Streaming/tracks/101?starttime=20240312t103000z&endtime=20240312t114030z"
?webRtcServer.value.connect(url);
注意：可以沒有結(jié)束時間，如果沒有去掉 “ &endtime=20240311t174030z ”這一塊；
注意：視頻編碼格式必須是H264的文章來源：http://www.zghlxwxcb.cn/news/detail-848723.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-848723.html
到了這里，關(guān)于VUE3 播放RTSP實時、回放(NVR錄像機(jī))視頻流（使用WebRTC）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
