Uncaught SyntaxError: Unexpected token '<' (at [object Object]:1:1) : Amazon IVS with VideoJs Integration

Question

I am currently building a live-streaming react application using aws_ivs with VideoJs integration and getting

Uncaught SyntaxError: Unexpected token '<' (at [object Object]:1:1)

What I found is error was generated from the line "techOrder:['AmazonIVS']" when creating the instance of the player and the video was not playing.

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

This is the documentation that I am following: https://docs.aws.amazon.com/ivs/latest/userguide/player-videojs.html

Answer 1

The answer is lying in the line "You need to host them, to use the IVS player."

Amazon Player SDK: VideoJs integration-where at the very end of the 4th point you will find this line.

As I had to use nextJs for the final product so I hosted(added) both 'amazon-ivs-wasmworker.min.js' and 'amazon-ivs-wasmworker.min.wasm' files which are under the 'node_modules/' folder under 'amazon-ivs-player/dist/' in the public folder.

So all you had to do is to host them in your respective language.