SDK Guide for Web

import * as BeliveSdk from "@belive-tech/sdk"
import "@belive-tech/sdk/dist/belive.min.css"

let sdkViewerInstance = new BeliveSdk.Viewer(
   { 
  // Create View instance with your config
	key: "key_place_holder",
	endpoint: "API_END_POINT",
	rtmService: "agora", // rtm service agora or belive
   }, 
   "playerViewWrapper"
);

sdkViewerInstance.on("LOST_NETWORK", () => {
	//Callback whenever network lost
})

sdkViewerInstance.on("RECONNECT_NETWORK", () => {
	//Callback whenever network reconnected
})

sdkViewerInstance.guestLogin(null, function () {
	let currentUser =  Object.assign({}, sdkViewerInstance.getCurrentUser())
})

let userInfo = {
	beliveId: "user123",
	displayName: "Test User"
}
sdkViewerInstance.ssoLogin(
	userInfo,
	(data) => {
		// Success callback
		currentUser = sdkViewerInstance.getCurrentUser()
	},
	(error) => {
		// Error callback
		console.error(err)
	}
)

let streamData = null

let streamInfo = {
	streamName: '[STREAM_TITLE]',
	passwordStream: "[STREAM_PASSWORD]" // optional
}

let isPrivate = streamInfo.passwordStream ? true : false

sdkViewerInstance.getDetailStream(
	streamInfo,
	isPrivate,
	(response) => {
		// Success callback
		// Save this stream data to a 
		// global variable for further customizations
		streamData = response.data

		//Listen to video events
		const videoInstance = sdkViewerInstance.getVideoPlayer();
		if (streamData.status === 
				BeliveSdk.STATUS_VIDEO.RECORDED) {
			 //TIME_UPDATE will be useful 
			// for reading history chat in Advanced guide
		     videoInstance.on("TIME_UPDATE", (currentTime) => {
		         console.log(currentTime)
		     })
		     videoInstance.on("DURATION_CHANGED", (duration) => {
		         console.log(duration)
		     })
	    }
		videoInstance.on("PLAYING", () => {
		      console.log(`Video is playing.`)
		})
		videoInstance.on("PAUSED", () => {
		      console.log(`Video paused.`)
		})
	},
	(error) => {
		// Error callback
	}
)

// Initialize RTM server
sdkViewerInstance.createRtmServer(
	() => {
		// create RTM success callback
	},
	() => {
		// error callback
	}
)

// Connect to chat room
sdkViewerInstance.getRtmServer().createChatRoom(
	//streamData is saved from previous step
	streamData.slug,
	(msgJson) => {
		// Receive a message whenever a user 
		// in this chat room send a message
		console.log(msgJson)
	},
	(data) => {
		// Success callback
	},
	(data) => {
		// Close callback
	},
	(data) => {
		// Error callback
	}
)

const messageJson = {
	message: "Test Message",
	messageType: BeliveSdk.MESSAGE_TYPE.MESSAGE
}
sdkViewerInstance.sendMessageRTM(
	streamData.slug,
	messageJson,
	(res) => {
		if (res.status  ===  "Success") {
			// success callback
		}
	},
	(err) => {
		console.log(err)
	}
)

sdkViewerInstance.leaveStream();
sdkViewerInstance.disconnectRtmChannel(streamData.slug, false, (res) => {
	console.log(`Disconnect RTM successfully!`)
})

const rtmThreshold = new BeliveSdk.RTMThreshold({
	//total messages that should be hold
	threshold: 100,
})

rtmThreshold.onReceiveMessages((listMessages) => {
	//Receive a list of messages
})

sdkViewerInstance.getRtmServer().createChatRoom(
	streamData.slug,
	(msgJson) => {
		// If the message is coming from 
		// current user, we should show it instantly
		if (msgJson.senderUserId === 
			sdkViewerInstance.getCurrentUser().userId)
			rtmThreshold.pushInstant(msgJson)
		else rtmThreshold.push(msgJson)
	},
	(data) => {
		// Success callback
	},
	(data) => {
		// Close callback
	},
	(data) => {
		// Error callback
	}
)

