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