网盘里边只有window版本 其他版本到github上下载
前端使用
第一步、下载压缩包并解压
第二步、启动文件里边的 webrtc-streamer.exe 服务 双击即可
第三部、前端项目使用
1、把压缩包html文件夹下的webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下
2、在public目录下的index.html 中使用script标签引入上边两个js文件
<script type="text/javascript" src="<%= BASE_URL %>adapter.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>webrtcstreamer.js"></script>
3、在.vue文件中使用
<template>
<div>
<!-- <a-button @click="handleChange">切换</a-button> -->
<video id="video" autoplay ></video>
</div>
</template>
<script>
export default {
name: 'index1',
data() {
return {
webRtcServer: null//webRtcServer上下文
}
},
mounted() {
//video：需要绑定的video控件ID
//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
//需要查看的rtsp地址,地址为财物系统地址
this.webRtcServer.connect('rtsp://admin:abcd1234@192.168.0.188:554/Streaming/Channels/101')
},
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
/**
* 有多个视频源的情况下，直接调用服务的connect方法即可
*/
handleChange() {
this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1')
}
}
}
</script>
<style scoped></style>
特殊说明： 上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取全部资料 ❤
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取全部资料 ❤
