vue实现带截图和分屏的功能 , 并且能播放rstp流视频

分屏功能类似网站的这个功能:http://nvr.liveqing.com/:10800/#/screen。这个网站视频点击选择通道就可以选中视频播放。

而且视频为h5视频。需要能播放rstp视频流地址:
下面是写的代码,但是不知道怎么不同视频播放不同rstp视频。并且还有截图功能。目前想到的是canvas截图功能,具体写法不怎么熟悉,而且希望图标能跟http://nvr.liveqing.com/:10800/#/screen这网站的播放器图标类似,鼠标移入显示图标。目前我的视频图标是视频本身默认自带的。

目前用的是阿里云播放器,但是因为谷歌年底对flash不再支持。所以需要用能播放rstp的h5播放
我需要解决的问题是:
1、不同视频播放不同rstp视频
2、实现鼠标移入出现视频自定义图标,
3、实现视频截图功能。
4、分屏优化
5、最好是能提供播放rstp流的代码以及思路以及上面1、2、3、4等代码以及思路

要实现的详细功能阐述:
一、未播放状态
1、默认显示未播放状态
2、点击选中播放框,再单击左侧摄像机列表中的摄像机,对应选中的播放框中开始加载显示视频

二、播放中状态

1、显示实时视频画面,左上角显示当前时间、右下角显示摄像机名称

2、鼠标移入时显示截图、静音、全屏、关闭、视频算法选择select功能

(1)点击视频画面,选中当前视频播放框,可重新选中摄像机播放新的视频流

(2)点击右上角的“关闭”图标,关闭当前视频画面,显示为未播放状态

(3)鼠标移入右下角 截图图标,显示“截图”提示信息;点击截图图标,对当前画面进行截图,图片自动保存到系统-下载目录中

(4)视频默认播放有声音,可通过点击右下角的喇叭图标进行静音和取消静音切换,鼠标移入图标相应显示静音或取消静音提示信息

(5)右下角全屏,鼠标移入,显示“全屏”信息,点击将全屏显示当前视频

(6)左下角显示 实时视频和智能视频切换,智慧视频即叠加了算法的视频画面

图片描述

<template>
<!-- 分屏 -->

   <div style="overflow: hidden;">
     <el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen">
      <el-col :span="4"> </el-col>
      <el-col :span="16"><div class="grid-content bg-purple"> 
        <el-button-group>
        <el-button :type="classtype1"  @click="selecttype('classtype1',1,24)">单屏</el-button>
        <el-button :type="classtype2"  @click="selecttype('classtype2',4,12)">四分屏</el-button>
        <el-button :type="classtype3"  @click="selecttype('classtype3',9,8)">九分屏</el-button>
        <el-button :type="classtype4"  @click="selecttype('classtype4',16,6)">十六分屏</el-button>
        <el-button > 
           <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
          </div>
        </el-button>
        </el-button-group>
        </div>
      </el-col>
      <el-col :span="4"> </el-col>
    </el-row>
       

    <div class="main">
      <div class="conter">
      <el-row  :gutter="10" >
          <el-col  v-for="(n,index) in fornum" :xs="24" :sm="24" :md="clonum" :lg="clonum" :xl="clonum"  :key="index" >
            <div  class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000">
              <div class="video-wrapper"  :id="`videoid${n}`">
                <div class="video-inner live hide-waiting" style="">
                  <div class="alt"  :class="selectedindex === index? 'altChange' :'alt'" @click="getVideo(index, item)">
                    <div class="talbetop">
                            <div style="" class="video">
                                <ali-player @play="play($event)"
                                class='aliPlayer'
                                :useFlashPrism="true" 
                                :autoplay="true" 
                                :isLive="true" 
                                :rePlay="false"
                                :showBuffer="true"
                                showBarTime="5000"
                                width="100%" 
                                height="100%" 
                                controlBarVisibility="hover"
                                source="rtmp://124.139.232.61:1935/live/livestream"
                                >
                                </ali-player>
                            </div>
                        <div class="operate">
                            <div class="close-video">
                                <svg class="svg-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
                                    <use  xlink:href="#close"></use>
                                </svg>
                            </div>
                            <div class="operate-button">
                                <div class="button-option">
                                    <el-select  v-model="value" placeholder="请选择">
                                        <el-option
                                        v-for="item in optionValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="button-right">
                                    <svg class="camera-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
                                        <use  xlink:href="#camera 2"></use>
                                    </svg>
                                    <svg class="voice-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
                                        <use  xlink:href="#voice"></use>
                                    </svg>
                                    <svg class="fullscreen-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
                                        <use  xlink:href="#ic_fullscreen"></use>
                                    </svg>
                                </div>
                            </div>
                        </div>
                      <table>
                        <tr>
                          <td>无信号</td>
                        </tr>
                      </table> 
                    <div v-show="true" class="selectchannel"  @click="dialogFormVisible=true"> 选择通道</div> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
      </el-row>
      </div>
       <div class="footer"></div>
    </div>


  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        这是测试
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog> 
   </div> 
