接入萤石云、乐橙云实现预览回放

两者皆为轻应用的实现
1.下载

// 萤石云 
"ezuikit-js": "^0.3.0",
// 乐橙云 现无npm下载 到乐橙云官网下载相关内容 vue项目可找技术支持拿demo

2.引入

// 萤石云
import  EZUIKit from 'ezuikit-js'; 
// 乐橙云 public-->index.html下引入
<script src="/imouplayer.js"></script>

3.使用

// new乐橙云视频对象
export const newImouPlayer = ({ id,url , kitToken, height=380, autoplay=false }) => {
  // 添加DOM容器
  let player = new ImouPlayer(id);
  // 播放器初始化
  player.setup({
    src: [{
        url,
        kitToken
    }], // 播放地址
    poster: '', // 封面图url
    autoplay: play,
    controls, // 是否展示控制栏
    height
  });
  return player
}
// new萤石云视频对象
import  EZUIKit from 'ezuikit-js'; // 萤石云
export const newEZUIKitPlayer = ({id, accessToken, url, template='simple', height='360 ', width='100%', autoplay=false}) => {
  return  new EZUIKit.EZUIKitPlayer({
    autoplay,
    id,
    accessToken,
    url,
    template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
    audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
    height,
    width
  });
}
 methods: {
    videoclick(e,id,item) {
      this.playerList[id].play() // 点击播放
      e.target.style.display = "none" // 图标隐藏
    },
    // 点击历史回放默认先显示当前时间预览 选择时间后再回放历史录像
    clickHistory (item) {
      this.historyTime = '' // 再次点击时间置空
      this.current = item
      this.open = true
      setTimeout(()=>{
        // 视频对象存在并且 上次此次都是萤石云视频  切换地址播放
        if (this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 2) {
          this.playerHistory.stop().then(()=>{
            this.playerHistory.play(this.current.liveUrl);
          });
          return
        }
        // 萤石云视频没有销毁事件 导致萤石云切换到大华时 萤石云视频还占位 所以需要把萤石云视频暂停播放并隐藏
        if(this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 1) {
          const el = document.querySelector('#EZUIKitPlayer-playerHistory')
          this.playerHistory.stop()
          el.style.display = 'none'
        }
        // 创建新的视频对象
        if(item.apiType == 1) {
          this.playerHistory = newImouPlayer({
            id: `#playerHistory`,
            url:`imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
            kitToken: item.kitToken,
            autoplay: true
          })
        }else if(item.apiType == 2){
          this.playerHistory = newEZUIKitPlayer({
            id: `playerHistory`,
            accessToken: item.accessToken,
            url: item.liveUrl,
            autoplay: true
          })
        }
        this.oldItem = item
      },500)
    },
    handleClose() {
      this.open = false
      this.current.apiType == 1 ? this.playerHistory.destroy() : this.playerHistory.stop()// 销毁视频对象
    },
    // 选择时间
    historyChange(date) {
      let startTime = formatDay(new Date()) + ' ' + date[0]
      let stopTime = formatDay(new Date()) + ' ' + date[1]
      setTimeout(async ()=>{
        if(this.current.apiType == 1) {
          // 清除上一次
          if (this.playerHistory) { this.playerHistory.destroy() }
          this.playerHistory = newImouPlayer({
            id: `#playerHistory`,
            url: `imou://open.lechange.com/${this.current.deviceSn}/${this.current.channelId}/2?streamId=1&recordType=localRecord&beginTime=${startTime}&endTime=${stopTime}`,
            kitToken: this.current.kitToken
          })
        }else if(this.current.apiType == 2){
          const { data } = await getPlayBack({
            deviceSn: this.current.deviceSn,
            channelId: this.current.channelId,
            startTime,
            stopTime
          })
          // 替换播放地址
          this.playerHistory.stop().then(()=>{
            this.playerHistory.play({
              url: data.liveUrl,
              accessToken: data.accessToken
            });
          });
        }
      },500)
    },
    async getVideoList() {
      const { data } = await getVideoList({projectId: this.projectId})
      this.videoList = data
      setTimeout(()=>{
        data.forEach(item => {
          if(item.apiType == 1) {// 1:乐橙云 2:萤石云
            // 把设备列表new出来的视频对象存到一起
            this.playerList[`player${item.deviceSn + item.channelId}`] = newImouPlayer({
              id: `#player${item.deviceSn + item.channelId}`,
              url: `imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
              kitToken: item.kitToken
            })
          }else if(item.apiType == 2){
            this.playerList[`player${item.deviceSn + item.channelId}`] = newEZUIKitPlayer({
              id: `player${item.deviceSn + item.channelId}`,
              accessToken: item.accessToken,
              url: item.liveUrl,
            })
          }
        })
      }, 500)
    },
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容