]>
Commit | Line | Data |
---|---|---|
aa8b6df4 | 1 | // Thanks: https://github.com/feross/render-media |
aa8b6df4 | 2 | |
244b4ae3 | 3 | const MediaElementWrapper = require('mediasource') |
bf5685f0 | 4 | import { extname } from 'path' |
9df52d66 | 5 | const Videostream = require('videostream') |
aa8b6df4 C |
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 ( | |
244b4ae3 | 19 | file: any, |
aa8b6df4 C |
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 | ||
244b4ae3 | 29 | function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) { |
aa8b6df4 | 30 | const extension = extname(file.name).toLowerCase() |
c4710631 | 31 | let preparedElem: any |
aa8b6df4 | 32 | let currentTime = 0 |
244b4ae3 | 33 | let renderer: any |
aa8b6df4 | 34 | |
0f56c6e5 | 35 | try { |
9df52d66 | 36 | if (VIDEOSTREAM_EXTS.includes(extension)) { |
0f56c6e5 C |
37 | renderer = useVideostream() |
38 | } else { | |
39 | renderer = useMediaSource() | |
40 | } | |
41 | } catch (err) { | |
42 | return callback(err) | |
aa8b6df4 C |
43 | } |
44 | ||
45 | function useVideostream () { | |
46 | prepareElem() | |
244b4ae3 | 47 | preparedElem.addEventListener('error', function onError (err: Error) { |
bf5685f0 C |
48 | preparedElem.removeEventListener('error', onError) |
49 | ||
575712a5 | 50 | return callback(err) |
bf5685f0 | 51 | }) |
960a11e8 | 52 | preparedElem.addEventListener('loadstart', onLoadStart) |
9df52d66 | 53 | return new Videostream(file, preparedElem) |
aa8b6df4 C |
54 | } |
55 | ||
bf5685f0 C |
56 | function useMediaSource (useVP9 = false) { |
57 | const codecs = getCodec(file.name, useVP9) | |
58 | ||
aa8b6df4 | 59 | prepareElem() |
244b4ae3 | 60 | preparedElem.addEventListener('error', function onError (err: Error) { |
0dcf9a14 | 61 | preparedElem.removeEventListener('error', onError) |
bf5685f0 | 62 | |
0dcf9a14 | 63 | // Try with vp9 before returning an error |
9df52d66 | 64 | if (codecs.includes('vp8')) return fallbackToMediaSource(true) |
bf5685f0 C |
65 | |
66 | return callback(err) | |
67 | }) | |
960a11e8 | 68 | preparedElem.addEventListener('loadstart', onLoadStart) |
aa8b6df4 C |
69 | |
70 | const wrapper = new MediaElementWrapper(preparedElem) | |
bf5685f0 | 71 | const writable = wrapper.createWriteStream(codecs) |
aa8b6df4 C |
72 | file.createReadStream().pipe(writable) |
73 | ||
74 | if (currentTime) preparedElem.currentTime = currentTime | |
75 | ||
76 | return wrapper | |
77 | } | |
78 | ||
bf5685f0 C |
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..') | |
aa8b6df4 | 82 | |
bf5685f0 | 83 | useMediaSource(useVP9) |
aa8b6df4 C |
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 () { | |
960a11e8 | 97 | preparedElem.removeEventListener('loadstart', onLoadStart) |
aa8b6df4 | 98 | if (opts.autoplay) preparedElem.play() |
aa8b6df4 | 99 | |
aa8b6df4 C |
100 | callback(null, renderer) |
101 | } | |
102 | } | |
103 | ||
244b4ae3 | 104 | function validateFile (file: any) { |
aa8b6df4 C |
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 | ||
bf5685f0 | 116 | function getCodec (name: string, useVP9 = false) { |
aa8b6df4 | 117 | const ext = extname(name).toLowerCase() |
bf5685f0 C |
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 | |
aa8b6df4 C |
129 | } |
130 | ||
131 | export { | |
132 | renderVideo | |
133 | } |