React集成AWS IVS与VideoJs时遇Unexpected token '<'语法错误求助

问题描述 #

基于React开发直播应用时，集成AWS IVS与Video.js出现错误：Uncaught SyntaxError: Unexpected token '<' (at [object Object]:1:1)，定位到播放器初始化时的techOrder:['AmazonIVS']代码行，导致视频无法正常播放。

用户实现代码：

import React, { useEffect, useRef } from 'react'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import {
  VideoJSQualityPlugin,
  VideoJSIVSTech,
  registerIVSQualityPlugin,
  registerIVSTech,
  VideoJSEvents,
} from 'amazon-ivs-player'
import wasmBinaryPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm'
import wasmWorkerPath from 'amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js'

const VideoJS = (props) => {
  const videoRef = useRef(null)
  let link =
    'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'

  useEffect(() => {
    const createAbsolutePath = (assetPath) =>
      new URL(assetPath, document.URL).toString()

    registerIVSTech(videojs, {
      wasmWorker: createAbsolutePath(wasmWorkerPath),
      wasmBinary: createAbsolutePath(wasmBinaryPath),
    })
    registerIVSQualityPlugin(videojs)
    const player = videojs('videojs-player', {
      techOrder: ['AmazonIVS'],
      autoplay: true,
      controls: true,
      responsive: true,
      fluid: true,
      loop: true,
      mute: true,
      width: '640',
      height: '264',
      playbackRates: [0.5, 1, 1.5, 2],
      aspectRatio: '16:9',
    })

    if (player) {
      player.enableIVSQualityPlugin()
      const events = player.getIVSEvents()
      console.log('events: ', events)
      const ivsPlayer = player.getIVSPlayer()
      ivsPlayer.addEventListener(events.PlayerEventType.ERROR, () => {
        console.log('Error')
      })
      ivsPlayer.addEventListener(events.PlayerState.PLAYING, () => {
         console.log('IVS Player is playing')
       })
    }

    player.autoplay(link)
    player.src(link)
  }, [])

  return (
    <div data-vjs-player>
      <video
        ref={videoRef}
        id='videojs-player'
        className='video-js vjs-big-play-centered'
      />
    </div>
  )
}

export default VideoJS

问题分析 #

这个错误本质是Wasm/Worker资源加载路径错误，导致请求返回了HTML页面（比如404页面开头的<），而非预期的二进制/JS文件。结合代码，核心问题点包括：

1. 资源路径拼接逻辑不符合React项目打包规则，导致加载错误文件
2. 播放器初始化顺序、API使用方式不符合Video.js规范
3. 未处理组件卸载时的播放器销毁，存在内存泄漏风险

修复方案 #

1. 修正资源路径配置 #

React项目中，直接用document.URL拼接资源路径会导致打包后路径错位，需根据打包工具调整：

• Vite项目：在vite.config.js中添加资源后缀支持，直接使用import的路径：

  // vite.config.js
  export default defineConfig({
    assetsInclude: ['**/*.wasm', '**/*.js'],
  });
  

  注册IVS Tech时直接传入路径：

  registerIVSTech(videojs, {
    wasmWorker: wasmWorkerPath,
    wasmBinary: wasmBinaryPath,
  });
  

• Create React App项目：将Wasm/Worker文件手动复制到public目录，用process.env.PUBLIC_URL拼接路径：

  const wasmWorkerPath = `${process.env.PUBLIC_URL}/amazon-ivs-wasmworker.min.js`;
  const wasmBinaryPath = `${process.env.PUBLIC_URL}/amazon-ivs-wasmworker.min.wasm`;
  

2. 优化播放器初始化逻辑 #

• 用React ref获取视频元素，避免DOM ID冲突
• 修正autoplay和src的调用方式，符合Video.js API规范
• 添加组件卸载时的播放器销毁逻辑
• 增强错误捕获

修改后的useEffect代码：

useEffect(() => {
  let player = null;

  // 注册IVS技术与插件
  registerIVSTech(videojs, {
    wasmWorker: wasmWorkerPath,
    wasmBinary: wasmBinaryPath,
  });
  registerIVSQualityPlugin(videojs);

  if (videoRef.current) {
    player = videojs(videoRef.current, {
      techOrder: ['AmazonIVS'],
      autoplay: false, // 手动控制播放规避浏览器自动播放限制
      controls: true,
      responsive: true,
      fluid: true,
      loop: true,
      mute: true,
      width: '640',
      height: '264',
      playbackRates: [0.5, 1, 1.5, 2],
      aspectRatio: '16:9',
    });

    player.enableIVSQualityPlugin();
    const events = player.getIVSEvents();
    const ivsPlayer = player.getIVSPlayer();

    ivsPlayer.addEventListener(events.PlayerEventType.ERROR, (err) => {
      console.error('IVS播放器错误:', err);
    });
    ivsPlayer.addEventListener(events.PlayerState.PLAYING, () => {
      console.log('IVS播放器正在播放');
    });

    // 设置视频源并尝试播放
    player.src({ src: link, type: 'application/x-mpegURL' });
    player.play().catch(err => console.error('自动播放失败:', err));
  }

  // 组件卸载时销毁播放器
  return () => {
    if (player) {
      player.dispose();
    }
  };
}, []);

3. 调整视频元素引用 #

移除冗余ID，仅保留React ref绑定：

return (
  <div data-vjs-player>
    <video
      ref={videoRef}
      className='video-js vjs-big-play-centered'
    />
  </div>
);

关键验证点 #

1. 打开浏览器开发者工具Network面板，确认amazon-ivs-wasmworker.min.js和amazon-ivs-wasmworker.min.wasm请求状态为200，响应内容不是HTML
2. 确保amazon-ivs-player与video.js版本兼容（推荐使用Video.js 7.x系列）
3. 测试浏览器自动播放逻辑，若失败需检查静音设置是否生效

内容的提问来源于stack exchange，提问作者Sulagna Ghosh