Tencent / Tencent/libpag

PAG文件突然无法播放,demo可复现

Open
#2,086 0 comments 0 reactions 1 assignee View on GitHub

@kevingpqi123 is already working on this.

Since Jan 15, 2024.

Dominant language
HTML
Stars
5.8k
Forks
531
Avg merge
8d 55m
Merged PRs (30d)
17

Description

【版本信息】

4.3.47 (4.2.x版本也可复现)

【平台信息】

iOS上的Web 浏览器
移动端Safari,微信端内均可复现

【预期的表现】

正常播放pag

【实际的情况】

pag无法加载,播放。无论是把pag放在本地,还是通过url加载,均加载失败。之前是可以播放的。

【Demo及附件】

pag文件:https://mmae.qpic.cn/206/20303/stodownload?filekey=30250201010411300f020200ce040253480400020301b66a040d00000004627466730000000132&hy=SH&storeid=265a5482c000694d70b9d8b8c000000ce00004f4f53482a661b01e6823571a

复现代码:

 <canvas class="canvas" id="pag"></canvas>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
      var vConsole = new window.VConsole();
</script>
 <script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
 <script>
  async function fetchAndConvertToBase64(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    const reader = new FileReader();
    return new Promise((resolve, reject) => {
      reader.onloadend = () => {
        resolve(reader.result.split(',')[1]);
      };
      reader.readAsDataURL(blob);
    });
  }

  const url = '../assets/libpag.wasm';

  fetchAndConvertToBase64(url)
    .then((base64) => {
      console.log('Base64:', base64,base64,base64,base64,base64,base64,base64,base64,base64,base64,base64,base64,base64);
    })  // 打印超长字符串
    .catch((error) => {
      console.error('Error:', error);
    });
  window.onload = async () => {
    const pagUrl =
      'https://mmae.qpic.cn/206/20303/stodownload?filekey=30250201010411300f020200ce040253480400020301b66a040d00000004627466730000000132&hy=SH&storeid=265a5482c000694d70b9d8b8c000000ce00004f4f53482a661b01e6823571a';
    const PAG = await window.libpag.PAGInit();
    const buffer = await fetch(pagUrl).then((response) => response.arrayBuffer());
    const pagFile = await PAG.PAGFile.load(buffer);
    const canvas = document.getElementById('pag');
    canvas.width = pagFile.width();
    canvas.height = pagFile.height();
    const pagView = await PAG.PAGView.init(pagFile, canvas);
    pagView.setRepeatCount(0);
    await pagView.play();
  };
 </script>

复现步骤

  1. 在微信里打开上面的页面。
  2. pag开始播放后,点击vconsole调试按钮,页面会卡死(因为vconsole里打印了超长字符串),退出页面,重新进入,会发现pag已经无法加载,在safari打开也无法加载,重启手机可恢复。
  3. 如果上面步骤无法复现,可以退出页面,进入再点vconsole,多重复几次。

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.