介绍

公司准备基于腾讯IM进行开发即时通讯功能，想用H5来开发，这样方便以后移植，在原生app里直接加载，通过三天时间的调查，以及与腾讯客服，技术来回沟通，已经有一定的成果，现将调查成果，以及调查过程中踩过的坑以及解决方法记录一下，希望可以使有相同需求的人少走弯路。

调查h5 demo在浏览器中的支持情况

h5 demo使用的官方提供的体验 Demo，对应的url地址是(https://web.sdk.qcloud.com/im/demo/latest/index.html#/login)，我是安卓设备，使用浏览器扫描即时通信IM体验Demo中的H5，在浏览器打开，点击语音通话，视频通话，均提示“权限获取失败：用户禁止使用设备”，但是我浏览器权限是打开的，我还重新下载了一个新的浏览器，也出现同样的问题，iOS会提示获取权限的对话框，授权以后是可以进行音视频通话的。
官方对这一问题的回复是：

您好，关于您的问题，您可以在Android上检测下能力测试，看下浏览器上正常嘛
https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html

我用浏览器加载这个网站，进行测试，结果是

按理说是不会有问题的，音视频设备都支持，但是确实不行，官方建议让使用chrome，我下载手机版chrome，结果音视频通话都可以，结果在浏览器与应用环境信息找到了答案，

官方也回应，存在兼容性问题。

调查h5在Android Webview和腾讯TBS浏览器里的情况

既然支持移动版chrome浏览器，我想当然的觉得，安卓原生的Webview应该也是支持的，结果在android程序中加载url，在android Webview中，与文件选取有关的按钮点击没效果，音视频聊天不能使用，在IOS里，视频聊天的摄像头打不开。因为Webview存在很多坑吧，所以我换了TBS浏览器，依然有这个问题，我刚开始怀疑是权限问题，我用代码授权，手动设置，把权限都勾选上，还是有这个问题。同样，用webview加载那个检测地址（https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html），有一个问题，就是摄像头那个，切换0或者1，都看不到摄像头，有可能是这个问题，后边会说。

官方给的回应是：

您好，这个demo只能是作为展示，如果是需要内嵌到webview里面的话，需要您业务侧做二次开发哈。不能直接使用这个

好嘛，那就二次开发吧，就进入了编码阶段，跟着文档一步一步来，创建vue项目，集成UI，折腾半天，本地运行起来，用Webview加载本地地址，能访问到网页，但是与文件选取有关的按钮点击没效果，音视频聊天弹出权限获取失败的提示。

官方技术说这个音视频聊天，必须放到https环境里，好嘛，继续折腾。开始踩坑之旅。
坑1 提示检测到您暂未集成TUICallKit
我已经按照文档集成了TUICallKit，也开通了7天免费体验，结果还是报这个错，这个解决的办法是：
到这个页面CDN&音视频通信产品免费试用中心，开启免费试用套餐

这样才能使用。（那个7天体验期过了，还可以再续7天，我也是不经意发现的）
坑2（大坑） 发布后报Uncaught syntaxError: Unexpected token .
首先，我不是专业做前端的，第二，我们公司现有的项目都是vue 2，官方使用的是vue 3，对vue 3开发的经验不足，我本来以为都一样吧，很自信的发布到服务器，就是很简单的配置一下nginx嘛，结果直接报错，

Uncaught syntaxError: Unexpected token .

注意这个".“号。就寻找出错代码呗，发现出在”?."语法，就找到那行出错的代码，是在“< template>”部分，问公司前端，他说在js里支持这样写，在< template>应该不支持，去掉试试，然后我就一个一个改，把问号去掉，自信满满去试试，结果还是报错，不过这次找不到报错的地方了。然后查百度，各种尝试，我以为是发布问题，可能node.js版本太高，我就删除原来的高版本node.js，然后下载node v14.20.1,结果发布了还是不行。那是不是发布的路径问题，我试了vue.config.js里边publicPath 设置’./‘或者’/'都解决不了问题，进入了死胡同，不知道怎么做了，就尝试找官方技术解决，官方的小哥还挺热情，我就按照他的指导一步一步来，具体如下：

1. 提供配置配合官方调查

官方回复：

publicPath release 下设置为 “” 试试

我这边的技术也这样说的，我觉得问题不大，改了试试，结果还是一样，这样基本排除了发布的问题

2. Uncaught syntaxError: Unexpected token .

继续报这个错，不过这次找到了出错的地方，

是这段代码。这个是不支持 "?."这样的语法。应该是es6语法不支持，开始配置babel。
vue —— 项目启动时无法识别es6的扩展语法
1.切换淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

cnpm install --legacy-peer-deps --save-dev babel-preset-stage-3

cnpm install --legacy-peer-deps --save-dev babel-plugin-transform-object-rest-spread

4.根目录下新增文件 .babelrc

{"presets": [["es2015", { "modules": false }]],"plugins": ["transform-object-rest-spread"] //不能解析es6语法关键解决
}

5.根目录下新增文件postcss.config.js

module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } 
}

