nexhome-web-player

brief intro

A web video player can play both h264 / h265 for vue

install

npm i nexhome-web-player
# or
yarn add nexhome-web-player

usage

important things

1. copy EasyWasmPlayer.js and libDecoder.wasm to your public path

2. paste <link href="/EasyWasmPlayer.js" rel="prefetch" as="script" /> to your html header tag

3. vue example

<template>
  <div id="app">
    <NexhomePlayer v-bind="optionsH264" ref="h264PlayerRef" />
    <!-- <NexhomePlayer v-bind="optionsH265" ref="h264PlayerRef1" /> -->
    <!-- <NexhomePlayer v-bind="optionsH265" /> -->

    <button @click="changeUrl">change Url</button>
    <button @click="toogleLoading">toogle loading</button>
    <button @click="stopPlayer">stop player</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, shallowReactive, ref, toRefs } from '@vue/composition-api'
  import type { PlayerProps, RenewUrlPayload, RebootPayload } from 'nexhome-web-player'
  import NexhomePlayer from 'nexhome-web-player'

  const h264Source = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'

  const sleep = async (seconds: number) => {
    console.log('sleep')
    return new Promise((resolve) => {
      window.setTimeout(resolve, seconds)
    })
  }

  export default defineComponent({
    components: {
      NexhomePlayer
    },
    setup () {
      const renewUrlFunction = async (payload: RenewUrlPayload) => {
        console.log('renew url function', payload)
        await sleep(3 * 1000)
        if (Math.random() > 0.5) {
          return 200
        }
        return Promise.reject(new Error('fake renew url error'))
      }
      const rebootFunction = async (payload: RebootPayload): Promise<{ url: string; streamCode: string; }> => {
        console.log('reboot function', payload)
        await sleep(3 * 1000)
        if (Math.random() > 0.5) {
          return { streamCode: 'fake streamCode', url: `${h264Source}?salt=${Date.now()}` }
        }
        return Promise.reject(new Error('fake reboot error'))
      }

      const baseOptions: Omit<PlayerProps, 'isH265'> = shallowReactive({
        source: h264Source,
        streamCode: 'fake stream code',
        deviceId: 'fake device id',
        deviceName: 'fake deviceName',
        isLive: true,
        isLoading: false,
        isDebug: true,
        isRenewUrl: true,
        renewUrlFunction,
        maxRetryCount: 3,
        isRebootAfterReachMaxRetry: true,
        autoPlay: true,
        rebootFunction
      })

      const optionsH264 = shallowReactive({
        ...toRefs(baseOptions),
        deviceName: 'fake h264 device name',
        isH265: false
      })

      const optionsH265 = shallowReactive({
        ...toRefs(baseOptions),
        deviceName: 'fake h265 device name',
        isH265: true
      })

      const changeUrl = () => {
        optionsH264.source = `${h264Source}?salt=${Date.now()}`
      }

      const h264PlayerRef = ref(null)

      const stopPlayer = () => {
        optionsH264.source = null
      }

      const toogleLoading = () => {
        optionsH264.isLoading = !optionsH264.isLoading
      }

      return { optionsH264, optionsH265, changeUrl, stopPlayer, h264PlayerRef, toogleLoading }
    }
  })
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
</style>