]>
Commit | Line | Data |
---|---|---|
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 | } |