vue使用mpegts.js实现播放flv的直播视频流

 更新时间:2024年01月16日 10:03:57   作者:R瑾安  
这篇文章主要为大家详细介绍了vue如何使用mpegts.js实现播放flv的直播视频流,文中的示例代码讲解详细,有需要的小伙伴可以参考一下

第一步:引入mpegts.js

npm install --save mpegts.js

第二步:在vue文件中引入mpegts.js的依赖

第三步:编写展示视频的盒子

我这里是使用循环遍历的方式创建video标签,这样方便后面随机展示视频使用

<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="play-video-box">
                    <input id="tag" v-model="tag" />
                    <el-button @click="load">重新加载</el-button>
                    <el-button @click="start">开始播放</el-button>
                    <el-button @click="pause">暂停</el-button>
                    <el-button @click="destory">全部销毁</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" v-for="item in 4" :key="item">
                <div class="grid-content">
                    <video
                        class="video"
                        :id="getDivClassName(item)"
                        autoplay="true"
                        muted="false"
                        controls="false"
                        @click="saveMap(item)">
                        {{ item }}
                    </video>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

第四步:编写播放视频和销毁视频的方式

<script setup lang="ts">
import mpegts from 'mpegts.js';
import { ref, onUnmounted } from 'vue';

const flvPlayer: any = ref();
const tag = ref(null);
const videoMap = new Map();
/**
 * 创建 mpegts 实例
 */
const initFlv = (ops: { URL: string; elementId: string }) => {
    if (tag.value != null && mpegts.isSupported()) {
        // 根据id名称创建对应的video
        const ele = document.getElementById(ops.elementId);
        flvPlayer.value = mpegts.createPlayer(
            {
                type: 'flv', // 指定媒体类型
                isLive: true, // 开启直播(是否为实时流)
                hasAudio: false, // 关闭声音(如果拉过来的视频流中没有音频一定要把这里设置为fasle,否则无法播放)
                cors: true, // 开启跨域访问
                url: ops.URL // 指定流链接(这里是传递过过来的视频流的地址)
            },
            {
                enableWorker: false, //启用分离的线程进行转换(如果不想看到控制台频繁报错把它设置为false,官方的回答是这个属性还不稳定,所以要测试实时视频流的话设置为true控制台经常报错)
                enableStashBuffer: false, //关闭IO隐藏缓冲区(如果需要最小延迟,则设置为false,此项设置针对直播视频流)
                stashInitialSize: 128, //减少首帧等待时长(针对实时视频流)
                lazyLoad: false, //关闭懒加载模式(针对实时视频流)
                lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位:秒。建议针对直播:调整为200毫秒
                deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上,在后台打开的标签页可能不会触发sourceopen事件,除非切换到该标签页。
                liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟
                liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟(以秒为单位)之前使用flv.js发现延时严重,还有延时累加的问题,而mpegts.js对此做了优化,不需要我们自己设置快进追帧了
                liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟(以秒为单位)
            }
        );
        // mpegts
        flvPlayer.value.attachMediaElement(ele);
        videoMap.set(ops.elementId, flvPlayer.value);
        play(flvPlayer.value);
        flvEvent();
    }
};

const play = (flv: any) => {
    flv.load();
    flv.play();
};

// mpegts
const flvEvent = () => {
    // 视频错误信息回调
    flvPlayer.value.on(mpegts.Events.ERROR, (errorType: any, errorDetail: any, errorInfo: any) => {
        console.log(
            '类型:' + JSON.stringify(errorType),
            '报错内容' + errorDetail,
            '报错信息' + errorInfo
        );
    });
    //【重要事件监听】http 请求建立好后,该事件会一直监听 mpegts 实例
    flvPlayer.value.on(mpegts.Events.STATISTICS_INFO, () => {
        const end = flvPlayer.value.buffered.end(0); //获取当前buffered值(缓冲区末尾)
        const differTime = end - flvPlayer.value.currentTime; //获取bufferend与当前播放位置的差值
        console.log('差值为:' + differTime);
    });
};

