Nachos Pillage Milwaukee

    nexhome-web-player

    0.1.21 • Public • Published

    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>

    Install

    npm i nexhome-web-player

    DownloadsWeekly Downloads

    58

    Version

    0.1.21

    License

    MIT

    Unpacked Size

    3.75 MB

    Total Files

    6

    Last publish

    Collaborators

    • guygubaby