按照这个配置配置完，编译，会报

Error: Cannot find module ‘babel-preset-es2015‘

解决办法：

npm install babel-plugin-component -D

修改babel.config.js的内容，将es2015改为@babel/preset-env。编译，可能会报这个错误

Cannot read property ‘bindings‘ of null

解决办法
.babelrc （或webpack.config.js）中

presets: ["env"]

修改成

presets: ["@babel/preset-env"]

我这边还安装了一个plugin-proposal-optional-chaining，用来解决let str = a?.b?.c;可选链操作符语法时会出现编译报错的情况，安装babel依赖@babel/plugin-proposal-optional-chaining,并添加babel.config.js中。

module.exports = {presets: ['@babel/preset-env'],plugins: ["@babel/plugin-proposal-optional-chaining"]
}

发布，之前的错误没有了，又换了一个

这个是 ?? 语法没有编译，按照这个进行配置

又出现这个

然后再引用这个@babel/preset-typescript，@babel/preset-typescript，结果还是报错，按理说不应该的，官方问了一句浏览器版本，我才发现服务器上浏览器版本太低，换成版本高的服务器就好了。
现在我把最终的配置发一下

.babelrc

{"presets": ["@babel/preset-env","@babel/preset-typescript"],"plugins": ["transform-object-rest-spread"] //不能解析es6语法关键解决
}

babel.config.js

module.exports = {// presets: [//   '@vue/cli-plugin-babel/preset'// ]presets: ["@babel/preset-env","@babel/preset-typescript"],plugins: ["@babel/plugin-proposal-optional-chaining"]
}

package.json

{"name": "chat-example","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"@tencentcloud/call-uikit-vue": "^1.4.2","@tencentcloud/chat-uikit-vue": "^1.3.4","babel-polyfill": "^6.26.0","core-js": "^3.8.3","es6-promise": "^4.2.8","vue": "^3.2.13","vue-class-component": "^8.0.0-0"},"devDependencies": {"@babel/plugin-proposal-optional-chaining": "^7.21.0","@babel/preset-typescript": "^7.21.0","@typescript-eslint/eslint-plugin": "^5.4.0","@typescript-eslint/parser": "^5.4.0","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-plugin-typescript": "~5.0.0","@vue/cli-service": "~5.0.0","@vue/eslint-config-typescript": "^9.1.0","babel-plugin-component": "^1.1.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.7.0","babel-preset-stage-3": "^6.24.1","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","sass": "^1.32.7","sass-loader": "^12.0.0","typescript": "~4.5.5","vconsole": "^3.15.0","vite-plugin-vconsole": "^1.3.1"}
}

vue.config.js

const path = require("path");
// const CompressionWebpackPlugin = require("compression-webpack-plugin");
// // 定义压缩文件类型
// const productionGzipExtensions = ["js", "css"];
// let timeStamp = new Date().getTime();function resolve(dir) {return path.join(__dirname, dir);
}
module.exports = {
publicPath: "",// publicPath: process.env.BASE_URL,outputDir: `dist`,assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: true,runtimeCompiler: true,devServer: {// 设置主机地址// 设置默认端口port: 8080,},// use the full build with in-browser compiler?// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only// compiler: false,// webpack配置// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md   webpack链接API，用于生成和修改webapck配置//部署打包html带引号chainWebpack: (config) => {config.resolve.alias.set("@", resolve("src"));config.plugin("html").tap((args) => {args[0].minify = false;return args;});},//压缩打包文件大小configureWebpack: (config) => {if (process.env.NODE_ENV === "Production") {// config.output.filename = `assets/js/[name].${timeStamp}.js`;// config.output.chunkFilename = `assets/js/[name].${timeStamp}.js`;config.plugins.push(new CompressionWebpackPlugin({algorithm: "gzip",test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),threshold: 10240,minRatio: 0.8,}));}config.externals = {//   'vue': 'Vue',//   'vuex': 'Vuex',//   'vue-router': 'VueRouter',//   'element-ui': 'ELEMENT',//   'Axios': 'axios',//   'jquery': '$',//   'moment': 'moment',//   'js-cookie': 'Cookies',//   'echarts': 'echarts',//   'tinymce/tinymce': 'tinymce'};// }},// 生产环境是否生成 sourceMap 文件productionSourceMap: false,// 第三方插件配置pluginOptions: {// ...},
};