</template>
<script>
import aliplayer from "@/components/public/AliPlayer.vue"
export default {
    components: {
        "ali-player": aliplayer,
    },
  data () {
    return {
       fullscreen: false,
       selectedindex:'',
       fornum:4,
       clonum:12,
       dialogFormVisible:false,
        videoclass:"padding-bottom: 4px; position: relative; margin: 0px auto;",
        classtype1:'',
        classtype2:'primary',
        classtype3:'',
        classtype4:'',
        items:[false,false,false,false],
        optionValue:[
            {
                value: '1',
                label: '实时视频'
            },
            {
                value: '2',
                label: '安全帽检测'
            },
            {
                value: '3',
                label: '火苗检测'
            },
            {
                value: '4',
                label: '离岗检测'
            }
        ], 
        value:'1' ,
    }
  },
  created(){
            let that = this
            window.onresize = function(){
                if(!that.checkFull()){
         //  alert(that.videoclass)
                    // 退出全屏后要执行的动作
                    console.log("退出全屏")
          that.fullscreen = false;
           //alert(that.fornum)
           for(let n=1;n<=that.fornum;n++){
             //alert('videoid'+n)
            // alert(document.getElementById('videoid'+n))
              document.getElementById('videoid'+n).style = "padding-bottom: 40.25%; position: relative; margin: 0px auto;";
           }
         // that.videoclass="padding-bottom: 43.25%; position: relative; margin: 0px auto; overflow: hidden;",
           //document.getElementById('videoid1').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
          // document.getElementById('videoid2').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
          // document.getElementById('videoid3').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
           //document.getElementById('videoid4').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
         // that.tableclass="table-c"
        }
        else{
          for(let n=1;n<=that.fornum;n++){
            // alert('videoid'+n)
            // alert(document.getElementById('videoid'+n))
              document.getElementById('videoid'+n).style = "padding-bottom: 52.25%; position: relative; margin: 0px auto;";
           }
          //document.getElementById('videoid1').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid2').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid3').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
          //document.getElementById('videoid4').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
       }
      }
    },
  methods:{
    //选中
    getVideo(index, item){
            this.selectedindex=index
    },
    showselect(item1){
      this.items=[];
     // alert(this.items.length)
      for(let i=0;i<this.fornum;i++){
        if(item1==i){
         // alert(item1)
          this.items[i] = true;
        }else{
          this.items[i]=false;
        }
       }
    },
     selecttype(item,fnum,clo) {
     //  alert( this.items[0])
       this.items=[];
      for(let i=0;i<fnum;i++){
        this.items[i]=false;
      }
      this.fornum = fnum;
      this.clonum = clo;

      if(item==='classtype1'){
        this.classtype1='primary'
        this.classtype2=''
        this.classtype3=''
        this.classtype4=''
      }
      else if(item==='classtype2'){
        this.classtype1=''
        this.classtype2='primary'
        this.classtype3=''
        this.classtype4=''
      }
        else if(item==='classtype3'){
        this.classtype1=''
        this.classtype2=''
        this.classtype3='primary'
        this.classtype4=''
      }
      else if(item==='classtype4'){
        this.classtype1=''
        this.classtype2=''
        this.classtype3=''
        this.classtype4='primary'
      }
    },
      checkFull(){
      //判断浏览器是否处于全屏状态 (需要考虑兼容问题)
      //火狐浏览器
      var isFull = document.mozFullScreen||
      document.fullScreen ||
      //谷歌浏览器及Webkit内核浏览器
      document.webkitIsFullScreen ||
      document.webkitRequestFullScreen ||
      document.mozRequestFullScreen ||
      document.msFullscreenEnabled
      if(isFull === undefined) {
          isFull = false
          }
          return isFull;
    },

// 全屏事件
    handleFullScreen(){
        let element = document.documentElement;
        let that=this;
       // alert(this.fullscreen)
        if (this.fullscreen) {
         
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            // alert("ddd")
            //that.videoclass='padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;';
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
           // this.videoclass='';
         // this.tableclass='table-c'
           
          //this.tableclass='alt'
         }
        this.fullscreen = !this.fullscreen;       
    }
  }
}
</script>

