1 // Thanks: https://github.com/feross/render-media
2 // TODO: use render-media once https://github.com/feross/render-media/issues/32 is fixed
4 const MediaElementWrapper = require('mediasource')
5 import { extname } from 'path'
6 const videostream = require('videostream')
8 const VIDEOSTREAM_EXTS = [
14 type RenderMediaOptions = {
19 function renderVideo (
21 elem: HTMLVideoElement,
22 opts: RenderMediaOptions,
23 callback: (err: Error, renderer: any) => void
27 return renderMedia(file, elem, opts, callback)
30 function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
31 const extension = extname(file.name).toLowerCase()
37 if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
38 renderer = useVideostream()
40 renderer = useMediaSource()
46 function useVideostream () {
48 preparedElem.addEventListener('error', function onError (err: Error) {
49 preparedElem.removeEventListener('error', onError)
53 preparedElem.addEventListener('loadstart', onLoadStart)
54 return new videostream(file, preparedElem)
57 function useMediaSource (useVP9 = false) {
58 const codecs = getCodec(file.name, useVP9)
61 preparedElem.addEventListener('error', function onError (err: Error) {
62 preparedElem.removeEventListener('error', onError)
64 // Try with vp9 before returning an error
65 if (codecs.indexOf('vp8') !== -1) return fallbackToMediaSource(true)
69 preparedElem.addEventListener('loadstart', onLoadStart)
71 const wrapper = new MediaElementWrapper(preparedElem)
72 const writable = wrapper.createWriteStream(codecs)
73 file.createReadStream().pipe(writable)
75 if (currentTime) preparedElem.currentTime = currentTime
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..')
84 useMediaSource(useVP9)
87 function prepareElem () {
88 if (preparedElem === undefined) {
91 preparedElem.addEventListener('progress', function () {
92 currentTime = elem.currentTime
97 function onLoadStart () {
98 preparedElem.removeEventListener('loadstart', onLoadStart)
99 if (opts.autoplay) preparedElem.play()
101 callback(null, renderer)
105 function validateFile (file: any) {
107 throw new Error('file cannot be null or undefined')
109 if (typeof file.name !== 'string') {
110 throw new Error('missing or invalid file.name property')
112 if (typeof file.createReadStream !== 'function') {
113 throw new Error('missing or invalid file.createReadStream property')
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"'
123 if (ext === '.webm') {
124 if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
126 return 'video/webm; codecs="vp8, vorbis"'