未捕獲的語法錯誤：意外的令牌“<”（在 [object Object]:1:1）：Amazon IVS 與 VideoJs 集成

Question

我目前正在使用 aws_ivs 和 VideoJs 集成構建一個實時流媒體反應應用程序並獲得

未捕獲的語法錯誤：意外的標記“<”（在 [object Object]:1:1）

我發現錯誤是在創建播放器實例時從“techOrder:['AmazonIVS']”行生成的，並且視頻沒有播放。

ReactJs

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

這是我正在關注的文檔： https://docs.aws.amazon.com/ivs/latest/userguide/player-videojs.html

Answer 1

答案在於“您需要托管它們才能使用 IVS 播放器”這一行。

Amazon Player SDK：VideoJs 集成 - 在第 4 點的最后，您會找到這一行。

由於我必須將 nextJs 用於最終產品，因此我托管（添加）了位於“node_modules/”文件夾下的“amazon-ivs-wasmworker.min.js”和“amazon-ivs-wasmworker.min.wasm”文件在公共文件夾中的“amazon-ivs-player/dist/”下。

因此，您所要做的就是以您各自的語言托管它們。