client/src/assets/player/video-renderer.ts

   1 // Thanks: https://github.com/feross/render-media
   2 // TODO: use render-media once https://github.com/feross/render-media/issues/32 is fixed
   3
   4 import * as MediaElementWrapper from 'mediasource'
   5 import { extname } from 'path'
   6 import * as videostream from 'videostream'
   7
   8 const VIDEOSTREAM_EXTS = [
   9   '.m4a',
  10   '.m4v',
  11   '.mp4'
  12 ]
  13
  14 type RenderMediaOptions = {
  15   controls: boolean
  16   autoplay: boolean
  17 }
  18
  19 function renderVideo (
  20   file,
  21   elem: HTMLVideoElement,
  22   opts: RenderMediaOptions,
  23   callback: (err: Error, renderer: any) => void
  24 ) {
  25   validateFile(file)
  26
  27   return renderMedia(file, elem, opts, callback)
  28 }
  29
  30 function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
  31   const extension = extname(file.name).toLowerCase()
  32   let preparedElem = undefined
  33   let currentTime = 0
  34   let renderer
  35
  36   try {
  37     if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
  38       renderer = useVideostream()
  39     } else {
  40       renderer = useMediaSource()
  41     }
  42   } catch (err) {
  43     return callback(err)
  44   }
  45
  46   function useVideostream () {
  47     prepareElem()
  48     preparedElem.addEventListener('error', function onError () {
  49       preparedElem.removeEventListener('error', onError)
  50
  51       return fallbackToMediaSource()
  52     })
  53     preparedElem.addEventListener('loadstart', onLoadStart)
  54     return videostream(file, preparedElem)
  55   }
  56
  57   function useMediaSource (useVP9 = false) {
  58     const codecs = getCodec(file.name, useVP9)
  59
  60     prepareElem()
  61     preparedElem.addEventListener('error', function onError (err) {
  62       preparedElem.removeEventListener('error', onError)
  63
  64       // Try with vp9 before returning an error
  65       if (codecs.indexOf('vp8') !== -1) return fallbackToMediaSource(true)
  66
  67       return callback(err)
  68     })
  69     preparedElem.addEventListener('loadstart', onLoadStart)
  70
  71     const wrapper = new MediaElementWrapper(preparedElem)
  72     const writable = wrapper.createWriteStream(codecs)
  73     file.createReadStream().pipe(writable)
  74
  75     if (currentTime) preparedElem.currentTime = currentTime
  76
  77     return wrapper
  78   }
  79
  80   function fallbackToMediaSource (useVP9 = false) {
  81     if (useVP9 === true) console.log('Falling back to media source with VP9 enabled.')
  82     else console.log('Falling back to media source..')
  83
  84     useMediaSource(useVP9)
  85   }
  86
  87   function prepareElem () {
  88     if (preparedElem === undefined) {
  89       preparedElem = elem
  90
  91       preparedElem.addEventListener('progress', function () {
  92         currentTime = elem.currentTime
  93       })
  94     }
  95   }
  96
  97   function onLoadStart () {
  98     preparedElem.removeEventListener('loadstart', onLoadStart)
  99     if (opts.autoplay) preparedElem.play()
 100
 101     callback(null, renderer)
 102   }
 103 }
 104
 105 function validateFile (file) {
 106   if (file == null) {
 107     throw new Error('file cannot be null or undefined')
 108   }
 109   if (typeof file.name !== 'string') {
 110     throw new Error('missing or invalid file.name property')
 111   }
 112   if (typeof file.createReadStream !== 'function') {
 113     throw new Error('missing or invalid file.createReadStream property')
 114   }
 115 }
 116
 117 function getCodec (name: string, useVP9 = false) {
 118   const ext = extname(name).toLowerCase()
 119   if (ext === '.mp4') {
 120     return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
 121   }
 122
 123   if (ext === '.webm') {
 124     if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
 125
 126     return 'video/webm; codecs="vp8, vorbis"'
 127   }
 128
 129   return undefined
 130 }
 131
 132 export {
 133   renderVideo
 134 }