SDK开发
主要使用流程
Xp2p实时视频

Xp2p实时视频

在进入Xp2p实时视频开发前：

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

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

  • 请务必新建分包后再引入插件，因为插件打包后的大小有1000+KB，放主包的话可能导致空间不够
// app.json
{
	"subPackages": [{
		"root": "packageVideos",
		"pages": ["pages/p2p/p2p", "pages/record/record"],
		"plugins": {
			"wechat-p2p-player": {
				"version": "latest",
				"provider": "wx9e8fbc98ceac2628",
				"export": "exportForPlayerPlugin.js"
			},
			"xp2p": {
				"version": "latest",
				"provider": "wx1319af22356934bf",
				"export": "exportForXp2pPlugin.js"
			}
		}
	}],
}

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

  • 在分包根目录创建两个文件 exportForPlayerPlugin.js 和 exportForXp2pPlugin.js 配置文件路径示例
  • 创建后，将下面的示例代码复制到文件中

exportForPlayerPlugin

// exportForPlayerPlugin.js
module.exports = {
  wx,
};

exportForXp2pPlugin

// exportForXp2pPlugin.js
const appParams = {
	appid: 1253131157,
	appOauthId: "600a4206062556e21befdc98",
	appKey: "pMqRNpU3M4wOA2BY",
	appSecretKey: "b62XcOoDcvJOgnibM8iKFVgVsXcdxNda",
	appPackage: "ios.test.com",
};
module.exports = {
	wx,
	getXp2pAppParams() {
		return appParams;
	},
	getXp2pConfig() {
		return {
			enableCrypto: true, // p2p传输是否加密，不传默认开启
		};
	},
	getPlayerPlugin() {
		return requirePlugin("wechat-p2p-player");
	},
};

3. 在wxml中引入组件

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

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

// p2p.json
{
  "usingComponents": {
    "iot-p2p-player-with-mjpg": "plugin://xp2p/iot-p2p-player-with-mjpg",
    "iot-p2p-intercom": "plugin://xp2p/iot-p2p-intercom"
  }
}
<!-- p2p.wxml -->
<block wx:if="{{isShowPlayer}}">
  <iot-p2p-player-with-mjpg id="{{playerId}}" 
    class="player" 
    deviceInfo="{{XP2PDeviceInfo}}" 
    xp2pInfo="{{xp2pInfo}}" 
    streamQuality="{{streamQuality}}" 
    muted="{{muted}}" 
    sceneType="{{'live'}}" 
    mode="{{'RTC'}}">
  </iot-p2p-player-with-mjpg>
</block>
<block wx:if="{{isShowPlayer}}">
	<view>
    <iot-p2p-intercom id="{{intercomPlayerId}}" 
      deviceInfo="{{XP2PDeviceInfo}}" 
      pusherProps="{{pusherProps}}">
    </iot-p2p-intercom>
	</view>
</block>

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

// p2p.js
data: {
	isShowPlayer: false,
	xp2pInfo: '',
	playerId: 'p2p-player',
	intercomPlayerId: 'intercom-player',
	XP2PDeviceInfo: null,
	streamQuality: 'high',
	muted: true,
	pusherProps: {
		enableCamera: true,
		enableMic: true,
		aspect: "3:4",
		devicePosition: 'front',
		fps: 10,
		maxBitrate: 512,
		minBitrate: 200
	},
	intercomState: ''
}

5. 初始化p2p连接

// p2p.js
const app = getApp()
if (!app.xp2pManager) { // 如果没有xp2pManager实例就初始化xp2pManager实例
	const xp2pPlugin = requirePlugin("xp2p");
	app.xp2pManager = xp2pPlugin.iot.getXp2pManager()
}
app.xp2pManager.checkReset() // 重置下xp2pManager
 
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('设备离线') // 若离线就不进行初始化
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: "p2p-0", // 该次呼叫名
  	xp2pInfo: this.data.xp2pInfo, 
  }).then(() => {	// promise只要返回了即代表p2p连接成功
  	this.setData({
  		isShowPlayer: true	// p2p通了之后开始渲染xp2p组件进行加载视频
  	})
  })
})

6. 进行视频通话

  • 调用intercomCall()方法来请求视频通话
  • 请在播放器播放成功后再进行调用。至于如何判断播放器已播放成功，请参考demo中的组件所挂载的onPlayStateEvent方法
// p2p.js
const intercomPlayer = this.selectComponent(`#${this.data.intercomPlayerId}`)
if (intercomPlayer) intercomPlayer.intercomCall()

到此，实时视频页面的主要流程已经结束。

  • 除主流程外，直播页面仍有其他重要功能，比如云台旋转，设置设备音量，开关本地摄像头等等
  • 请参考我们提供的Demo，并结合SDK文档的Xp2p功能列表来逐一了解其余功能
VOIP呼叫Xp2p历史录像
© 2024 Cylan