微信小程序暗夜长梦兑换码

技术分享｜anyRTC音视频与微信小程序互通实践

随着网络架构的变迁、媒体技术发展、音视频场景迭代，基于流媒体的技术也是推陈出新。WebRTC渐渐的成为了音视频互动场景的主流，而微信在6.5.21版本通过小程序开放了实时音视频能力，开发者们可以使用组件 < live-pusher > 实现基于 RTMP 的直播推流（录制），用于实时音视频通话上行，使用组件 < live-player > 实现基于 RTMP 的直播拉流（播放）。可以看出，微信小程序的音视频是基于 RTMP 协议的，但是微信小程序的音视频只是提供了终端上的能力，并没有实现媒体服务器，腾讯给出了2个方案，1是使用腾讯云的快直播服务，2是开发者自己实现一套媒体网关服务。方案1，需要完全使用腾讯云的服务，很显然不太适合我们这样的开发者；于是留给我们的之后方案2了。

一．什么是RTMP，什么是RTC

1.RTMP

RTMP是Real Time Messaging Protocol实时消息传输协议，是Adobe公司为Flash播放器和服务器之间开发的音视频数据传输的开放协议，一般传输flv或f4v格式的媒体流。RTMP是工作在TCP之上的协议，默认使用端口1935，能够保持长连接，并为用户提供低延时通信。RTMP是目前低延时直播应用最普遍的协议，几乎是全部编码器标准输出协议，是PC机打开浏览器就能播放（通常浏览器默认有Flash），也是全部CDN支持的最好的直播分发协议。

RTMP是基于TCP协议的，且通常只占用TCP一个通道来传输数据和指令，能保证了视频的传输质量。RTMP包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMPT封装在HTTP请求之上，可穿透防火墙；RTMPS类似RTMPT，增加了TLS/SSL的安全功能；RTMPE在RTMP的基础上增加了加密功能。

因为RTMP是基于TCP之上的，所以也存在三次握手的要求，另外RTMP还增加了C0/S0到C2/S2的三次握手。所以播放一个RTMP协议的流媒体需要经过：握手，建立连接，建立流，播放。

RTMP也有不可忽视的缺点，首先，RTMP协议太老，HEVC/H.265/AV1等视频格式都没有官方定义，另外就如刚刚所说，RTMP连接过程较长，存在TCP三次握手和本身的C0/S0到C2/S2的三次握手，再加上connection，createstream，play/publish，总地来说RTMP完成一次建连需要进行9次会话。而且RTMP的拥塞控制完全依赖传输层TCP的拥塞控制算法来进行拥塞管理，无法提供带宽自适应的算法。

2.WebRTC

WebRTC是Web Real-Time Communication网页实时通信，是一个支持网页浏览器进行实时语音对话或视频对话的技术而无需任何插件。由谷歌2010年以6820万美元收购Global IP Solutions公司而获得，如今WebRTC已经不仅仅局限于PC的网页浏览器，Android，iOS平台上很多应用都已经采用了这样技术。

WebRTC使用是RTP分装码流，跟视频监控，IPTV，会议电视一样都是RTP承载媒体流，只不过WebRTC信令遵守ICE框架，走自定义信令，IPTV领域走RTSP信令，视频监控走GB28181或者onvif信令，会议电视走h323或SIP协议。另外，WebRTC的码流采用SRTP进行加密，且WebRTC优先使用VP9、VP8、H.264、AV1，暂不支持H.265。

二．WebRTC如何跟小程序互通

1.如何互通大概分三步走：

A.微信小程序端使用 RTMP 协议，接入边缘媒体网关，即 Xcx网关；

B.Xcx网关支持 RTMP 协议接入和输出，完成微信小程序间的媒体转发；

C.同时Xcx网关将 RTMP 协议转换成 RTP 协议，转发给anyRTC的WebRTC服务器，完成与Native、标准 WebRTC 终端的互联互通。

anyRTC的Xcx网关的主要工作就是对RTMP和WebRTC的音视频格式进行转换。一般RTMP的视频是H264编码，音频是AAC编码；WebRTC的视频是H264编码，音频是Opus编码。所以我们可以看出，视频只需要转换封装格式，而音频则需要进行转码工作。

