GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用

开源资源

LiveGBS国标GB28181流媒体服务前端源码

https://github.com/livegbs/GB28181-Server

免费播放器LivePlayer

https://www.npmjs.com/package/@liveqing/liveplayer

安装播放器

npm install @liveqing/liveplayer

webpck.config.js 中配置

......
    // copy js lib and swf files to dist dir
    new CopyWebpackPlugin([
        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
    ]),
......

编辑Vue组件

......

import LivePlayer from '@liveqing/liveplayer'

......
  components: {
    LivePlayer
  }
......

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

完整组件示例（CloudRecordVideoDlg.vue）

<template>
    <div :class="['modal', { fade: fade }]" data-keyboard="true" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					    <span aria-hidden="true">&times;</span>
					</button>
                    <h4 class="modal-title text-primary text-center"><span>{{videoTitle}}</span></h4>
                </div>
                <div class="modal-body" v-loading="bLoading" element-loading-text="加载中">
                    <LivePlayer v-if="bShow" :videoUrl="videoUrl" :snapUrl="snapUrl" :live="live" @message="$message" :loading.sync="bLoading"></LivePlayer>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'jquery-ui/ui/widgets/draggable'
import LivePlayer from '@liveqing/liveplayer'
import { mapState } from "vuex"

export default {
    data() {
        return {
            videoUrl: "",
            videoTitle: "",
            snapUrl: "",
            bShow: false,
            bLoading: false
        }
    },
    props: {
        live : {
            type: Boolean,
            default: false
        },
        fade: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        $(this.$el).find('.modal-content').draggable({
            handle: '.modal-header',
            cancel: ".modal-title span",
            addClasses: false,
            containment: 'document',
            delay: 100,
            opacity: 0.5
        });
        $(this.$el).on("hide.bs.modal", () => {
            this.bShow = false;
        }).on("show.bs.modal", () => {
            this.bShow = true;
        })
    },
    components: { LivePlayer },
    computed: {
        ...mapState(['userInfo', 'serverInfo']),
    },
    methods: {
        play(src,title,snap) {
            this.videoUrl = src||"";
            this.videoTitle = title||"";
            this.snapUrl = snap||"";

            $(this.$el).modal("show");
        }
    }
}
</script>

<style lang="less" scoped>
.modal-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

通过简单的几部操作，就可以在您的VUE前端中引入播放器，可以播放HLS、RTMP、HTTP-FLV等视频流。