Bootstrap

微信小程序音视频通话(for硬件)组件的使用

1、产品介绍

借助微信小程序音视频通话(for 硬件)组件,开发者可以实现智能设备和手机微信端的一对一音视频通话,满足实时触达场景,提升通话体验。具体的介绍和说明,可参考微信官方的使用手册:微信小程序音视频通话(for 硬件) 使用手册 | 微信开放社区

2、微信小程序音视频通话(for硬件)接入流程

3、微信小程序接入VoIP通话插件

VoIP插件主要用于提供「小程序音视频通话(for 硬件)」的部分基础能力和统一的通话界面。具体说明可参考官方文档:VoIP 通话插件 | 微信开放文档

微信小程序要使用VoIP通话插件,第一步是在小程序的app.json文件声明插件:

"plugins": {
    "wmpf-voip": {
        "version": "latest", // latest 表示自动使用最新版本
        "provider": "wxf830863afde621eb",  // 固定写死 
        "genericsImplementation": {
            "call-page-plugin": {  // 开启呼叫时运行跳转自定义界面
                "custombox": "/pages/components/test/test" 
            }
        }
    }
}

在设备呼叫小程序用户之前,需要先将小程序用户对设备进行授权,即允许设备发起语音和视频通话邀请

小程序授权设备相关文档:用户授权设备 | 微信开放文档

授权的具体实现代码:

wx.requestDeviceVoIP({
  sn: 'xxxxxx', // 向用户发起通话的设备 sn(需要与设备注册时一致)
  snTicket: 'xxxxxx', // 获取的 snTicket
  modelId: 'xxxxxx', // 「设备接入」从微信公众平台获取的 model_id
  deviceName: 'xxx', // 设备名称,用于授权时显示给用户
  success(res) {
    console.log(`requestDeviceVoIP success:`, res)
  },
  fail(err) {
    console.error(`requestDeviceVoIP fail:`, err)
  },
})

/**
 * 根据deviceId 和 modelId 获取票据
 * @param deviceId 
 * @param modelId 
 */
public static String getSnTicket(String deviceId, String modelId) {
    //1、 拿到 access_token 参数
    String accessToken = getAccessToken();
    // 创建RestTemplate对象
    RestTemplate restTemplate = new RestTemplate();
    // 设置请求头信息
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_JSON);
    headers.set("Authorization", "Bearer your_token_here");
    // 设置请求参数 access_token、 sn、 model_id
    String url = "https://api.weixin.qq.com/wxa/getsnticket?access_token=" + accessToken;
    String requestBody = "{\"sn\":\"" + deviceId + "\",\"model_id\":\"" + modelId + "\"}";
    // 创建HttpEntity对象
    HttpEntity<String> requestEntity = new HttpEntity<>(requestBody, headers);
    // 发送POST请求
    ResponseEntity<String> responseEntity =
            restTemplate.postForEntity(url, requestEntity, String.class);
    // 获取响应结果
    HttpStatus statusCode = responseEntity.getStatusCode();
    String responseBody = responseEntity.getBody();
    // 使用JsonParser解析字符串为JsonObject
    JsonObject jsonObject = JsonParser.parseString(responseBody).getAsJsonObject();
    // 获取sn_ticket对应的值
    String snTicket = null;
    if (jsonObject.has("sn_ticket")) {
        snTicket = jsonObject.get("sn_ticket").getAsString();
    }
    return snTicket;
}

/**
 * 获取接口凭证 access_token
 */
private static String getAccessToken() {
    String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=your_appid&secret=your_secret";
    RestTemplate restTemplate = new RestTemplate();
    String result = restTemplate.getForObject(url, String.class);
    String s = result.replaceAll("[{}\"]", "");
    String[] strings = s.split(","); 
    String[] b = strings[0].split(":");
    return b[1];
}
;