For the next step please check our Storm JavaScript Player - Stream & Server guide where you’ll learn how to connect the player with Storm Streaming Cloud or Server instance.
In this tutorial, you will learn how to correctly use the Storm Player React Component to embed a player on websites built with the ReactJS framework.
npm install @stormstreaming/stormplayer-react
yarn add @stormstreaming/stormplayer-react
import {
useEffect,
useRef
} from "react";
import {
StormPlayer,
StormPlayerConfig,
StormStreamConfig,
StormPlayerEvent,
StormPlayerClass,
} from "@stormstreaming/stormplayer-react";
const playerConfig: StormPlayerConfig = {
width: "100%",
aspectRatio: "16:9",
title: "Your first live stream",
subtitle: "This is going to be epic!"
};
const streamConfig: StormStreamConfig = {
stream: {
serverList: [{
host: "localhost",
application: "live",
port: 8081,
ssl: false
}],
streamKey: "test"
},
settings: {
autoStart: true
},
};
const App = () => {
const playerRef = useRef <StormPlayerClass> (null);
useEffect(() => {
// Sample callback for event listener
const onPlaybackProgress = (event: StormPlayerEvent["playbackProgress"]) => {
console.log(`Player ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
console.log(`-->: streamStartTime (source): ${event.streamStartTime}`);
console.log(`-->: streamDuration (source): ${event.streamDuration}`);
console.log(`-->: playbackStartTime (this stream): ${event.playbackStartTime}`);
console.log(`-->: playbackDuration (this stream): ${event.playbackDuration}`);
};
if (playerRef.current) {
// Register event listener
playerRef.current.addEventListener("playbackProgress", onPlaybackProgress);
// Initialize player (all event-listeners are now registered)
playerRef.current.initialize();
}
return () => {
if (playerRef.current) {
playerRef.current.removeEventListener("playbackProgress", onPlaybackProgress);
}
};
}, []);
return (
<div>
<StormPlayer
ref={playerRef}
playerConfig={playerConfig}
streamConfig={streamConfig}
/>
</div>
);
};
export default App;
import {
StormPlayer,
StormPlayerConfig,
StormStreamConfig,
StormPlayerEvent,
StormPlayerClass
} from "@stormstreaming/stormplayer-react";
These are the required imports that include Storm Player into your class, along with the configuration types for both stream and player.
const playerConfig: StormPlayerConfig = {
width: "100%",
aspectRatio: "16:9",
title: "Your first live stream",
subtitle: "This is going to be epic!"
};
The player configuration object contains all settings related to the appearance and behavior of the player itself. The example provided includes only basic settings. You can learn more about the configuration possibilities from the Storm Player - General Configuration section. If you wish to customize your player, make sure to check Storm Player - Styles & Interface Configuration.
const streamConfig: StormStreamConfig = {
stream: {
serverList: [{
host: "localhost",
application: "live",
port: 8081,
ssl: false
}],
streamKey: "test"
},
settings: {
autoStart: true
},
};
The stream configuration object contains parameters related to the video transmission itself. Similarly to the example presented above, it includes only basic options. You can learn more about configuring this section from the Storm Library - Stream & Server Configuration Guide.
useEffect(() => {
// Sample callback for event listener
const onPlaybackProgress = (event: StormPlayerEvent["playbackProgress"]) => {
console.log(`Player ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
console.log(`-->: streamStartTime (source): ${event.streamStartTime}`);
console.log(`-->: streamDuration (source): ${event.streamDuration}`);
console.log(`-->: playbackStartTime (this stream): ${event.playbackStartTime}`);
console.log(`-->: playbackDuration (this stream): ${event.playbackDuration}`);
};
if (playerRef.current) {
// Register event listener
playerRef.current.addEventListener("playbackProgress", onPlaybackProgress);
// Initialize player (all event-listeners are now registered)
playerRef.current.initialize();
}
}, []);
In the above example, we can see how to add an event listener to the player. The lists of supported events can be found in the Player Events and Playback Events sections. For a comprehensive description of the API, please refer to the API Methods section.
playerRef.current.initialize();
Once all event listeners have been registered with the player, we can ultimately initialize the player using the initialize() method. Please bear in mind that if the player is set to operate in autostart mode and events are registered after this method is called, your code may not function correctly due to the asynchronous execution of the code.
Create a free ticket and our support team will provide you necessary assistance.