/**
 * 重新加载视频
 */
const load = () => {
    for (let index = 1; index < 5; index++) {
        if (!videoMap.has('video-contianer-' + index)) {
            initFlv({
                URL: 'http://localhost:1010/video/' + tag.value,//这里改成自己要拉流的视频地址,我这里放的是自己后端推送的1078视频的flv实时视频流
                elementId: 'video-contianer-' + index
            });
            break;
        }
    }
};
/**
 * 播放
 */
const start = () => flvPlayer.value.play();
/**
 * 暂停
 */
const pause = () => flvPlayer.value.pause();
/**
 * 销毁
 */
const destory = () => {
    if (videoMap.size > 0) {
        for (let [key, flv] of videoMap) {
            flv.pause;
            flv.unload();
            flv.detachMediaElement();
            flv.destroy();
            flv = null;
            videoMap.delete(key);
            console.log('销毁掉视频:' + key);
        }
    } else {
        console.log('没有要销毁的视频');
    }
};
const getDivClassName = (index: any) => {
    return 'video-contianer-' + index;
};

const saveMap = (index: any) => {
    test001.value = '-' + index;
    videoMap.set(index, test001.value);
};

onUnmounted(() => {
    destory();
});
</script>

第五步:设置展示样式

<style scoped lang="less">
.play-video-box {
    height: 45px;
    margin-top: 10px;
    margin-left: 200px;
}
.grid-content {
    height: 315.5px;
    margin-top: 5px;
    margin-left: 5px;
}
#tag {
    width: 280px;
    height: 30px;
}
//所有控件
video::-webkit-media-controls-enclosure {
    display: none;
}
.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

第六步:效果图

(我的是在输入框中输入想要拉取的设备和通道号点击重新加载即可,多次点击会将四个窗格都展示同样的视频)

以上就是vue使用mpegts.js实现播放flv的直播视频流的详细内容,更多关于vue播放flv的资料请关注脚本之家其它相关文章!

相关文章

  • vue实现带过渡效果的下拉菜单功能

    vue实现带过渡效果的下拉菜单功能

    这篇文章主要为大家详细介绍了vue仿写带过渡效果的下拉菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能,有的朋友可以跟着学习下。
    2018-04-04
  • Vue.js 实现数据展示全部和收起功能

    Vue.js 实现数据展示全部和收起功能

    这篇文章主要介绍了Vue.js 实现数据展示全部和收起功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 基于element-ui对话框el-dialog初始化的校验问题解决

    基于element-ui对话框el-dialog初始化的校验问题解决

    这篇文章主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue组件生命周期详解

    vue组件生命周期详解

    这篇文章主要为大家详细介绍了vue组件生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 详细介绍解决vue和jsp结合的方法

    详细介绍解决vue和jsp结合的方法

    这篇文章主要介绍了详细介绍解决vue和jsp结合的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • element-UI el-table树形数据 修改小三角图标方式

    element-UI el-table树形数据 修改小三角图标方式

    这篇文章主要介绍了element-UI el-table树形数据 修改小三角图标方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 在uni-app中使用element-ui的方法与报错解决

    在uni-app中使用element-ui的方法与报错解决

    我们在开web开发的时候,经常会使用到element或者uview-ui,下面这篇文章主要给大家介绍了关于在uni-app中使用element-ui的方法与报错解决的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue-cli assets SubDirectory及PublicPath区别详解

    Vue-cli assets SubDirectory及PublicPath区别详解

    这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 分分钟学会vue中vuex的应用(入门教程)

    分分钟学会vue中vuex的应用(入门教程)

    本篇文章主要介绍了vue中vuex的应用(入门教程),详细的介绍了vuex.js和应用方法,有兴趣的可以了解一下
    2017-09-09

最新评论