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

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