webrtc-streamer-v0.7.1-dirty-Windows-AMD64-Release 下载

网盘里边只有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>