SDK开发
主要使用流程
Xp2p历史录像

Xp2p历史录像

在进入Xp2p历史录像开发前：

  1. 需要先完成开发前工作的步骤一至三

1. 新建分包，并引入插件

步骤与Xp2p实时视频一样，请移步Xp2p实时视频的步骤1

  • 若您在实时视频步骤已配置，请跳过

2. 在分包根目录创建配置文件

步骤与Xp2p实时视频一样，请移步Xp2p实时视频的步骤2

  • 若您在实时视频步骤已配置，请跳过

3. 在wxml中引入组件

初步使用时，建议您配合使用我们提供的demo进行体验。 其他的高级设置，后续您可参考xp2p的插件文档以及xp2p的官方Github Demo来自行修改配置

先在record.json中声明组件，然后在record.wxml中进行应用

// record.json
{
  "usingComponents": {
    "iot-p2p-playback-player": "plugin://xp2p/iot-p2p-playback-player"
  }
}
<!-- record.wxml -->
<block wx:if="{{isShowPlayer}}">
  <iot-p2p-playback-player id="{{playerId}}" 
    class="player" 
    deviceInfo="{{XP2PDeviceInfo}}" 
    xp2pInfo="{{xp2pInfo}}" 
    streamChannel="{{1}}" 
    muted="{{muted}}" 
    videoInfo="{{videoInfo}}">
  </iot-p2p-playback-player>
</block>

4. 在js中写入初始化数据

// record.js
data: {
	isShowPlayer: false,
	playerId: 'record-player',
	muted: true,
	XP2PDeviceInfo: null,
	videoInfo: {
		startTime: '',
		endTime: ''
	}
}

5. 确认SD卡状态后，进行初始化p2p

  • 判断设备在线 -> 判断设备有SD卡 -> 初始化p2p连接
// record.js
const sn = 'xxx' // 此处填入实际SN
const modelId = app.imcamWx.modelId // 此处填SDK初始化时填入的modelId
const res = await app.imcamWx.getDeviceTencentCloudStatus(sn) // 获取设备的腾讯云xp2p状态
if (!res.isOnline) return console.log('设备离线') // 若离线就不进行初始化
 
const sdcardStatusRes = await app.imcamWx.getSdcardStatus(sn) // 获取设备的SD卡状态
if (sdcardStatusRes.errCode !== 0) return console.log('接口调用失败', sdcardStatusRes.errMsg)
const sdcardInfo = sdcardStatusRes.sdcardInfo
if (!sdcardInfo.isHaveSdcard) return console.log('设备未插入sd卡')
else if (sdcardInfo.sdcardNeedFormat) return console.log('SD卡状态异常，需要格式化')
else console.log('SD卡状态正常') // 判断SD卡状态正常后，才可去连接p2p
 
this.setData({	//	设置初始化必要的参数
    xp2pInfo: res.xp2pInfo,
    XP2PDeviceInfo: {
        deviceId: `${modelId}/${sn}`,  // deviceId请务必按照左边的形式来填入
        productId: modelId,
        deviceName: sn,
        isMjpgDevice: false,
    },
}, () => {
  app.xp2pManager	
  .startP2PService({	// 开始初始化
  	p2pMode: "ipc",
  	deviceInfo: this.data.XP2PDeviceInfo,
  	caller: "record-0", // 该次呼叫名
  	xp2pInfo: this.data.xp2pInfo, 
  }).then(() => {	// promise只要返回了即代表p2p连接成功
  	this.setData({
  		isShowPlayer: true	// p2p通了之后开始渲染xp2p组件进行加载视频
  	})
  })
})

6. 获取历史录像日期列表

  • 返回的列表为时间戳的列表，每个时间戳代表一个日期
  • 请在p2p连接成功后进行获取
  • 此处用到的 xp2pManager.sendUserCommand方法，是我们根据xp2p文档去发送自定义数据来请求日期列表。格式请严格按照示例或参考Xp2p功能列表
app.xp2pManager.sendUserCommand(this.data.XP2PDeviceInfo.deviceId, {
	cmd: {
		topic: `history`, // topic固定传history
		data: {
			mode: 0,  // mode固定传0
			begin_time: 0,  // begin_time固定传0
			end_time: Math.round(new Date().valueOf() / 1000) // end_time传当前时间戳
		}
	}
}).then(res => {
	if (res?.code === 3) return console.log('观看人数已到达上限') // 若返回code3代表历史视频通道满了
	const dateList = res.data.value.data
	console.log(dateList) // [1705680000, 1705766400, 1705852800]
})

7. 获取指定日期的视频列表

  • 获取的列表为内部约定的二进制数组，使用SDK提供的api进行解析即可返回普通的数组
// record.js
const today = new Date('2024-01-01')
today.setUTCHours(0)
today.setUTCMinutes(0)
today.setUTCSeconds(0)
today.setUTCMilliseconds(0)
const todayValue = Math.round(today.valueOf() / 1000)
const tomorrow = new Date(today.valueOf() + 24 * 60 * 60 * 1000)
const tomorrowValue = Math.round(tomorrow.valueOf() / 1000)
app.xp2pManager.sendUserCommand(this.data.XP2PDeviceInfo.deviceId, {
  cmd: {
    topic: `history`, // topic固定传history
    data: {
        mode: 1,  // mode固定传1
        begin_time: todayValue, // 当天的00:00
        end_time: tomorrowValue // 第二天的00:00
    }
  }).then(async res => {
	  if (res.data) {
		  const parseRes = await app.imcamWx.parseRecordVideoListData({
        data: res.data, // 传入sendUserCommand返回的res.data
        todayValue  // 传入当天的时间戳
      }) // 调用parseRes
		  if (parseRes.errCode === 0) {
		  	const recordVideos = parseRes.recordVideos
		  	console.log(recordVideos)
		   }
	  }
  })

8. 播放指定视频

  1. 如果是进入页面的初次播放，请使用setData来设置videoInfo的值。播放器会自动检测videoInfo的更新并开始播放
this.setData({
  videoInfo: recordVideos[0] // 这里的recordVideos是从上一步中获取的
})
  1. 如果是后续的切换视频，仍然可以通过更换videoInfo来切换。但不建议这样做，因为这样会导致xp2p停止再续播，所以建议使用发送xp2p自定义消息来通知设备切换
const video = recordVideos[1] // 这里的recordVideos是从上一步中获取的
app.xp2pManager.sendUserCommand(this.data.XP2PDeviceInfo.deviceId, {
	cmd: {
		topic: `history`, // topic固定传history
		data: {
			mode: 2, // mode固定传2
			begin_time: video.startTime, // begin_time传想要切换播放的时间戳
		}
	}
})

到此，SD卡录像页面的主要流程已经结束。

  • 除主流程外，录像页面仍有其他重要功能，比如 获取当前播放的进度、暂停/续播、等等
  • 请参考我们提供的Demo，并结合SDK文档的Xp2p功能列表来逐一了解其余功能
Xp2p实时视频Xp2p实时视频功能列表
© 2024 Cylan