<template>
<div>
<a-button @click="handleChange">切换</a-button>
<video id="video" autoplay width="900" height="900"></video>
</div>
</template>
<script>
export default {
name: "index1",
data() {
return {
webRtcServer: null,
};
},
mounted() {
//video:需要绑定的video控件ID
//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000
// location.protocol 一个 URL 的协议部分通常是指 http://
、https://
、file://
等开头的部分
this.webRtcServer = new WebRtcStreamer(
"video",//绑定的id标签
location.protocol + "//127.0.0.1:8000"
);
//需要查看的rtsp地址 修改成你个人的rtsp地址
this.webRtcServer.connect(
"
rtsp://admin:oooooo00@192.168.31.40:554/stream1
"
);
},
//页面关闭时关闭webrtc-streamer
beforeDestroy() {
this.webRtcServer.disconnect();
this.webRtcServer = null;
},
methods: {
//切换rtsp地址
handleChange() {
this.webRtcServer.connect(
"rtsp://user:password@ip:port/h264/ch1/main/av_stream"
);
},
},
};
</script>
<style scoped></style>