vue播放rtsp流

vue播放rtsp webrtc-streamer

starstarstarl

5738人浏览 · 2024-04-11 16:10:57

starstarstarl · 2024-04-11 16:10:57 发布

我是用的是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中查看：右键工具--编解码器信息

如有帮助，点赞支持^_^

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^