# 9z-split-screen

Getting started

vue2+elementui

Install

在node_modules里放入 jz-video-ui 文件夹，只需要dist文件夹和package.json和readme.md
将src里面的js拿出来放到public里面，在public文件夹里面的index.html里引入
 <script type="text/javascript" src="./js/jessibuca/jessibuca.js"></script>
 <script type="text/javascript" src="./js/ZLMRTCClient.js"></script>
父元素需要display:flex,因为该组件大小为flex:1,占满剩余空间。
将src里面的styles文件夹里面的文件拿出来放到自己的项目的styles里面，把iconfont.scss引入到index.scss里面

Usage

import SplitScreen from 'jz-video-ui';

Example

<split-screen :videoUrl="videoUrl" :videoTip="videoTip" @playIndexChange="playIndexChange"></split-screen>

<template>
  <div id="live" class="live-container">
    <div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
      <div class="device-tree-container-box">
        <DeviceTree @clickEvent="clickEvent" :context-menu-event="contextMenuEvent" />
      </div>
      <split-screen :videoUrl="videoUrl" :videoTip="videoTip" @playIndexChange="playIndexChange"></split-screen>
    </div>
  </div>
</template>
<script>

import DeviceTree from '../common/DeviceTree.vue'
import SplitScreen from '9z-split-screen';
import {playChannel} from '@/api/commonChannel'

export default {
  name: 'Live',
  components: {
    DeviceTree,SplitScreen
  },

  data() {
    return {
      loading:false,
      videoUrl: [],
      videoTip: [],
      playerIdx:0,
    }
  },


  created() {
    this.checkPlayByParam()
  },

  methods: {
   
    contextMenuEvent: function(device, event, data, isCatalog) {

    },
    clickEvent: function(channelId) {
      this.sendDevicePush(channelId)
    },
    // 通知设备上传媒体流
    async sendDevicePush(channelId) {
      this.save(channelId)
      const idxTmp = this.playerIdx
      this.setPlayUrl('', idxTmp)
      this.$set(this.videoTip, idxTmp, '正在拉流...')
      try{
        const data = await playChannel(channelId)
  
        this.setPlayUrl(data.data, idxTmp)
      }catch(err){
        this.$set(this.videoTip, idxTmp, '播放失败: ' + err)
      }
  
    },
    setPlayUrl(urls, idx) {
      this.$set(this.videoUrl, idx, urls)
      const _this = this
      setTimeout(() => {
        window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
      }, 100)
    },
     save(item) {
      const dataStr = window.localStorage.getItem('playData') || '[]'
      const data = JSON.parse(dataStr)
      data[this.playerIdx] = item
      window.localStorage.setItem('playData', JSON.stringify(data))
    },
    // 通知设备上传媒体流
    checkPlayByParam() {
      const query = this.$route.query
      if (query.channelId) {
        this.sendDevicePush(query.channelId)
      }
    },
    playIndexChange(idx){
      this.playerIdx = idx
    }
  }
}
</script>
<style>
.live-container {
  height: calc(100vh - 124px);
  width: 100%;
}

.live-content {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.device-tree-container-box {
  width: 300px;
  min-width: 250px;
  max-width: 400px;
  background-color: #ffffff;
  overflow: auto;
  resize: horizontal;
}

@media (max-width: 768px) {
  .live-content {
    flex-direction: column;
  }

  .device-tree-container-box {
    width: 100%;
    max-width: 100%;
    height: 200px;
    min-height: 150px;
    max-height: 300px;
    resize: vertical;
  }
}


</style>

⬆ back to top