let historyMessages = [];
const isRecordedStream = streamData.status === BeliveSdk.STATUS_VIDEO.RECORDED
if(isRecordedStream){
	sdkViewerInstance.getHistoryChat((res) => {
		if (res.data) historyMessages = res.data
	})
}

videoInstance.on("TIME_UPDATE", (currentTime) => {
	const messagesToCurrentTime = 
	historyMessages.filter((message) => 
			message.recordedTime / 1000  <= Math.ceil(currentTime))	
})

getMobileOperatingSystem(): String

guestLogin(deviceUdid = null, successCallback, errorCallback): void

ssoLogin(user, successCallback, errorCallback): void

{
	// Required fields:
	beliveId: "{beliveId}",,
	displayName: "{displayName}"
}

getNewAccessToken(user = null, 
                autoLogin = true, 
                successCallback, errorCallback): void

{
	// Required fields:
	beliveId: `web-client-${indexUser}`,
	deviceType: "2", // 2 -> web
	deviceUdid: "web", // only accept one value: "web"
	userName: `sdk_user_${indexUser}`,
	displayName: `Sdk User ${indexUser}`
}

registerUser(user, autoLogin = true, successCallback, errorCallback): void

{
	// Required fields:
	beliveId: "{beliveId}",
	deviceType: "2", // 2 -> web
	deviceUdid: "web", // only accept one value: "web"
	userName: "{userName}",
	displayName: "{displayName}"
}

loginUser(user, successCallback, errorCallback): void

{
	// Required fields:
     beliveId: "{beliveId}",
     displayName: "{displayName}"
     userName: "{userName}", // Optional
}

logoutUser(successCallback, errorCallback): void

on(event, callback): void

getCurrentUser(): User

getShareUrl(): string

getVideoWrapper(): void

getRtmServer(): void

getHttpInstance(): void

createRtmServer(successCallback, errorCallback): void

// Create RTM server
sdkViewerInstance.createRtmServer(() => { // create RTM success callback
	console.log(`Create RTM Success!`);
}), () => { // error callback
	console.log(`Create RTM Error!`);
};

disconnectRtmChannel(channel = null, 
                isDestroyInstance = false, 
                successCallback, errorCallback): void

 // Disconnect RTM server:
sdkViewerInstance.disconnectRtmChannel(channel,false,() => { 
// destroy RTM channel success callback
	console.log(`Create RTM Success!`);
}), () => { // error callback
	console.log(`Create RTM Error!`);
};

reconnectChatRtm(channel = null, successCallback, errorCallback): void

sdkViewerInstance.reconnectChatRtm(channelChat, (res) => {
		console.log(`Reconnect RTM successfully!`);
});

sendMessageRTM(channel, message, successCallback, errorCallback): void

 // Send RTM message:
let message = {
	message: "This is text message",
	messageType: 1, // 1 for send text message
};
sdkViewerInstance.sendMessageRTM("channel_test", 
			message, (res) => { // success callback
	if (res.status === "Success") {
			console.log("Send message successfully!")
	}
});

new BeliveSdk.Viewer(sdkConfig, 
                videoWrapper, 
                streamName = "", 
                passwordStream = "", 
                webRtcConfig = null)

 {
	key: "license_key_place_holder", // SDK key
	endpoint: "API_ENDPOINT", // API Server Endpoint
	rtmService: "agora", // rtm service agora or belive
}

{
	onVideoReady: function,
	onVideoDestroyed: function,
	onVideoErrors: function(error)
}

 let sdkViewerInstance = new BeliveSdk.Viewer(
   { // create viewer instance with config
	key: "license_key_place_holder", // SDK key
	endpoint: "API_ENDPOINT", // API Server Endpoint
	rtmService: "agora", // rtm service agora or belive
},
   "playerViewWrapper"
);

getDetailStream(streamInfo = null, 
                isPrivateStream = false, 
                successCallback, 
                errorCallback)

 {
 // streamName is slug_stream when isPriaveteStream = FALSE, and 
 // streamName is title_stream when isPriaveteStream = TRUE
	streamName: "{title_stream|slug}", 
// required if isPrivateStream=TRUE (not in use)
	passwordStream: "{password_stream}" 

leaveStream(successCallback, errorCallback)

getHistoryChat(successCallback, errorCallback)

sdkViewerInstance.getHistoryChat(
    (response)=>{
       // success callback
       console.log(response.data)
    },
    (error) => {
      // error callback
      console.log(error)
    }
)

likeStream(successCallback, errorCallback)

shareStream(successCallback, errorCallback)

getPinnedMessage(successCallback, errorCallback)

getProducts(params: { nextId: number, limit: number }, 
                successCallback, errorCallback)

setStreamName(streamName): void

getVideoPlayer()

sdkViewerInstance.enableProfanityFilter().then(()=>{
	let wordsAfterCleaned = 
	sdkViewerInstance.cleanWords('words',{ placeholder: "*" })
})

cleanWords(words: string, options: {placeholder: string}): string

createChatRoom(channel, 
                onReceiveMessage, 
                onOpen, 
                onClose, 
                onError, 
                additionalInfo = {})

sdkViewerInstance.getRtmServer().createChatRoom(
	channelChat, 
	(msgJson) => {
		console.log("Received RTM message", JSON.stringify(msgJson));
	},
	(data) => { // On Open callback
		writeLog(`RTM logs: ${data}`);
	},
	(data) => { // On Close callback
		writeLog(`RTM logs: ${data}`);
	},
	(data) => { // On Error callback
		writeLog(`RTM Error: ${JSON.stringify(data)}`, "error");
	}
);

const rtmThreshold = new BeliveSdk.RTMThreshold()
rtmThreshold.onReceiveMessages((messages)=>{
   console.log(messages)
})
sdkViewerInstance.getRtmServer().createChatRoom(
	channelChat, 
	(msgJson) => {
	   rtmThreshold.push(msgJson)
	}
);

push(message): void

pushInstant(message): void

reset(): void

destroy(): void

pause()

sdkViewerInstance.getVideoPlayer().pause();

play()

sdkViewerInstance.getVideoPlayer().play();

setMuted(mute: boolean)

//Mute video 
sdkViewerInstance.getVideoPlayer().setMuted(true);
//Unmute video
sdkViewerInstance.getVideoPlayer().setMuted(false);

setVolume(volume: number)

//set player volume to 50 percent
sdkViewerInstance.getVideoPlayer().setVolume(0.5);

seekTo(time: number)

//set player volume to 50 percent
sdkViewerInstance.getVideoPlayer().setVolume(0.5);

isMuted

isPaused

//set player volume to 50 percent
 sdkViewerInstance.getVideoPlayer().isPaused;

{ 
	AdminDisplayName: "", 
	Combo: 0, 
	DurationTime: 0, 
	GiftColor:0, 
	GiftId: "", 
	GiftImageLink: "", 
	GiftName: "", 
	IsComboGift: false, 
	IsExpensive: false, 
	IsLiked: false, 
	Message: "",  
	ProfilePic: "", 
	RankingList: [], 
	TotalReceivedStars: 0, 
	VotingScores: 0, 
	isGroup: false, 
	luckyResult: -1, 
	mGiftCombo: 0, 
	streamTitleColor: "", 
	x: 0, 
	y: 0, 
	TotalLikes: 0, 
	TotalViewers: 0, 
	Slug: "" 
}

{ 
	message: "Message SDK Viewer" 
	messageType: 1 
	senderDisplayName: "display_name" 
	senderUserId: 357502 
	senderUserName: "+guest_id" 
	channel: "channel_slug" 
	licenseKey: "license_key" 
}