npm install --save @stormstreaming/stormlibraryyarn add @stormstreaming/stormlibrary<script src="https://cdn.stormstreaming.com/stormlibrary/2-latest.min.js></script>Please check IIFE (Immediately-invoked function expression) embed method for reference!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Storm JavaScript Library - IIFE Sample page</title>
<meta charset="UTF-8">
<script src="../dist/iife/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function (event) {
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function (event) {
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function (event) {
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function (event) {
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function (event) {
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Storm JavaScript Library - UMD Sample page</title>
<meta charset="UTF-8">
<script src="../dist/umd/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary.create(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function(event){
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function(event){
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function(event){
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function(event){
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function(event){
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html>import {StormLibrary} from "../dist/esm/index.js";
/**
* Standard configuration object
*/
const config = {
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = new StormLibrary(config)
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function (event) {
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function (event) {
console.log("videoBuffering");
})
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function (event) {
console.log("videoMetadata");
})
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function (event) {
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function (event) {
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();<!DOCTYPE html>
<html lang="en">
<head>
<title>Storm JavaScript Library - AMD Sample page</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Path to the AMD module
*/
requirejs(['../dist/amd/index'], function (storm) {
/**
* Library instance
*/
const player = new storm.create(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
player.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
player.addEventListener("videoConnecting", function (event) {
console.log("videoConnecting");
})
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
player.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
player.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
player.addEventListener("videoBuffering", function (event) {
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
player.addEventListener("videoMetadata", function (event) {
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
player.addEventListener("videoPlay", function (event) {
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
player.addEventListener("videoProgress", function (event) {
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
player.initialize();
});
</script>
</body>
</html>npm install --save @stormstreaming/stormplayeryarn add @stormstreaming/stormplayer<script src="https://cdn.stormstreaming.com/stormplayer/2-latest.min.js></script>Please check IIFE (Immediately-invoked function expression) embed method for reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../dist/iife/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
role: "player", // "player" or "streamer"
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function(event){
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function(event){
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function(event){
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function(event){
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function(event){
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../dist/umd/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
role: "player", // "player" or "streamer"
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary.create(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function(event){
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function(event){
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function(event){
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function(event){
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function(event){
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html>import {StormLibrary} from "../dist/esm/index.js";
/**
* Standard configuration object
*/
const config = {
role: "player", // "player" or "streamer"
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = new StormLibrary(config)
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
storm.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
storm.addEventListener("videoConnecting", function(event){
console.log("videoConnecting");
});
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
storm.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
storm.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
storm.addEventListener("videoBuffering", function(event){
console.log("videoBuffering");
})
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("videoMetadata", function(event){
console.log("videoMetadata");
})
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
storm.addEventListener("videoPlay", function(event){
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("videoProgress", function(event){
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const config = {
role: "player", // "player" or "streamer"
connectionType: "direct", // "direct" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamName: "test", // name of the stream
application: "live" // application name (can be configured in storm server settings)
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
restartOnError: true, // if something bad happens, player will try to restart
reconnectTime: 1.0, // if a connection with a server fails, player will restart in given time
enabledProtocols: ["MSE", "HLS"], // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "letterbox"
containerID: "container", // name of the HTML container
width: 640, // initial player width
height: 360 // initial player height
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Path to the AMD module
*/
requirejs(['../dist/amd/index'], function (storm) {
/**
* Library instance
*/
const player = new storm.create(config);
/**
* This event is triggered when the player is ready to receive API calls. No method should be called upon the player
* before this event is registered.
*/
player.addEventListener("playerReady", function (event) {
console.log("playerReady is now ready");
});
/**
* The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
* for a successful playback.
*/
player.addEventListener("videoConnecting", function(event){
console.log("videoConnecting");
})
/**
* This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
* This event will be triggered after videoConnecting only and will stop a playback sequence.
*/
player.addEventListener("videoNotFound", function (event) {
console.log("videoNotFound");
});
/**
* Event is triggered when the player could not connect to the storm server (server is not running, or there are
* some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
*/
player.addEventListener("playerConnectionFailed", function (event) {
console.log("playerConnectionFailed");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. It's the second event in the sequence for a successful playback.
*/
player.addEventListener("videoBuffering", function(event){
console.log("videoBuffering");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
player.addEventListener("videoMetadata", function(event){
console.log("videoMetadata");
});
/**
* The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
* a successful playback.
*/
player.addEventListener("videoPlay", function(event){
console.log("videoPlay");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
player.addEventListener("videoProgress", function(event){
console.log("videoPlay");
console.log("- stream duration", event.streamDuration); // how long does this stream sessions last
console.log("- source duration", event.sourceDuration); // how long is the source broadcasting
console.log("- source start time", event.sourceStartTime); // when the source was started
console.log("- stream start Time", event.streamStartTime); // when this stream session was started
console.log("- dvr cache size", event.dvrCacheSize); // dvr cashe size in ms
});
/**
* Since all events were added, we can tell the script to start
*/
player.initialize();
});
</script>
</body>
</html>
