1 創(chuàng)建項(xiàng)目
登錄zego控制臺(tái)媒楼，創(chuàng)建一個(gè)項(xiàng)目趴俘，該項(xiàng)目的【AppId】和【Server】昙读，在后續(xù)的推拉流過程中會(huì)用到
image.png
2 創(chuàng)建對(duì)象
// 創(chuàng)建demo節(jié)點(diǎn)（拉流remote-preview瑞妇，推流local-preview）
<div>
<video id='remote-preview' className={cn.remotePreview} autoPlay='autoplay' muted playsInline></video>
<video id='local-preview' className={cn.localPreview} autoPlay='autoplay' muted playsInline></video>
</div>
// 創(chuàng)建zego對(duì)象
const appID = xxxxxx // 過程1中的AppId
const server = xxxxxx // 過程1中的Server
const zg = new ZegoExpressEngine(appID, server)
3 定義過程方法
let localStream
// 詢問獲取設(shè)備權(quán)限
export const enumDevices = async () => {
try {
const systemInfo = await zg.checkSystemRequirements()
console.log('系統(tǒng)支持信息：', systemInfo)
const deviceInfo = await zg.enumDevices()
console.log('硬件信息：', deviceInfo)
return true
} catch (err) {
console.log('獲取設(shè)備權(quán)限失斒继凇：', err)
}
}
// 進(jìn)房（需要唯一房間id，登錄用戶id和token）
export const loginRoom = async ({ roomID, userID, token }) => {
try {
const loginStatus = await zg.loginRoom(
roomID,
token,
{
userID: userID,
userName: userID
},
{
userUpdate: true, // 開啟監(jiān)聽 roomUserUpdate 回調(diào)呕寝，默認(rèn)不開啟
}
)
return loginStatus
} catch (err) {
console.log('進(jìn)房失敗:', err)
return false
}
}
// 呼叫推流（需要流id）
export const pushStream = async (streamID) => {
// 調(diào)用 createStream 接口后勋眯，需要等待 ZEGO 服務(wù)器返回流媒體對(duì)象才能執(zhí)行后續(xù)操作
localStream = await zg.createStream({
camera: {
audio: true,
video: true,
}
})
// 獲取頁面的 video 標(biāo)簽
const localVideo = document.getElementById('local-preview')
// stream 為MediaStream對(duì)象，開發(fā)者可通過賦值給video或audio的srcObject屬性進(jìn)行渲染
localVideo.srcObject = localStream
zg.startPublishingStream(streamID, localStream)
}
// 呼叫拉流（需要流id）
export const pullStream = async (stremID) => {
const remoteStream = await zg.startPlayingStream(stremID)
// 獲取頁面的 video 標(biāo)簽
const remoteVideo = document.getElementById('remote-preview')
// remoteAudio為本地<video>或<audio>對(duì)象
if (remoteVideo) {
remoteVideo.srcObject = remoteStream
}
}
// 停止推流
export const stopPushStream = async (streamID) => {
if (!streamID) return
zg.stopPublishingStream(streamID) // 停止推流
zg.destroyStream(localStream) // 銷毀流
localStream = null
}
// 停止拉流
export const stopPullStream = async (streamID) => {
if (!streamID) return
zg.stopPlayingStream(streamID) // 停止拉流
}
// 退出房間
export const logoutRoom = async ({ roomID, psStreamId, plStreamId }) => {
stopPushStream(psStreamId)
stopPullStream(plStreamId)
await zg.logoutRoom(roomID)
}
// 注銷監(jiān)聽
export const closeListen = () => {
zg.off('roomUserUpdate')
zg.off('roomOnlineUserCountUpdate')
zg.off('roomStateUpdate')
zg.off('roomStreamUpdate')
zg.off('publisherStateUpdate')
zg.off('publishQualityUpdate')
zg.off('playerStateUpdate')
zg.off('playQualityUpdate')
}
4 實(shí)現(xiàn)
登錄zego控制臺(tái)，臨時(shí)Token 項(xiàng)客蹋，點(diǎn)擊【臨時(shí)生成】塞蹭，彈窗中輸入【userID】，點(diǎn)擊生成讶坯，得到臨時(shí)【token】番电。
因?yàn)槭钦{(diào)試demo，所以這里的【roomID】辆琅、【psStreamId】漱办、【plStreeamId】可自定義，例如：0001涎跨。
image.png
.js
import React, { memo, useEffect } from 'react'
import zg, { loginRoom, enumDevices, pushStream, pullStream, logoutRoom, closeListen } from '過程3文件'
import cn from 'xxx.scss'
const userID = ''
const token = ''
const roomID = '' // 房間id
const psStreamId = '' // 推流id
const plStreamId = '' // 拉流id
function ZegoDemo() {
useEffect(async () => {
initEventRoom()
await loginRoom({ roomID, userID, token }))
return () => {
logoutRoom({ roomID })
closeListen()
}
}, [])
const initEventRoom = () => {
zg.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
if (state === 'DISCONNECTED') {
// 與房間斷開了連接
console.log(`房間斷開連接${roomID}`)
}
if (state === 'CONNECTING') {
// 與房間嘗試連接中
console.log(`${roomID}房間連接中洼冻。。隅很。撞牢。。叔营。屋彪。。`)
}
if (state === 'CONNECTED') {
// 與房間連接成功
console.log(`${roomID}房間連接成功`)
// startPush()
// startPull()
}
})
// 用戶狀態(tài)更新回調(diào)
zg.on('roomUserUpdate', (roomID, updateType, userList) => {
console.log('用戶狀態(tài)更新回調(diào)', roomID, updateType, userList)
})
zg.on('roomOnlineUserCountUpdate', (roomID, count) => {
// 房間人數(shù)監(jiān)聽
console.log(`${roomID}房間人數(shù)監(jiān)聽：`, count)
})
zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
console.log('roomStreamUpdate roomID ', roomID, streamList)
})
}
// zego本地推流并進(jìn)行相關(guān)操作
const startPush = async () => {
zg.on('publisherStateUpdate', result => {
// 推流狀態(tài)更新回調(diào)
console.log(`推流結(jié)果${result}`)
})
zg.on('publishQualityUpdate', (streamID, stats) => {
// 推流質(zhì)量回調(diào)
console.log(`推流質(zhì)量：`, stats)
})
// 調(diào)用麥克風(fēng)等權(quán)限接口
await enumDevices()
pushStream(psStreamId)
}
const startPull = async () => { // 開始拉流
zg.on('playerStateUpdate', async result => {
// 拉流狀態(tài)更新回調(diào)
console.log(`拉流結(jié)果${result}`)
})
zg.on('playQualityUpdate', (streamID, stats) => {
// 拉流質(zhì)量回調(diào)
console.log(`拉流質(zhì)量：${stats}`)
})
pullStream(plStreamId)
}
const pullStart = async () => { // 開始拉流
startPull()
}
const pullDestory = () => { // 銷毀拉流
logoutRoom({ plStreamId })
}
const pushStart = async () => { // 開始推流
startPush()
}
const pushDestory = () => { // 結(jié)束推流
logoutRoom({ psStreamId })
}
return <div className={cn.main}>
<div className={cn.line}>
拉流
<div onClick={pullStart}>開始</div>
<div onClick={pullDestory}>銷毀</div>
</div>
<video id='remote-preview' className={cn.remotePreview} autoPlay='autoplay' muted playsInline></video>
<div className={cn.line}>
推流
<div onClick={pushStart}>開始</div>
<div onClick={pushDestory}>銷毀</div>
</div>
<video id='local-preview' className={cn.localPreview} autoPlay='autoplay' muted playsInline></video>
</div>
}
export default memo(ZegoDemo)
