iphone13 机型报MIME type警告 导致无法加载

[GzxNydia]

Which Version of libpag are you using?

libpag 4.2.76

What Platform are you on?

iPhone13 ...

Expected Behavior

Actual Behavior

Code Example

import type { CSSProperties } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { PAGInit } from 'libpag';
import type { PAGView } from 'libpag/types/pag-view';

export interface PagViewProps {
  className?: string;
  style?: CSSProperties;
  src: string;

  repeatCount?: number;
  canvasWidth?: number;
  canvasHeight?: number;
  loop?: boolean;
  onEnd?: () => void;
  onInit?: (value?: PAGView) => void;
}

const PagView = (props: PagViewProps) => {
  const { src, repeatCount = 1, canvasWidth, canvasHeight, onInit, onEnd, loop, className, style } = props;
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [pagData, setPagData] = useState<ArrayBuffer>();
  const [pagView, setPagView] = useState<PAGView>();
  const [pagFileInfo, setPagFileInfo] = useState<number[]>([]);

  const fetchPag = useCallback(async (url: string) => {
    const arrayBuffer = await fetch(url).then(res => res.arrayBuffer());
    setPagData(arrayBuffer);
  }, []);

  useEffect(() => {
    if (canvasRef.current && pagData) {
      (async () => {
        const PAG = await PAGInit();
        const pagFile = await PAG.PAGFile.load(pagData);
        console.log('pagView', pagFile);
        setPagFileInfo([pagFile.width(), pagFile.height()]);
        const pagView = await PAG.PAGView.init(pagFile, canvasRef.current as HTMLCanvasElement);
        // console.log('pagView', pagView);
        setPagView(pagView);
        pagView?.setRepeatCount(repeatCount);
      })();
    }
  }, [pagData, repeatCount]);

  useEffect(() => {
    if (pagView) {
      onInit && onInit(pagView);
      const handleAnimationEnd = () => {
        onEnd && onEnd();
        if (loop) {
          pagView.play();
        }
      };
      pagView.addListener('onAnimationStart', () => {
        // setShowFirst(false);
      });
      pagView.addListener('onAnimationEnd', handleAnimationEnd);
    }
  }, [onEnd, loop, pagView, onInit]);

  useEffect(() => {
    fetchPag(src);
  }, [fetchPag, src]);

  return (
    <div>
      <canvas
        ref={canvasRef}
        className={className}
        style={{
          maxWidth: '480px',

          ...style,
        }}
        width={canvasWidth || pagFileInfo[0]}
        height={canvasHeight || pagFileInfo[1]}
      />
    </div>
  );
};

export default memo(PagView);

错误信息

wasm streaming compile failed: TypeError: Unexpected response MIME type. Expected 'application/wasm'

pagFile

是有官方likepag

[zhalice2011]

Hello, in your React application, are you using locateFile to load the wasm file from your own server?

Please make sure your server adds the 'application/wasm' MIME type for .wasm files.

Like this: