接入文档
H5 lite方案
界面与兼容性说明
App调用H5兼容性配置指引
App调用H5兼容性配置指引
1.需要使用https；
2.安卓，IOS 通过web-view使用需要进行一定的适配。
方案如下：
# 安卓解决方案：
Android5.0 之后的版本原生webview，app层面需要摄像机权限。
text
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
网页中会实时弹出获取摄像头权限，需要在webview授权处理中允许
text
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onPermissionRequest(final PermissionRequest request) {
Log.d("MainActivity", "onPermissionRequest");
MainActivity.this.runOnUiThread(new Runnable() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void run() {
request.grant(request.getResources());
}
});
}
});
使用其它浏览器内核需要根据相关浏览器要求进行配置。
# IOS解决方案
WebRTC在iOS上，仅支持WKWebView。
需在配置里加上摄像头和麦克风的使用权限。App 的 info.plist 中加入：
text
.NSMicrophoneUsageDescription
.NSCameraUsageDescription
OC语法：
text
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; // 初始化配置对象
configuration.allowsInlineMediaPlayback = YES; // 默认是NO，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制，其中NO为使用原生全屏控制器，YES为视频内嵌播放。
// 设置为自动播放， 不需要用户采取任何手势开启播放
if (@available(iOS 10.0, *)) {
configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone; //WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放，iOS 10.0+支持
} else {
configuration.requiresUserActionForMediaPlayback = NO;
}
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];
Swift语法
text
let configuration = WKWebViewConfiguration() // 初始化配置对象
configuration.allowsInlineMediaPlayback = true // 默认是false，这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制
// 设置为自动播放，不需要用户采取任何手势开启播放
if #available(iOS 10.0, *) {
configuration.mediaTypesRequiringUserActionForPlayback = [] // WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发，即为自动播放，iOS 10.0+支持
} else {
configuration.requiresUserActionForMediaPlayback = false
}
let webView = WKWebView(frame: CGRect.zero, configuration: configuration)
# 鸿蒙解决方案：
1、在module.json5 中声明H5所需权限：
text
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"reason": "$string:EntryAbility_permission_internet",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
// camera permisson
{
"name": "ohos.permission.CAMERA",
"reason": "$string:EntryAbility_permission_camera",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
// audio permission
{
"name": "ohos.permission.MICROPHONE",
"reason": "$string:EntryAbility_permission_microphone",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
}
]
2、通过biztoken接口获取Web需要加载的url
3、在页面Component中使用Web组件
a. 加载url
b. 注册js接口回调
c. 通过onShowFileSelector使用相册/相机选择照片或拍摄视频
text
/**
** 通过Camera拍摄视频并获取视频uri回调
**
*/
invokeCamera(callback: (uri: string) => void) {
const context = getContext(this) as common.UIAbilityContext;
const pickerProfile: cameraPicker.PickerProfile = {
cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
};
cameraPicker.pick(context,
[cameraPicker.PickerMediaType.VIDEO, cameraPicker.PickerMediaType.VIDEO], pickerProfile)
.then((pickerResult: cameraPicker.PickerResult) => {
if (callback && pickerResult.resultUri) {
callback(pickerResult.resultUri);
}
})
.catch((error: BusinessError) => {
console.error(`invokeCamera failed, code: ${error.code}, message: ${error.message}`);
});
}
build() {
Column() {
Web({ src: this.url, controller: this.controller })
.width('100%')
.height('100%')
.javaScriptAccess(true)
.onShowFileSelector((event) => {
this.invokeCamera((uri: string) => {
event?.result.handleFileList([uri]);
})
return true
})
.onPermissionRequest((event) => {
console.log('onPermissionRequest')
if (event) {
event.request.grant(event.request.getAccessibleResource())
}
})
}
.width('100%')
.height('90%')
.backgroundColor(Color.White)
}
# Uniapp X接入
下载demo并根据指引配置插件。