<style  lang="scss">

 body {
   overflow-x: hidden;
    /* overflow-y: hidden; */   
 }
 .main{
   padding: 10px;
   width: auto;
   height: 100%;
    .el-row {
        // margin-bottom: 20px!important;
  }
 }
 
html,body{
  height:100% ;margin:0;
   overflow-x: hidden;
}
.video-wrapper{
    height:auto !important;
    margin:0;
    padding-bottom: 0.05%!important;
    position: relative;
    margin: 0px auto;
//   position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px;
}
.alt {
    // display: grid;
    // grid-template-columns: repeat(auto-fit, 48%);
    // grid-template-rows: repeat(2,160px);
    grid-gap: 10px 10px;
    // position: absolute;
    // margin-bottom: 5px!important;
    // left: 0;
    // top: 0;
    // right: 0;
    // bottom: 0;
    background: #000;
    color: #fff;
    text-align: center;
}
.altChange {
    // justify-content:center;
    // position: absolute;
    // left: 0;
    // top: 0;
    // right: 0;
    // bottom: 0;
    // background: #000;
    border: 2px solid #00A4FF;
    box-sizing: border-box;
    color: #fff;
    // text-align: center;
}
.alt table{
  width: 100%;
  height: 100%;
}
.talbetop{
    width: 100%;
    height: 100%;
    position:relative;
    .video{
        position: relative;
        display: grid;
        // grid-template-columns: repeat(auto-fit, 48%);
        // grid-template-rows: repeat(2,160px);
        // grid-gap: 10px 10px;
        width: 100%;
        height: 3rem;
        // position: absolute;
        // left: 0;
        // top: 0;
        // right: 0;
        // bottom: 0;
        // background: red;
        z-index: 1000;
        .aliPlayer{
            width: 100%;
            height: 100%;
            // margin-bottom: 10px!important;
            
        }

    }
    .operate{
        .close-video{
            position: absolute;
            top:0;
            right: 0;
        }
        .operate-button{
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 0;
            left:0;
            width: 100%;
            background: rgba(#eee,0.1);
            z-index: 1000000;
            height: 0.4rem;
            line-height:0.4rem;
            .button-option{
                width: 1.2rem;
                height: 0.3rem;
                line-height:0.3rem;
                .el-input__inner {
                    -webkit-appearance: none;
                    background-color: #FFF;
                    background-image: none;
                    border-radius: 4px;
                    border: 1px solid #DCDFE6;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    color: #606266;
                    display: inline-block;
                    font-size: inherit;
                    height: 30px;
                    line-height: 30px;
                    outline: 0;
                    // padding: 0 15px;
                    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    width: 100%;
                }
                .option-select{
                    
                    box-sizing: border-box;
                }
            }
            .button-right{
                svg{
                    margin-right: 0.2rem;
                }
            }
        }
    }
}

.selectchannel{
  position:absolute;right:5px;top:5px;
  z-index: 10000;
}
.video-close {
    // position: absolute;
    // top: 5px;
    // right: 5px;
    color: #fff;
    font-size: 12px;
    background-color: hsla(0,0%,50%,.5);
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 2px;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.table-c table{border-right:2px solid #fff;border-bottom:2px solid #fff;} 
.table-c table td{border-left:2px solid #fff;border-top:2px solid #fff} 
/* 
css 注释: 
只对table td设置左与上边框; 
对table设置右与下边框; 
为了便于截图,我们将css 注释说明换行排版 
*/ 
.player-wrapper{
  padding-bottom: 5px;
}
.footer{
  background: #000;
  height: 10%;
}
</style>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注