结论：需要确认下最终产品的目标浏览器版本范围。如果要覆盖低版本（不支持 es6的语法），还是需要配置 babel 进行兼容。否则可以忽略
坑3 安卓Webview不支持选取文件操作
把开发好的vue项目发布到服务器上以后，用Webview加载，还是不能选取文件，官方给的建议是参照Android-WebView-解决对选择文件 input type=“file“无响应 来操作，我试了一下，很容易报错，而且代码很多，也有点老，就在网上找了找，发现一个简单的配置，分享一下

private ValueCallback mUploadMessage;
public ValueCallback uploadMessage;
public static final int REQUEST_SELECT_FILE = 100;
private final static int FILECHOOSER_RESULTCODE = 2;
webview.setWebChromeClient(new WebChromeClient(){// For 3.0+ Devices (Start)// onActivityResult attached before constructorprotected void openFileChooser(ValueCallback uploadMsg, String acceptType){mUploadMessage = uploadMsg;Intent i = new Intent(Intent.ACTION_GET_CONTENT);i.addCategory(Intent.CATEGORY_OPENABLE);i.setType("image/*");startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);}// For Lollipop 5.0+ Devices@TargetApi(Build.VERSION_CODES.LOLLIPOP)public boolean onShowFileChooser(WebView mWebView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams){if (uploadMessage != null) {uploadMessage.onReceiveValue(null);uploadMessage = null;}uploadMessage = filePathCallback;Intent intent = fileChooserParams.createIntent();try{startActivityForResult(intent, REQUEST_SELECT_FILE);} catch (ActivityNotFoundException e){uploadMessage = null;Toast.makeText(getBaseContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show();return false;}return true;}//For Android 4.1 onlyprotected void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture){mUploadMessage = uploadMsg;Intent intent = new Intent(Intent.ACTION_GET_CONTENT);intent.addCategory(Intent.CATEGORY_OPENABLE);intent.setType("image/*");startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);}protected void openFileChooser(ValueCallback uploadMsg){mUploadMessage = uploadMsg;Intent i = new Intent(Intent.ACTION_GET_CONTENT);i.addCategory(Intent.CATEGORY_OPENABLE);i.setType("image/*");startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);}});
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent)
{if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){if (requestCode == REQUEST_SELECT_FILE){if (uploadMessage == null)return;uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));uploadMessage = null;}}else if (requestCode == FILECHOOSER_RESULTCODE){if (null == mUploadMessage)return;// Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment// Use RESULT_OK only if you're implementing WebView inside an ActivityUri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();mUploadMessage.onReceiveValue(result);mUploadMessage = null;}elseToast.makeText(getBaseContext(), "Failed to Upload Image", Toast.LENGTH_LONG).show();
}

配置好了就可以选取文件，相册了
坑4 还是不能调起摄像头进行音视频聊天
现在已经按照文档开发集成，并且发布到了外网，但是使用webview加载，音视频聊天还是弹出权限获取失败的提示，我这边检查过，权限都是有的。官方给的回应是

尊敬的用户： 您好，web端SDK只能使用js调用获取摄像头和麦克风的，底层使用的getUserMedia。如果获取不到需要检查app
webview的配置是否正确。上述能力检查页面是否能听到麦克风声音呢。可以用下面原生的HTML Demo测试一下是否能拿到

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

这个得修改安卓原生代码了，我这边只是测试一下，所以在首页的时候，已经把摄像头和语音的权限全部授权了

 mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onPermissionRequest(PermissionRequest request) {request.grant(request.getResources());}});

结论

腾讯im 的h5版本，在原生支持情况，可以通过设置原生代码来适配，而且对浏览器的兼容性要求比较高，最大的问题是即时性问题，因为没有离线推送，不能随时把控进度，不能离开页面。比如用户需要排队，等待与医生聊天，就可能会长时间停留在网页，不能退出，退出不能及时收到消息。
所以是否选择h5 im，需要根据公司成本和需求来吧。原生app对接Im sdk是最好的，但是需要安装app，剩下的是小程序，我现在把调研的小程序和h5的区别分享一下