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   if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
  37     renderer = useVideostream()
  38   } else {
  39     renderer = useMediaSource()
  40   }
  41
  42   function useVideostream () {
  43     prepareElem()
  44     preparedElem.addEventListener('error', function onError () {
  45       preparedElem.removeEventListener('error', onError)
  46
  47       return fallbackToMediaSource()
  48     })
  49     preparedElem.addEventListener('loadstart', onLoadStart)
  50     return videostream(file, preparedElem)
  51   }
  52
  53   function useMediaSource (useVP9 = false) {
  54     const codecs = getCodec(file.name, useVP9)
  55
  56     prepareElem()
  57     preparedElem.addEventListener('error', function onError(err) {
  58       // Try with vp9 before returning an error
  59       if (codecs.indexOf('vp8') !== -1) {
  60         preparedElem.removeEventListener('error', onError)
  61
  62         return fallbackToMediaSource(true)
  63       }
  64
  65       return callback(err)
  66     })
  67     preparedElem.addEventListener('loadstart', onLoadStart)
  68
  69     const wrapper = new MediaElementWrapper(preparedElem)
  70     const writable = wrapper.createWriteStream(codecs)
  71     file.createReadStream().pipe(writable)
  72
  73     if (currentTime) preparedElem.currentTime = currentTime
  74
  75     return wrapper
  76   }
  77
  78   function fallbackToMediaSource (useVP9 = false) {
  79     if (useVP9 === true) console.log('Falling back to media source with VP9 enabled.')
  80     else console.log('Falling back to media source..')
  81
  82     useMediaSource(useVP9)
  83   }
  84
  85   function prepareElem () {
  86     if (preparedElem === undefined) {
  87       preparedElem = elem
  88
  89       preparedElem.addEventListener('progress', function () {
  90         currentTime = elem.currentTime
  91       })
  92     }
  93   }
  94
  95   function onLoadStart () {
  96     preparedElem.removeEventListener('loadstart', onLoadStart)
  97     if (opts.autoplay) preparedElem.play()
  98
  99     callback(null, renderer)
 100   }
 101 }
 102
 103 function validateFile (file) {
 104   if (file == null) {
 105     throw new Error('file cannot be null or undefined')
 106   }
 107   if (typeof file.name !== 'string') {
 108     throw new Error('missing or invalid file.name property')
 109   }
 110   if (typeof file.createReadStream !== 'function') {
 111     throw new Error('missing or invalid file.createReadStream property')
 112   }
 113 }
 114
 115 function getCodec (name: string, useVP9 = false) {
 116   const ext = extname(name).toLowerCase()
 117   if (ext === '.mp4') {
 118     return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
 119   }
 120
 121   if (ext === '.webm') {
 122     if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
 123
 124     return 'video/webm; codecs="vp8, vorbis"'
 125   }
 126
 127   return undefined
 128 }
 129
 130 export {
 131   renderVideo
 132 }