2.视频格式转换

anyRTC的Xcx网关收到视频帧之后，将帧进行RTP 封装 H.264。

WebRTC 选择了使用 RFC3984 的 Non-Interleaved 封装方案对H.264 进行封装。

Single NAL Unit Packet

Single NAL Unit Packet 是 RTP 最基本的打包方式，其中，
forbidden_bit：禁止位，初始为0，当网络发现 NAL 单元有比特错误时可设置该比特为 1，以便接收方纠错或丢掉该单元。

nal_reference_bit：nal 重要性指示，标志该 NAL 单元的重要性，值越大，越重要，解码器在解码处理不过来的时候，可以丢掉重要性为 0 的 NALU。Type：NAL 单元中的 RBSP 数据结构的类型，其中 0 未指，1-19 在 H.264 协议中有定义，20-23 为 264 协议指定的保留位，24-29 在 RFC3984 中进行了指定。Type 后面的数据为 RBSP 的数据，需要注意的是：编码器的每个 slice 或者每帧头一般会有由0x000001 或者 0x00000001 作为起始头，在 RTP 封装中需要去掉。此外在 H.264 裸码流数据后面可能还会带有 padding 的数据由 RTP 头的 padding 位决定。

STAP-A

STAP-A 的作用是可以把多个 nal 单元封装在一个 RTP 包里面进行传输，需要注意：-A 的格式都是不允许跨帧的，也就是 nal 单元的时间戳必须是相同的。常见的场景是 sps 和 pps 两个小包被合并封装。

RTP 头后面仅跟着 STAP-A 的头，由 F、NRI 和 Type 组合而成，占一个字节，这里的 Type 为 24。后面两个字节为第一个 nalu 单元的长度，后面跟第一个 nalu 数据同 Single NAL Unit 的封装一致，第一个数据结束后，跟着第二个 nalu 的长度，占 2 个字节，依次类推。

FU-A

FU-A 的作用是把一个原始大的 nalu 切成多个数据包进行传输，主要使用场景在 slice 比较大的情况下。FU-A 比较特殊，有 FU-A 起始包、FU-A 包（如果只切两个包可能没有）和 FU-A 结束包组成。

FU indicator 占一个字节，由 F、NRI 和 Type 组合而成，这里的 Type 为28。FU header 占一个字节：

S： 占1位如果是1表示当前这个包是 FU-A 的起始包E： 占1位如果是1表示当前这个包是 FU-A 的结束包R： 占1位，保留位，为0Type： 实际包含 nalu 的类型。

音频转码

在Xcx网关中，我们采用了独立的音频转码线程组，减轻逻辑处理线程的压力的目的。每个转码任务将被分配到固定的音频转码线程，线程根据任务数量进行负载均衡。

三．总结

与小程序的互通相对来说还是比较容易实现，开发者可以选择anyRTC的小程序服务，避免过多的踩坑；也可以尝试自己实现一套服务来满足自身的业务诉求。

微信外H5跳转小程序——组件（vue项目）

场景

有个H5（vue项目），需要实现点击商品item跳转到小程序，微信内和微信外都要支持，这里我们只介绍一下H5在微信外的跳转。

如图所示，红框内是一个商品，就是点击这里，要跳转小程序：

配置微信小程序云开发（云函数）1、开通云开发

然后选择免费额度

2、云开发权限设置

找到权限设置，把这里的「未登录用户访问权限」点开

3、新建云函数openMiniapp

这里我们先只需要建个名为openMiniapp的云函数放在这里就行，它的代码后面再写。

4、修改云函数权限

添加一下这部分配置，注意这里的名称要和云函数的名称一致：

云函数代码1、编写云函数代码

如果是原生小程序，当配置完云开发+云函数之后，小程序项目目录应该就多出一个云函数的目录（可能叫cloudbase，但是因为我这里是用的uniapp，这个目录是自定义的，我设置为wxcloudfunctions）：

附：
uniapp配置云函数教程1
uniapp配置云函数教程2

云函数的代码：

package.json：

{ "name": "GENERAL", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "wx-server-sdk": "~2.3.2" }}复制代码

