h265webjs 在vue3中的使用

h265webjs播放器

---

前言

回顾
什么是H.265？
本文在这里就不对H.265做介绍了。感兴趣的朋友可以看下面的文章了解详情。（第一篇是我们在2019年3月发布的文章，距今已有2年，时间过得真快）《Web端H.265播放器研发解密》[1]

WebAssembly的发展

看了上面那篇2年前的文章应该清楚了浏览器对于H.265支持程度。好消息是经过两年发展，Webassembly发布了1.1版本，增加了很多新特性，性能也有了提升。坏消息是浏览器依然不支持H.265，估计以后也不可能会支持了。所以呢两年后的今天如果我们要在浏览器里播放H.265还是需要借用Webassembly+FFmpeg的能力。本文也不多加介绍了，细节看下面的链接吧。Webassembly[3]FFmpeg[4]

提示：以下是本篇文章正文内容，下面案例可供参考

一、h265webjs是什么？

示例：h265webjs是一个基于JavaScript实现的H.265/HEVC视频解码器，可以在Web浏览器中播放H.265视频。它使用了开源的x265编码器和OpenHEVC解码器库，h265webjs可以通过JavaScript API来控制视频的 播放、暂停、音量、大小等，可以实现全屏播放和自适应窗口大小。并且支持多种平台和浏览。

二、使用步骤

1.在项目 引入 h265webjs gitub地址

提示：将gitub上的dist 文件解压下来，放到项目的public
创建一个h265webjs将数据放入即可

2.在src/utils 创建一个executor.js文件

代码如下（示例）：

import H265webjsModule from '../../public/h265webjs/index'

export const createPlayerServer = (videoUrl, config) => {
    
    
  return H265webjsModule.createPlayer(videoUrl, config);
}
/**
 *
 * @param {ReturnType<typeof H265webjsModule.createPlayer>} playerInstance
 */
export const destoryPlayerServer = (playerInstance) => {
    
    
  // release playerInstance & forece Gc
  // 释放播放器
  playerInstance.release()
  playerInstance = null
}

3. 视频的展示

代码如下（js示例）：

import {
    
     createPlayerServer, destoryPlayerServer } from '@/utils/executor'
let playerObject = null
const H265JS_DEFAULT_PLAYER_CONFIG = {
    
    
  player: 'camera',// id 
  width: '100%', // 盒子的 宽度
  height: '100%',// 盒子的 高度
}
const ae= {
    
    
// 当前h265webjs 版本的 token  不要误解
  token:
    'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb30Bmb3htYWlsLmNv',
  extInfo: {
    
    
    moovStartFlag: true
  }
}

/**
 * 利用 箭头函数的特性
 * 如果 箭头函数 只处理一行逻辑代码可以不需要写 return 和  { } 
*/
const resolveConfig = () =>
Object.assign(H265JS_DEFAULT_PLAYER_CONFIG,ae)

onUnmounted(() => {
    
    
  playerObject && destoryPlayerServer(playerObject)
})

onMounted(() => {
    
    
  Promise.all([
    getDeviceData(),
    getDeviceChannelData()
  ])
})
const getDeviceChannelData = async () => {
    
    
  const res = await getDeviceChannelList()
  data.deviceChannelList = res.data

  /**
   *  res.data[0]?.camera_id 
   * 获取一个名为 res 的对象的属性 data 的第一个元素（即 res.data[0]）
   * 尝试从这个元素中获取名为 camera_id 的属性，如果这个属性不存在或者值为 null 或 undefined，则返回一个空字符串 ''
   * 这里使用了可选链操作符 ?.，它的作用是在对象的属性或方法调用路径上，一旦其中的任何一个节点返回了 null 或者 undefined，
   * 整个表达式的值就会变成 undefined，从而避免了出现 TypeError 错误
  */
  cameraId.value = res.data[0]?.camera_id || ''
  
}
// 这边 博主是使用的点击事件 进行切换
const channelClick = async (id) => {
    
    

  cameraId.value = id
  // 这块需要根据后台接口
  const res = await xxxx({
    
     camera_id: id })
  
  playerObject && destoryPlayerServer(playerObject)
  playerObject = createPlayerServer(res.data, resolveConfig())

  console.log(playerObject )
  // 加载播放器
  playerObject.do()
  // 媒体文件加载完成事件
  playerObject.onLoadFinish = () => {
    
    
    if (!playerObject.isPlaying()) {
    
    
      playerObject.play()
    }
  }
}

html 就一行代码

代码如下（view 示例）：

    <div class="camera" id="camera"></div>

---