小程序实现音视频直播

方案1：微信原生live-player、live-pusher组件

微信官方文档

1. 在小程序后台在【接口设置】申请开启直播组件的使用权限
2. 通信流程
   3、代码

let client = new AgoraMiniappSDK.Client()
await client.init(APPID)
await client.join(yourToken, channel, uid)

client.on("stream-added", async (e) => {
	const {url, rotation} = await client.subscribe(uid)
})

<live-player
	id="player"
	src="{{rtmp播放地址}}"
	mode="RTC"
	bindstatechange="playerStateChange"
	object-fit="fillCrop"
/>

方案2：WebRTC实时音视频

使Web 应用程序和站点能够捕获和选择性地流式传输音视频或其他媒体，以及在浏览器之间无需中间件交换任意数据的技术
在小程序中使用：

• WebView 会自动铺满整个小程序页面
• 需要配置小程序后台域名白名单、设置校验文件
• 可以通过微信提供的JSSDK获得有限的小程序能力
• 个人小程序不支持使用 WebView

1. 通信流程
   
2. 代码

client = AgoraRTC.createClient({
	mode: 'live',
	role: 'host',
	codec: 'h264',
	audioCodec: 'pcma'
})
await client.join(appID, channel, rtcToken, uidNum)
client.on('user-published', handleUserPublished)
client.on('user-unpublished', handleUserUnPublished)

async function handleUserPublished(user, mediaType) {
	const pusherUid = user.uid
	if (pusherUid === deviceAgoraUidNum) {
		await client.subscribe(user, mediaType)
		if (mediaType === 'video') {
			deviceVideoTrack.value = user.videoTrack
		}
		if (mediaType === 'audio') {
			deviceVideoTrack.value = user.audioTrack
		}
	}
}

live-player 🆚 webRTC

• 如果设备摄像头方位较多，并且需要在前端做转换，WebRTC 更合适。
• 对视频延迟要求较高的场景，WebRTC 更合适。
• 需要覆盖更广的机型、系统版本，小程序原生更合适。
• 有美颜、变声需求，小程序原生更适合。
• 对应特定的音频、视频编码格式要求需要看具体支持情况。