Commit cba2e6b90b50c208e3354d4561b40576a251c370

Authored by 648540858
1 parent d3e815bf

优化wasm播放器内存占用问题

web_src/src/components/common/jessibuca.vue
@@ -23,11 +23,11 @@ @@ -23,11 +23,11 @@
23 </template> 23 </template>
24 24
25 <script> 25 <script>
  26 +let jessibuca = null;
26 export default { 27 export default {
27 name: 'jessibuca', 28 name: 'jessibuca',
28 data() { 29 data() {
29 return { 30 return {
30 - jessibuca: null,  
31 playing: false, 31 playing: false,
32 isNotMute: false, 32 isNotMute: false,
33 quieting: false, 33 quieting: false,
@@ -88,7 +88,7 @@ export default { @@ -88,7 +88,7 @@ export default {
88 let options = {}; 88 let options = {};
89 console.log("hasAudio " + this.hasAudio) 89 console.log("hasAudio " + this.hasAudio)
90 90
91 - this.jessibuca = new window.Jessibuca(Object.assign( 91 + jessibuca = new window.Jessibuca(Object.assign(
92 { 92 {
93 container: this.$refs.container, 93 container: this.$refs.container,
94 videoBuffer: 0.2, // 最大缓冲时长,单位秒 94 videoBuffer: 0.2, // 最大缓冲时长,单位秒
@@ -119,68 +119,68 @@ export default { @@ -119,68 +119,68 @@ export default {
119 )); 119 ));
120 120
121 let _this = this; 121 let _this = this;
122 - this.jessibuca.on("load", function () { 122 + jessibuca.on("load", function () {
123 console.log("on load init"); 123 console.log("on load init");
124 }); 124 });
125 125
126 - this.jessibuca.on("log", function (msg) { 126 + jessibuca.on("log", function (msg) {
127 console.log("on log", msg); 127 console.log("on log", msg);
128 }); 128 });
129 - this.jessibuca.on("record", function (msg) { 129 + jessibuca.on("record", function (msg) {
130 console.log("on record:", msg); 130 console.log("on record:", msg);
131 }); 131 });
132 - this.jessibuca.on("pause", function () { 132 + jessibuca.on("pause", function () {
133 _this.playing = false; 133 _this.playing = false;
134 }); 134 });
135 - this.jessibuca.on("play", function () { 135 + jessibuca.on("play", function () {
136 _this.playing = true; 136 _this.playing = true;
137 }); 137 });
138 - this.jessibuca.on("fullscreen", function (msg) { 138 + jessibuca.on("fullscreen", function (msg) {
139 console.log("on fullscreen", msg); 139 console.log("on fullscreen", msg);
140 _this.fullscreen = msg 140 _this.fullscreen = msg
141 }); 141 });
142 142
143 - this.jessibuca.on("mute", function (msg) { 143 + jessibuca.on("mute", function (msg) {
144 console.log("on mute", msg); 144 console.log("on mute", msg);
145 _this.isNotMute = !msg; 145 _this.isNotMute = !msg;
146 }); 146 });
147 - this.jessibuca.on("audioInfo", function (msg) { 147 + jessibuca.on("audioInfo", function (msg) {
148 // console.log("audioInfo", msg); 148 // console.log("audioInfo", msg);
149 }); 149 });
150 150
151 - this.jessibuca.on("videoInfo", function (msg) { 151 + jessibuca.on("videoInfo", function (msg) {
152 // this.videoInfo = msg; 152 // this.videoInfo = msg;
153 console.log("videoInfo", msg); 153 console.log("videoInfo", msg);
154 154
155 }); 155 });
156 156
157 - this.jessibuca.on("bps", function (bps) { 157 + jessibuca.on("bps", function (bps) {
158 // console.log('bps', bps); 158 // console.log('bps', bps);
159 159
160 }); 160 });
161 let _ts = 0; 161 let _ts = 0;
162 - this.jessibuca.on("timeUpdate", function (ts) { 162 + jessibuca.on("timeUpdate", function (ts) {
163 // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts); 163 // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
164 _ts = ts; 164 _ts = ts;
165 }); 165 });
166 166
167 - this.jessibuca.on("videoInfo", function (info) { 167 + jessibuca.on("videoInfo", function (info) {
168 console.log("videoInfo", info); 168 console.log("videoInfo", info);
169 }); 169 });
170 170
171 - this.jessibuca.on("error", function (error) { 171 + jessibuca.on("error", function (error) {
172 console.log("error", error); 172 console.log("error", error);
173 }); 173 });
174 174
175 - this.jessibuca.on("timeout", function () { 175 + jessibuca.on("timeout", function () {
176 console.log("timeout"); 176 console.log("timeout");
177 }); 177 });
178 178
179 - this.jessibuca.on('start', function () { 179 + jessibuca.on('start', function () {
180 console.log('start'); 180 console.log('start');
181 }) 181 })
182 182
183 - this.jessibuca.on("performance", function (performance) { 183 + jessibuca.on("performance", function (performance) {
184 let show = "卡顿"; 184 let show = "卡顿";
185 if (performance === 2) { 185 if (performance === 2) {
186 show = "非常流畅"; 186 show = "非常流畅";
@@ -189,25 +189,25 @@ export default { @@ -189,25 +189,25 @@ export default {
189 } 189 }
190 _this.performance = show; 190 _this.performance = show;
191 }); 191 });
192 - this.jessibuca.on('buffer', function (buffer) { 192 + jessibuca.on('buffer', function (buffer) {
193 // console.log('buffer', buffer); 193 // console.log('buffer', buffer);
194 }) 194 })
195 195
196 - this.jessibuca.on('stats', function (stats) { 196 + jessibuca.on('stats', function (stats) {
197 // console.log('stats', stats); 197 // console.log('stats', stats);
198 }) 198 })
199 199
200 - this.jessibuca.on('kBps', function (kBps) { 200 + jessibuca.on('kBps', function (kBps) {
201 _this.kBps = Math.round(kBps); 201 _this.kBps = Math.round(kBps);
202 }); 202 });
203 203
204 // 显示时间戳 PTS 204 // 显示时间戳 PTS
205 - this.jessibuca.on('videoFrame', function () { 205 + jessibuca.on('videoFrame', function () {
206 206
207 }) 207 })
208 208
209 // 209 //
210 - this.jessibuca.on('metadata', function () { 210 + jessibuca.on('metadata', function () {
211 211
212 }); 212 });
213 }, 213 },
@@ -216,40 +216,40 @@ export default { @@ -216,40 +216,40 @@ export default {
216 }, 216 },
217 play: function (url) { 217 play: function (url) {
218 console.log(url) 218 console.log(url)
219 - if (this.jessibuca) { 219 + if (jessibuca) {
220 this.destroy(); 220 this.destroy();
221 } 221 }
222 this.create(); 222 this.create();
223 - this.jessibuca.on("play", () => { 223 + jessibuca.on("play", () => {
224 this.playing = true; 224 this.playing = true;
225 this.loaded = true; 225 this.loaded = true;
226 - this.quieting = this.jessibuca.quieting; 226 + this.quieting = jessibuca.quieting;
227 }); 227 });
228 - if (this.jessibuca.hasLoaded()) {  
229 - this.jessibuca.play(url); 228 + if (jessibuca.hasLoaded()) {
  229 + jessibuca.play(url);
230 } else { 230 } else {
231 - this.jessibuca.on("load", () => { 231 + jessibuca.on("load", () => {
232 console.log("load 播放") 232 console.log("load 播放")
233 - this.jessibuca.play(url); 233 + jessibuca.play(url);
234 }); 234 });
235 } 235 }
236 }, 236 },
237 pause: function () { 237 pause: function () {
238 - if (this.jessibuca) {  
239 - this.jessibuca.pause(); 238 + if (jessibuca) {
  239 + jessibuca.pause();
240 } 240 }
241 this.playing = false; 241 this.playing = false;
242 this.err = ""; 242 this.err = "";
243 this.performance = ""; 243 this.performance = "";
244 }, 244 },
245 destroy: function () { 245 destroy: function () {
246 - if (this.jessibuca) {  
247 - this.jessibuca.destroy(); 246 + if (jessibuca) {
  247 + jessibuca.destroy();
248 } 248 }
249 if (document.getElementById("buttonsBox") == null) { 249 if (document.getElementById("buttonsBox") == null) {
250 this.$refs.container.appendChild(this.btnDom) 250 this.$refs.container.appendChild(this.btnDom)
251 } 251 }
252 - this.jessibuca = null; 252 + jessibuca = null;
253 this.playing = false; 253 this.playing = false;
254 this.err = ""; 254 this.err = "";
255 this.performance = ""; 255 this.performance = "";
@@ -262,7 +262,7 @@ export default { @@ -262,7 +262,7 @@ export default {
262 }, 262 },
263 fullscreenSwich: function () { 263 fullscreenSwich: function () {
264 let isFull = this.isFullscreen() 264 let isFull = this.isFullscreen()
265 - this.jessibuca.setFullscreen(!isFull) 265 + jessibuca.setFullscreen(!isFull)
266 this.fullscreen = !isFull; 266 this.fullscreen = !isFull;
267 }, 267 },
268 isFullscreen: function () { 268 isFullscreen: function () {
@@ -273,8 +273,8 @@ export default { @@ -273,8 +273,8 @@ export default {
273 } 273 }
274 }, 274 },
275 destroyed() { 275 destroyed() {
276 - if (this.jessibuca) {  
277 - this.jessibuca.destroy(); 276 + if (jessibuca) {
  277 + jessibuca.destroy();
278 } 278 }
279 this.playing = false; 279 this.playing = false;
280 this.loaded = false; 280 this.loaded = false;