我是用的是vue+webrtc-streamer播放rtsp视频流
一、安装webrtc-streamer
https://github.com/mpromonet/webrtc-streamer/releases
我下载的是v0.7.0
下载好的安装包解压，双击根目录下的webrtc-streamer.exe启动
检查是否启动成功，在浏览器输入http://127.0.0.1:8000/，如果有显示自己的桌面，则启动成功
二、引入js文件
下载好的安装包解压，进入html文件夹，将webrtcstreamer.js和libs文件夹下的adapter.min.js复制到vue项目，我选择static目录
打开index.html引入js（避免找不到，直接全局引用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-liveplay1</title>
<script type="text/javascript" src="./static/webrtcstreamer.js"></script>
<script type="text/javascript" src="./static/adapter.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
三、写测试代码
<template>
<div class="home">
<video id="video" autoplay width="600" height="400"></video>
</div>
</template>
<script>
export default {
name: "HomeView",
data() {
return {
webRtcServer: null,
webRtcServer1: null
};
},
mounted() {
this.webRtcServer = new WebRtcStreamer(
"video",
'http://192.168.1.197:8000'//本机ip+端口8000
);
this.webRtcServer.connect(
"rtsp://admin:admin123456@192.168.1.171:554/stream1XXXXXXXXX"//这是填自己的rtsp流
);
},
methods: {},
beforeDestroy() {
this.webRtcServer.disconnect();
this.webRtcServer = null;
}
};
</script>注意这里是本机ip+端口8000
注意rtsp流是在VLC可以播放的且是H264的
VLC中查看：右键工具--编解码器信息
如有帮助，点赞支持^_^
