H5Player
FAQ
FAQ

Live View Video Access

1. APIs

1.1. createLivePlayer

Description

This interface is used to create a live-view player instance.

Example

  • livePlayer = playerjs.createLivePlayer(domList: domElement Array, options: Object)

Parameter Details

domList:

An array of div DOM containers. Make sure to set the width and height styles, otherwise, the video might collapse or have other style issues.

options:

1.1.1. Basic Configuration Items

Field Type Description Default Value Required
deviceInfos object[] The collection of device information Yes
├ devId string The subfield of deviceInfos. It is the unique device identifier. Yes
├ channels string The subfield of deviceInfos. It is the list of channel numbers, separated by commas, e.g., 1,2,3,4. Yes
streamType string Stream type: MAJOR (main stream), MINOR (sub-stream) MAJOR No
mediaProtocol string Media protocol: HTTP_FLV (effective for S17) HTTP_FLV No
quality string Resolution: SMOOTH for smooth, STANDARD for standard, CLARITY for clear (effective for S17) STANDARD No
hasAudio number It specifies whether audio is included, with the default setting being audio on. Value range: 0 for no audio, and 1 for audio (effective for S17). 1 No
expireTime number The address expiration time (defaults to 20 seconds) (effective for S17) 20 No
hasTranscode number It specifies whether the H265 video transcoding is needed, with the default behavior being to transcode. Value range: 0 for no transcoding, and 1 for transcoding (effective for S17). 0 No
playMode number Play mode: 0-real-time priority; 1-smooth priority. Effective in MSE decoding mode. Real-time priority is the default strategy, enabling loading when there is no data; Smooth priority uses slow playback strategy when there is less cache to minimize loading causing screen pause. Due to caching requirements, real-time performance is slightly worse. 0 No

1.1.2. Security Access

Description

S17 takes effect: The device uses AES and other encryption methods for transmission, allowing decryption and play on the H5Player side.

Parameter

Field Type Description Default Value Required
hasEncrypt number The AES decryption type: 0 for platform decryption; 1 for frontend decryption 0 No

1.1.3. Operation Traces

Description

S17 takes effect: This parameter is used to record information such as the time recorded during playing after the user accesses s17.

Parameter

Field Type Description Default Value Required
optId string Operation ID, used for operation logging purposes "" No

1.1.4. LAN and WAN Access

Description

S17 takes effect: It allows users to access S17 via LAN or WAN.

Parameter

Field Type Description Default Value Required
addrType number Address type: 1 for WAN, 2 for LAN; 1 No

1.1.5. 【V2.0.1】Network Request Type Selection

Description

Allow access to multiple video sources

Parameter

Field Type Description Default Value Required
netRequestType number Network request type, 1-S17, 4- Device direct connection (added in V2.0.1) 1 No

1.1.6. 【V2.0.1】Video Decryption Key

Description

Device direct connection takes effect: The scenario of device direct connection requires the integrator to set a key for decryption and playback

Parameter

Field Type Description Default Value Required
encrypt object[] Key information [] No
├ channel number Channel information No
├ encryptType string Key type，AES/RSA AES No
├ aesParam object AES info No
├ aesType number AES Encryption type，128、192、256 256 No
├ aesKey string AES Key No

1.2. Methods

1.2.1. load

Description

The live-view player obtains the FLV play address and loads the video stream.

Example

  • livePlayer.load()

1.2.2. stop

Description

It allows stopping the play of the specified devId's channel. After the play is stopped, you can call the replay interface to resume play.

If channel is 0 or not provided, all channels of the current device will be stopped.

If no parameters are provided, all devices will be stopped.

Example

  • livePlayer.stop([{channel, devId}])

Parameter

Property Value Type Description
object[] Parameter information
|-channel Number The device channel number
|-devId String Device ID

1.2.4. destroy

Description

This method is used to destroy the specified devId channel.

If channel is 0 or not provided, all channels of the current device will be destroyed.

If no parameters are provided, all devices will be destroyed.

Example

  • livePlayer.destroy([{channel, devId}])

Parameter

Property Value Type Description
object[] Parameter information
|-channel Number The device channel number
|-devId String Device ID

1.2.6. replay

Description

After the channel of the specified devId is stopped, this interface can be called to resume play.

Example

  • livePlayer.replay([{channel, devId}])

Parameter

Property Value Type Description
object[] Parameter information
|-channel Number The device channel number
|-devId String Device ID

