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 import { extname } from 'path'
5 import * as MediaElementWrapper from 'mediasource'
6 import * as videostream from '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, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer: any) => void) {
31 const extension = extname(file.name).toLowerCase()
32 let preparedElem = undefined
36 if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
37 renderer = useVideostream()
39 renderer = useMediaSource()
42 function useVideostream () {
44 preparedElem.addEventListener('error', fallbackToMediaSource)
45 preparedElem.addEventListener('loadstart', onLoadStart)
46 preparedElem.addEventListener('canplay', onCanPlay)
47 return videostream(file, preparedElem)
50 function useMediaSource () {
52 preparedElem.addEventListener('error', callback)
53 preparedElem.addEventListener('loadstart', onLoadStart)
54 preparedElem.addEventListener('canplay', onCanPlay)
56 const wrapper = new MediaElementWrapper(preparedElem)
57 const writable = wrapper.createWriteStream(getCodec(file.name))
58 file.createReadStream().pipe(writable)
60 if (currentTime) preparedElem.currentTime = currentTime
65 function fallbackToMediaSource () {
66 preparedElem.removeEventListener('error', fallbackToMediaSource)
67 preparedElem.removeEventListener('canplay', onCanPlay)
72 function prepareElem () {
73 if (preparedElem === undefined) {
76 preparedElem.addEventListener('progress', function () {
77 currentTime = elem.currentTime
82 function onLoadStart () {
83 preparedElem.removeEventListener('loadstart', onLoadStart)
84 if (opts.autoplay) preparedElem.play()
87 function onCanPlay () {
88 preparedElem.removeEventListener('canplay', onCanPlay)
89 callback(null, renderer)
93 function validateFile (file) {
95 throw new Error('file cannot be null or undefined')
97 if (typeof file.name !== 'string') {
98 throw new Error('missing or invalid file.name property')
100 if (typeof file.createReadStream !== 'function') {
101 throw new Error('missing or invalid file.createReadStream property')
105 function getCodec (name: string) {
106 const ext = extname(name).toLowerCase()
108 '.m4a': 'audio/mp4; codecs="mp4a.40.5"',
109 '.m4v': 'video/mp4; codecs="avc1.640029, mp4a.40.5"',
110 '.mkv': 'video/webm; codecs="avc1.640029, mp4a.40.5"',
111 '.mp3': 'audio/mpeg',
112 '.mp4': 'video/mp4; codecs="avc1.640029, mp4a.40.5"',
113 '.webm': 'video/webm; codecs="vorbis, vp8"'