Commit cba2e6b90b50c208e3354d4561b40576a251c370
1 parent
d3e815bf
优化wasm播放器内存占用问题
Showing
1 changed file
with
38 additions
and
38 deletions
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; |