Integrating AWS IVS quality plugin with video.js for enhanced video streaming in a Next JS application

Hello, I am new to AWS media services and recently started experimenting with AWS IVS for video streaming. I am currently working on integrating the AWS IVS quality plugin to Video.js. The player is up and running, displaying the video, but I encountered a strange error.

Below is the callback function that is executed when the player is set up:

 const handlePlayerReady = (player) => {

    if (ivsMountState) {
        registerIVSQualityPlugin(videojs);
        player.enableIVSQualityPlugin();
    }

    playerRef.current = player;

    player.on('waiting', () => {
        console.log('player is waiting');
    });

    player.on('dispose', () => {
        console.log('player will dispose');
    });

    player.on('dblclick', function () { player.requestFullscreen(); });
};

I included the registerIVSQuality plugin function from the AWS CDN like this:

     <Script onLoad={(e) => setIvsMountState(true)} src="https://player.live-video.net/1.18.0/amazon-ivs-quality-plugin.min.js" />

However, I am now seeing an error message:

TypeError: e.extend is not a function

Any assistance with this issue would be greatly appreciated. Thank you!

Answer №1

As a result of modifications in the plugin registration process of Video.JS, it is currently required to utilize Video.js version 8. However, we are actively developing an upcoming release of the IVS Player that will support Video.js versions equal to or greater than 8.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the asset path location in Webpack

I am currently working on a Vue application that utilizes Webpack for code minimization. Is there a method to dissect the chunks and adjust the base path from which webpack retrieves the assets? For example, by default webpack fetches assets from "/js" o ...

The entirety of the text has been mirrored to the right in React Native code

Is there a way to align this text on both the left and right sides, along with styling the button and text input elements to be more colorful and have bigger fonts? Below is an example of the desired outcome: This is what I have attempted so far: <Vie ...

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

What is the optimal method to deploy a ReactJS web application on a production server?

Initially, my plan was to deploy a reactjs website on a production server using Apache. However, after doing some research on Google, I found multiple ways to serve a reactjs web app. For instance: Using Pm2 or simply starting it with 'next start&a ...

Updating a React-Redux application to NextJS strategy

I am looking to convert my React-Redux App into Next JS for better visibility on search engines. However, I am unsure about how to proceed as all backend actions are currently handled within the component lifecycles useEffect. I want to understand where t ...

Maintain the current states when returning to a previous point in time

In my Angular app, I have multiple pages that allow users to make changes such as opening tabs and pills, modals, etc. For instance, if a user opens a modal and then clicks a link within that modal that takes them to another page, I want the original page ...

The concept of tweening camera.lookat in Three.js

Struggling to smoothly tween the camera.lookAt method in Three.js using Tween.js. The current implementation rotates the camera directly to the object's position. Here is the code snippet that sort of works: selectedHotspot = object; var tw ...

Is it possible to create a return using messageEmbed in Discord?

I have been working on creating a Discord bot that responds to the ! status command with the server status. I took inspiration from this existing bot. The only change I made was to ensure that the bot replies immediately to the ! status command without re ...

One effective way to transfer state to a child component using function-based React

My goal is to pass an uploaded file to a child component in React. Both the parent and child components are function-based and utilize TypeScript and Material-UI. In the Parent component: import React from 'react'; import Child from './ ...

loading preloaded fonts at the optimal moment

My webfonts are loaded using Webfontloader as shown below: <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> <script> WebFont.load({ custom: { families: ['BlenderProBook' ...

ng-disabled is failing to interact with the $scope variable

Attempting something like this: <button class="btn btn-lg btn-block btn-section" ng-disabled="{{ selectedfruits.length }} < 5" > Show selected fruits</button> When inspecting in Chrome developer tools, the code appears as follows: &l ...

Props in Vue components are exclusively accessible within the $vnode

Exploring the realm of Vue.js, I am tasked with constructing a recursive Component renderer that transforms JSON into rendered Vue components. The recursive rendering is functioning smoothly; however, the props passed to the createElement function (code b ...

CSS problem with padding and width

Currently, I'm working on a conditional rendering issue where I want to give a div full width but due to padding applied to its parent, it's not expanding to the container's full width. Here is the snippet of the code: import Image from &qu ...

Setting up React-Leaflet 4 in conjunction with NextJS 14 for effective functionality

Creating a leaflet map in a NextJS 14 App comes with its fair share of challenges: NextJS 14 defaults to Server Side Rendering (SSR), which isn't compatible with leaflet Webpack bundling used by NextJS 14 can cause issues with leaflet icons The nece ...

the onreadystatechange function is not being triggered

When trying to call the show_Message function, I expected an alert box to appear. However, the onreadystatechange is not working as expected. All other alert boxes are functioning properly. Below is my JavaScript function: function send_Message(){ var ...

When a string begins with the "<" character, jQuery regex is unable to find a match

I am attempting to check if a string starts with the "<" character, but I am running into issues. The expression works perfectly fine on regex101.com, however, it fails when used in my personal files. When I input a backslash everything works as expect ...

Issue: The variable '$viewMap[...]' is either null or undefined

Unfortunately, my knowledge of jQuery/Javascript is quite limited. I am encountering a Javascript error when trying to change the "how did you hear about us" dropdown on a form. The error message states: Error: '$viewMap[...]' is null or not an ...

Tips for designing a unique layout inspired by Pinterest: create a visually appealing grid where each item has a consistent height, but varying

While browsing the Saatchi & Saatchi website yesterday, I was impressed by their unique layout that utilizes varying post widths that resize effectively on smaller windows. Upon inspecting the source code, I discovered that they categorize posts as Small, ...

Preventing v-stepper-step header click in Vuetify.js when form is invalid

I'm using Vuetify's v-stepper component. What I'm trying to achieve is: When a user clicks on a stepper step in the header, I want to block the click event if the active form is not valid. I have been able to accomplish this by attaching ...

Tips for Retrieving the Key Names of JSON Objects within a JSON Array

I'm trying to retrieve the object names "channelA" and "channelB". Here is the JSON data: [ { "channelA": { "programmes": [ { "start_utc": 1522208700, "stop_utc": 152220 ...