vue播放rtsp流

starstarstarl

已于 2024-04-11 16:30:55 修改

阅读量2.4k

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-04-11 16:10:57 首次发布

本文链接：https://blog.csdn.net/starstarstarl/article/details/137641494

版权

我是用的是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