LiveGBS GB28181国标流媒体服务livePlayer 在vue中使用且控制摄像头

livePlayer的说明文档：
https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event
1、安装：

   npm install @liveqing/liveplayer
   npm i -D copy-webpack-plugin

2、引入：
在webpack.dev.conf.js / vue.config.js文件下plugins中声明插件new CopyWebpackPlugin引入和声明插件：

const CopyWebpackPlugin = require('copy-webpack-plugin')

......
plugins: [
  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/'}
  ])]
......

3、在index.html中引入：

  <script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>
 <!-- 直接复制 放在<head>标签里面  没写会报错  videojs is not defined  -->

4、使用：

  <template>
    <div class="video-container" >
        <div  class="videoPlay">
          <live-player
            class="video"
            ref="player"
            :videoUrl="videoUrl"
            v-loading="loading"
            fluent
            autoplay
            live
            stretch></live-player>
        </div>
        <div class="videoControl" id="video_dialog">
            <div class="video_button">
                <el-button type="primary" @click="play(players)" >播放</el-button>
                <el-button type="primary" @click="stop()">暂停</el-button>
            </div>
            <div class="video_button" >
                <el-button  type="primary" @click="ptzControl('zoomin')">放大</el-button>
                <el-button  type="primary" @click="ptzControl('zoomout')">缩小</el-button>
            </div>
            <div class="video_button" >
                <el-button type="primary"  @click="ptzControl('left')"> 左</el-button>
                <el-button type="primary"  @click="ptzControl('up')">上</el-button>
                <el-button type="primary"  @click="ptzControl('right')"> 右</el-button>
                <el-button type="primary"  @click="ptzControl('down')">下</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
//需要用到的接口
import {Login,getChannelList,streamStart,controlPtz,streamStop} from '../plugins/request'
export default {
    data() {
        return {
            camidList: [],
            players: [],
            token: '',
            code: '',
            serial: '',
            command: '',
            streamID: '',
            videoUrl: '',
            loading: false
        }
    },
    components: {
        LivePlayer
    },
    mounted() {
        this.getChannels()
    },
    methods: {
        getChannels() {
            // 接口需要token  调用登录接口获取token
            this.loading = true
            const parmas = {
                'username': '',
                'password': ''
            }
            Login(parmas.username,parmas.password).then(res => {
                this.token = res.data.URLToken
                 getChannelList(this.token,'true').then(res => {
                    this.players = res.data.ChannelList
                    this.shuld(this.players[0])
                })
            })
        },
        shuld(data) {
            this.serial = data.DeviceID
            this.code = data.ID
            this.play()
        },
        play() {
            this.loading = true
            streamStart(this.serial,this.code,this.token).then(res => {
                this.videoUrl = res.data.FLV || ''
                this.streamID = res.data.StreamID
                this.loading = false
            })
        },
        ptzControl(command) {
           controlPtz(this.serial,this.code,command,this.token).then(res => {
                console.log(res)
                window.setTimeout(() => {
                    this.ptzStop()
                 }, 100)
            }  )
        },
        ptzStop() {
            controlPtz(this.serial,this.code,'stop',this.token).then(res => {
                console.log(res)
            })
        },
        stop() {
            streamStop(this.serial,this.code,this.token).then(res => {
                console.log(res)
            })
        }
    }
}
</script>

<style>
    .video-container {
        display: flex;
        flex-flow: row nowrap;
    }
    .video {
        width: 100%;
    }
    .videoControl {
        width: 30%;
    }
    .video_button {
        margin-top: 20px;
        margin-left: 30px;
    }
    .videoPlay {
        width: 60%;
    }
</style>

效果：

image.png

最后编辑于：2019.12.16 09:10:11

LiveGBS GB28181国标流媒体服务livePlayer 在vue中使用 且控制摄像头

LiveGBS GB28181国标流媒体服务livePlayer 在vue中使用且控制摄像头