index.js：

const cloud = require('wx-server-sdk')cloud.init()exports.main = async (event, context) => { const { path = '', queryData = {}, } = event // 我从H5那边传进来的参数，可以从event里获取到 // 获取queryStr let queryStrArr = [] for (let key in queryData) { const str = `${key}=${queryData[key]}` // name=tom queryStrArr.push(str) } const queryStr = queryStrArr.join('&') console.log('path', path) console.log('queryStr', queryStr) return cloud.openapi.urlscheme.generate({ jumpWxa: { path: path ? ('/' + path) : '', // 打开小程序时访问路径，为空则会进入主页 query: queryStr, // 可以使用 event 传入的数据制作特定参数，无需求则为空 }, isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false expire_time: Math.round(new Date().getTime() / 1000) + 3600 //我们设置为当前时间3600秒后，也就是1小时后失效 //无需求可以去掉这两个参数（isExpire，expire_time） })}复制代码2、部署云函数

右键，选择创建并部署。

这样云函数的部署就完成了。

H5部分1、<JumpApp/>

我的想法是写一个通用组件<JumpApp/>，不包含任何样式，内容通过<slot/>传进来，这样后面不管什么样的跳转都可以使用它了。

我可以这样：

<!-- 商品 --><view v-for="item in goodsList ?? []" :key="item.id" class="item_wrap"> <JumpApp :ghid="jumpAppGhCode" :appid="jumpAppAppid" :envid="jumpAppEnvid" :ready="doctorInfo?.doctorCode" :path="`pages/product/details/details`" :queryData="{ dCode: doctorInfo?.developerCode ?? '', skuCode: item.chnlGoodsId, }" > <view class="service_package_item"> <image class="service_package_item_icon" :src="item.goodsImg?.split(',')[0] ?? ''"></image> <view class="service_package_item_content"> <view class="service_package_item_content_title_wrap"> <view class="service_package_item_content_title">{{ item.goodsName }}</view> <view class="service_package_item_content_price">{{ item.goodsFeeStr }}元</view> </view> <view class="service_package_item_content_desc">{{ item.goodsDesc }}</view> </view> </view> </JumpApp></view>复制代码

也可以这样：

<view class="buy_btn_box"> <customButton v-if="drugListInfo?.disabled == 1" name="清单已失效，请重新联系医生" :disabled="true" /> <!-- 跳转小程序 --> <JumpApp v-else :ghid="jumpAppGhCode" :appid="jumpAppAppid" :envid="jumpAppEnvid" :ready="jumpInfo.path" :path="jumpInfo.path" :queryData="jumpInfo.queryData" > <customButton type="primary" name="立即购买 送药上门" /> </JumpApp> </view>复制代码2、介绍props

props

类型

默认值

说明

path

string

跳转的小程序路径

queryData

object

{}

携带的参数

ready

any

只有当ready为true的时候，才会去执行最后一步 调用云函数，用于依赖一些异步数据的情况

callFunctionName

string

'openMiniapp'

调用的云函数的名称

ghid

string

小程序的原始id （gh开头的那个）

appid

string

小程序的appid

envid

string

云开发的云环境id

附：
云环境id的位置：

3、关键代码配置H5的云函数 init

methods: { ... // 先配置 async preConfig() { const self = this if (isWeixin()) { // 这里先忽略，这是 微信内H5 配置wxjssdk的部分 return await configWx([], ['wx-open-launch-weapp']) } else { // 微信外 if (!window.tcb) { window.tcb = new window.cloud.Cloud({ identityless: true, resourceAppid: self.appid, resourceEnv: self.envid, }) } return await window.tcb.init() } }, ... }复制代码window.jumpAppState

因为有时一个页面里，可能会有多个<JumpApp/>，比如一个需要跳转小程序的商品列表，每个商品item都要包裹一个<JumpApp/>

而云函数其实只需要初始化一次，因为云函数是挂到window上的。即使是微信内的H5，每个页面wx jssdk也只需要初始化一次。

所以这里增加了个window.jumpAppState的变量用来判断当前页面是否正在初始化和是否初始化完成，用window.location.hash作为key，用来区分不同的页面。

async mounted() { console.log('jumpApp mounted') if (!window.jumpAppState) window.jumpAppState = {} // console.log(window.jumpAppState[`isReady_${window.location.hash}`]) // console.log(window.jumpAppState[`isGettingReady_${window.location.hash}`]) // 先配置 if (!window.jumpAppState[`isReady_${window.location.hash}`] && !window.jumpAppState[`isGettingReady_${window.location.hash}`]) { console.log('进入配置') window.jumpAppState[`isGettingReady_${window.location.hash}`] = true await this.preConfig() window.jumpAppState[`isGettingReady_${window.location.hash}`] = false window.jumpAppState[`isReady_${window.location.hash}`] } // 先配置 end console.log('配置完毕') this.isPreConfigFinish = true },复制代码调用云函数openMiniapp，拿到openLink

methods: { ... // 微信外 async initOutWeixin() { const self = this let res try { res = await window.tcb.callFunction({ name: self.callFunctionName, // 提供UrlScheme服务的云函数名称 data: { path: self.path, queryData: self.queryData, }, }) } catch (e) { console.log('云函数失败了', e) } console.log('云函数结果', res) this.minihref = res?.result?.openlink ?? '' this.isInitWechatFinish = true }, // 微信外跳转小程序 click handleOutWeixinClick() { if (!isWeixin() && this.minihref && this.isInitWechatFinish) { window.location.href = this.minihref } }, ...}复制代码我设置的几个变量isPreConfigFinishisCanInitWechatisInitWechatFinish

· isPreConfigFinish
代表window.tcb是否init完成（如果是微信内的话，代表wx jssdk是否config完成）

· isCanInitWechat
是否preConfig完成，同时外部的一些参数是否准备好了。
因为有时我们跳转时携带的参数是异步获取的，比如订单号、商品code等，所以设置了一个props.ready的变量。
只有当isPreConfigFinish已经为true，且一些异步的数据已经拿到即props.ready为true的时候，isCanInitWechat为true

· isInitWechatFinish
代表云函数调用成功了，拿到了openLink（微信内的话，就是wxjssdk config成功，并且<wx-open-launch-weapp/>已经加到了html里）

最终拿到的这个minihref就是类似这种的地址："?ticket=slejlsdjlf"，我们直接调用window.location.href = this.minihref 就能触发跳转小程序了。

ok 这样就开发完成了完整代码<JumpApp/>

<template> <view class="p_1646876870010"> <div class="open_app_div" @click="handleOutWeixinClick" v-html="openWeappBtnHtml"></div> <slot></slot> </view></template><script>import { ref, onMounted } from 'vue'import { configWx } from '@/services/wx'import { jumpAppGhCode } from '@/utils/consts'import { isWeixin } from '@/utils/utils_h5'// 因为一个页面可能有多个 JumpApp组件，用window 保存是否配置成功的状态，并且用当前页面的hash值区分 window.location.hash// window.jumpAppState = {// [`isGettingReady_${window.location.hash}`]: false,// [`isReady_${window.location.hash}`]: false,// }/** * 顺序： （几个变量） * 1、preConfig * 2、外部的ready 可以了 * * 注：1、2 完成之后 isCanInitWechat 变为true ，开始init微信小程序的跳转 * * 3、isInitWechatFinish 最终成功了 */export default { data() { return { isPreConfigFinish: false, // preConfig是否完成 isInitWechatFinish: false, // 最终成功了 // 微信内 openWeappBtnHtml: '', // 微信外 minihref: '', } }, props: { // path 不需要带 '/' path: { type: String, }, queryData: { type: Object, default: () => ({}), }, ready: {}, // 其它的外部的数据是否准备好 ready 为true的时候 才 添加wx-open-launch-weapp 或者 触发云函数 // 调用的云函数名称 callFunctionName: { type: String, default: 'openMiniapp', }, /** * 微信内 */ ghid: { type: String, }, /** * 微信外 */ appid: { type: String, }, // 云环境id envid: { type: String, }, }, computed: { isCanInitWechat() { return this.isPreConfigFinish && this.ready }, }, watch: { isCanInitWechat(v) { if (v) { setTimeout(() => { if (isWeixin()) { this.initInWeixin() } else { this.initOutWeixin() } }, 0) } }, }, async mounted() { console.log('jumpApp mounted') if (!window.jumpAppState) window.jumpAppState = {} // console.log(window.jumpAppState[`isReady_${window.location.hash}`]) // console.log(window.jumpAppState[`isGettingReady_${window.location.hash}`]) // 先配置 if (!window.jumpAppState[`isReady_${window.location.hash}`] && !window.jumpAppState[`isGettingReady_${window.location.hash}`]) { console.log('进入配置') window.jumpAppState[`isGettingReady_${window.location.hash}`] = true await this.preConfig() window.jumpAppState[`isGettingReady_${window.location.hash}`] = false window.jumpAppState[`isReady_${window.location.hash}`] } // 先配置 end console.log('配置完毕') this.isPreConfigFinish = true }, methods: { // 先配置 async preConfig() { const self = this if (isWeixin()) { return await configWx([], ['wx-open-launch-weapp']) } else { if (!window.tcb) { window.tcb = new window.cloud.Cloud({ identityless: true, resourceAppid: self.appid, resourceEnv: self.envid, }) } return await window.tcb.init() } }, // 微信内 async initInWeixin() { console.log('微信内') // 获取queryStr let queryStrArr = [] for (let key in this.queryData) { const str = `${key}=${this.queryData[key]}` // name=tom queryStrArr.push(str) } const queryStr = queryStrArr.join('&') const jumpPath = `${this.path}?${queryStr}` this.openWeappBtnHtml = ` <wx-open-launch-weapp id="launch-btn" username="${this.ghid}" path="${jumpPath}" style="background-color:transparent;" > <template> <div style="width:800px;padding:100px;color:transparent;background-color:transparent;font-size:14px">跳转</div> </template> </wx-open-launch-weapp> ` this.isInitWechatFinish = true }, // 微信外 async initOutWeixin() { const self = this let res try { res = await window.tcb.callFunction({ name: self.callFunctionName, // 提供UrlScheme服务的云函数名称 data: { path: self.path, queryData: self.queryData, }, }) } catch (e) { console.log('云函数失败了', e) } console.log('云函数结果', res) this.minihref = res?.result?.openlink ?? '' this.isInitWechatFinish = true }, // 微信外跳转小程序 click handleOutWeixinClick() { if (!isWeixin() && this.minihref && this.isInitWechatFinish) { window.location.href = this.minihref } }, }, // methods end}</script><style lang="less">.p_1646876870010 { position: relative; overflow: hidden; .open_app_div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }}</style>复制代码附上微信内H5配置wxjssdk的代码configWx

/** * @param {Array<string>} jsApiArr * @returns */export function configWx(jsApiArr = [], openTagArr = []) { return new Promise(async (resolve, reject) => { if (!wx) return reject() wx.ready(function (res) { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log('wx ready 我打印的', res) return resolve() }) wx.error(function (err) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log('wx error 我打印的', err) return reject(err) }) // 请求 let config = null try { /** * 苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题，和IOS对单页面的优化问题， * 通俗点说安卓进行页面跳转分享时会刷新当前的url,而苹果不会，苹果是通过历史记录进来的，不会刷新url所以会导致签名失败)。 * * 所以 * 获取signUrl 安卓传全部的href，ios只用传#之前的 */ let signUrl = '' if (isIOS()) { signUrl = window.location.href.split('#')[0] } else { signUrl = window.location.href } const res = await request({ url: '/h5/user/jsapi/initConfig', data: { url: signUrl }, }) config = res?.data ?? {} } catch (error) { return reject(error) } if (config) { wx.config({ // debug: getIsProd() ? false : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 debug: false, appId: appid + '', timestamp: config.timestamp + '', // 必填，生成签名的时间戳 nonceStr: config.nonceStr + '', // 必填，生成签名的随机串 signature: config.signature + '', // 必填，签名 jsApiList: ['hideMenuItems', ...jsApiArr], // 必填，需要使用的JS接口列表 // 这个貌似不能空 openTagList: [...openTagArr], }) } })}最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:不胜感激 ！

PHP学习手册：
技术交流论坛：