1.2.6. addStream

Description

This method is used to add the specified devId channel to the current play instance.

Example

  • livePlayer.addStream([{channel, devId, dom}])

Parameter

Property Value Type Description
object[] Parameter information
|-channel Number The device channel number
|-devId String Device ID
|-dom HTMLElement div DOM container

1.2.7. getRenderInfoList

Description

This method is used to obtain the rendering-related information through the instance.

Example

  • renderInfoList= livePlayer.getRenderInfoList()

Return value

renderInfoList:

[ { channel: 1, // The channel number. If it's a virtual playback, it is the virtualized channel number. realChannel: 2, // The channel number provided by the user. index: 1, // The order number of the instance rendering DOM. devId: "devId123", // devId string volume: 0.2, // Volume, number domContainer: HTMLDom, // The container div for the rendered DOM. } ]
Property Name Type Description
domObject Object[] The objects with DOM and the objects with channel data
├ index number The rendering order of the DOMs within the instance
├ devId String Device number
├ channel number The channel number. If it's a virtual playback, it is the virtualized channel number
├ realChannel number The channel number provided by the user
├ volume number The current volume level for the channel
├ domContainer HTML DOM The container div for rendering the DOM

1.2.8. getStartTime

Description

This method is used to obtain the start time of live-view play, returning the UTC timestamp to the client in milliseconds.

Example

  • livePlayer.getStartTime()

Note: To get the end time, please refer to the afterDestroy hook in HOOKS.

1.2.9. getDuration

Description

This method is used to obtain the duration of the live-view play (in milliseconds).

Example

  • livePlayer.getDuration()

1.3. Properties

1.3.1. streamType: object

Description

This property is used to obtain or set the stream type for the player.

Example

  • Obtain: livePlayer.streamType
  • Set: livePlayer.streamType = [{devId: 'devId', channel: 1, streamType : 'MAJOR' }]

Parameter

Property Value Type Description
streamType:Object devId String Device ID
channel Number The device channel number
streamType String Value range: MAJOR (main stream), MINOR (sub-stream)

1.3.2. volume: object

Description

This property is used to obtain or set the volume for each channel on the player.

Example

  • Obtain: livePlayer.volume
  • Set: livePlayer.volume = [{devId: 'devId', channel: 1, volume: 0.5 }]

Parameter

Property Value Type Description
volume:Object devId String Device ID
channel Number The device channel number
volume Number The expected channel volume level (ranging from 0 to 1).

1.3.3. (readonly) status: object

Description

This property is used to obtain the current play status of the player.

Example

  • Obtain: [{state: string, info: { channel: string ,devId: string}}] = livePlayer.status

Possible state values include:

{ newIns: "newIns", // After the player instance is initialized, the data stream is not loaded. initialized: "initialized", // The video stream link has been obtained. onLoading: "onLoading", // The user has initiated loading, and the data stream is being loaded. afterReady: "afterReady", // The data stream was loaded successfully, waiting for user commands. playing: "playing", // Playing. seeking: "seeking", // In the process of seeking. framePlaying: "framePlaying", // Frame-by-frame playback status. paused: "paused", // Paused status. stopped: "stopped", // Stopped status. destroyed: "destroyed", // Destroyed status. play: 'play', // Play status, used for the single renderer. free: 'free', // Black screen status, used for the single renderer. playEnded: "playEnded", // Play ended status. };

2. Extended Functions Access

Extended functions

3. Interface Examples

<script src="./h5-player.js"></script>
<script>
 const H5Player = playerjs;
 H5Player.config = {
     baseURL: 'http://192.168.132.72:21250'
 };
 H5Player.defaultHeaders = {
     _appId: '1',
     _tenantId: '2',
 }
 let livePlayer = null;
 // Open live view
 function play() {
     if (livePlayer) return;
     const doms = document.getElementsByClassName('div');
     const domList = Array.from(doms);
     // Initialize the live view player.
     livePlayer = H5Player.createLivePlayer(domList, {
         deviceInfos: [{
             devId:'03d430b6365943f1b02bdde73aceddf8',
             channel: '1,2'
         }],
         streamType: 'MAJOR',
     });
     livePlayer.load();
 }
 // Close live view
 function closeVideo() {
     if (livePlayer) {
         livePlayer.destroy();
         livePlayer = null;
     }
 }
</script>
ON THIS PAGE