Update index.js

packages/artplayer-plugin-backlight/src/index.js

@@ -12,12 +12,12 @@ function matrixCallback(callback) {
     return result;
 }
 
-function getColors($img, width, height) {
+function getColors($video, width, height) {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     canvas.width = width;
     canvas.height = height;
-    ctx.drawImage($img, 0, 0);
+    ctx.drawImage($video, 0, 0);
     return matrixCallback((xIndex, yIndex, x, y) => {
         const itemW = width / x;
         const itemH = height / y;
@@ -87,13 +87,10 @@ function artplayerPluginBacklight(art) {
     art.on('firstCanplay', () => {
         const { clientWidth, clientHeight } = $video;
         const matrix = creatMatrix($backlight, clientWidth, clientHeight);
-        const $img = document.createElement('img');
         (function loop() {
             window.requestAnimationFrame(() => {
                 if (player.playing) {
-                    const dataUri = player.getScreenshotDataURL();
+                    const colors = getColors($video, clientWidth, clientHeight);
-                    $img.onload = () => {
-                        const colors = getColors($img, clientWidth, clientHeight);
                     colors.forEach(({ r, g, b }, index) => {
                         const { $box, left, right, top, bottom } = matrix[index];
                         // eslint-disable-next-line no-nested-ternary
@@ -104,8 +101,6 @@ function artplayerPluginBacklight(art) {
                         $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
                     });    
                 };
-                    $img.src = dataUri;      
-                };
                 loop();
             });
         })();