实时音视频 WebView

本文将介绍如何通过 WebView 的方式，在 uni-app、Android、iOS 应用中接入 TUIRoomKit。
uni-app 使用 WebView
1. 在 vue 页面中引入 webview 组件。
<template>
	<div>
		<web-view src="https://www.example.com"></web-view>
	</div>
</template>
2.  新增如下请求权限的代码：
说明：
在使用 uni-app 打包 App 时，打包安卓应用，需要增加请求权限的代码；打包成 iOS 应用，无需进行额外配置。
import { onMounted, onBeforeMount } from "vue"
const isIos = plus.os.name === 'iOS';
onMounted(() => {
  if (isIos) return;
  watchPermission();
  requestPermisson();
});
﻿
const watchPermission = () => {
  const requestPermission = uni.createRequestPermissionListener();
  // 可以根据弹出的弹框操作，来提示对应的语句
  requestPermission.onConfirm((e) => {
    console.log('the permission request is confirm ', e);
  });
};
const requestPermisson = () => {
  // 请求对应的权限 允许程序修改全局音频设置、允许程序录制音频、允许访问摄像头进行拍照
  plus.android.requestPermissions(['android.permission.MODIFY_AUDIO_SETTINGS', 'android.permission.RECORD_AUDIO', 'android.permission.CAMERA']);
};
Android 原生 App 使用 WebView
以 java 语言为例
1. 在res/layout/activity_main.xml文件中，添加一个 WebView 控件。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
﻿
    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
2. 在AndroidManifest.xml文件中添加媒体权限。
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>
<uses-feature android:name="android.hardware.camera" android:required="false"/>
3. 在MainActivity.java文件中，新增获取权限方法。
package com.example.webview_test; // 替换为自己项目
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import android.Manifest;
import android.annotation.TargetApi;
import android.content.pm.PackageManager;
import android.os.Build;
import android.os.Bundle;
import android.webkit.PermissionRequest;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
﻿
public class MainActivity extends AppCompatActivity {
    private static final int MY_PERMISSIONS_RECORD_AUDIO = 1;
    private static final int MY_PERMISSIONS_CAMERA = 1;
    private static final int MY_PERMISSIONS_MODIFY_AUDIO_SETTINGS = 1;
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView=(WebView) findViewById(R.id.web_view);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://www.example.com");
        WebSettings webSettings=webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setMediaPlaybackRequiresUserGesture(false);
        webView.setWebChromeClient(new WebChromeClient(){
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public void onPermissionRequest(final PermissionRequest request) {
                request.grant(request.getResources());
            }
        });
﻿
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.RECORD_AUDIO}, MY_PERMISSIONS_RECORD_AUDIO);
        }
﻿
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, MY_PERMISSIONS_CAMERA);
        }
﻿
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.MODIFY_AUDIO_SETTINGS) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.MODIFY_AUDIO_SETTINGS}, MY_PERMISSIONS_MODIFY_AUDIO_SETTINGS);
        }
    }
}
鸿蒙原生 App 使用 WebView
1. 在ability_main.xml ， 新增 WebView 控件。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
﻿
    <WebView
        ohos:id="$+id:web_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#FFFFFF"/>
</DirectionalLayout>
2. 在MainAbility.java中增加获取权限代码：
// MainAbility.java
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.webengine.WebView;
import ohos.agp.components.webengine.WebConfig;
import ohos.agp.components.Component;
import ohos.bundle.IBundleManager;
﻿
public class MainAbility extends Ability {
    private WebView webView;
    private static final int PERMISSION_REQUEST_CODE = 1001;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);       
        // 请求必要的权限
        requestPermissions();
        // 初始化WebView
        initWebView();
    }
﻿
    private void requestPermissions() {
        String[] permissions = {
            "ohos.permission.MICROPHONE",
            "ohos.permission.CAMERA"
        };
        requestPermissionsFromUser(permissions, PERMISSION_REQUEST_CODE);
    }
﻿
    private void initWebView() {
        // 获取 WebView 实例
        webView = (WebView) findComponentById(ResourceTable.Id_web_view);
        // 配置 WebView
        WebConfig webConfig = webView.getWebConfig();
        // 启用 JavaScript
        webConfig.setJavaScriptPermit(true);
        });
        // 加载 URL
        webView.loadUrl("https://www.example.com");
    }
}
3. 在config.json中添加必要的权限声明：
{
    "app": {
        "bundleName": "com.example.webview",
        "vendor": "example",
        "version": {
            "code": 1000000,
            "name": "1.0.0"
        }
    },
    "deviceConfig": {},
    "module": {
        "requestPermissions": [
            {
                "name": "ohos.permission.INTERNET"
            },
            {
                "name": "ohos.permission.CAMERA"
            },
            {
                "name": "ohos.permission.MICROPHONE"
            }
        ]
    }
}
iOS 原生 App 使用 WebView
1. 打开ViewController.swift文件。
2. 导入 WebKit 框架：
import UIKit
import WebKit
3. 在 ViewController 类中添加 WebView 并加载网页：
class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // 创建 WebView
        webView = WKWebView(frame: self.view.frame)
        webView.navigationDelegate = self
        self.view.addSubview(webView)
        // 加载网页
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}
4. 确保您的应用有访问相机和麦克风的权限。您可以在Info.plist文件中添加以下键值对：
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to use certain features.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone to use certain features.</string>
5. 如果您需要在运行时请求权限，可以在 ViewController 中添加权限请求的代码：
import UIKit
import WebKit
﻿
class ViewController: UIViewController {
    private var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        requestPermissions()
        loadWebContent()
    }
    
    private func setupWebView() {
        webView = WKWebView(frame: view.frame)
        webView.navigationDelegate = self
        view.addSubview(webView)
    }
    
    private func loadWebContent() {
        guard let url = URL(string: "https://www.example.com") else {
            return
        }
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    private func requestPermissions() {
        requestCameraPermission()
        requestMicrophonePermission()
    }
    
    private func requestCameraPermission() {
        let status = AVCaptureDevice.authorizationStatus(for: .video)
        switch status {
        case .authorized:
            print("Camera access granted")
        case .notDetermined:
            AVCaptureDevice.requestAccess(for: .video) { [weak self] granted in
                DispatchQueue.main.async {
                    if granted {
                        print("Camera access granted")
                    } else {
                        self?.showPermissionDeniedAlert(for: "Camera")
                    }
                }
            }
        case .denied, .restricted:
            showPermissionDeniedAlert(for: "Camera")
        @unknown default:
            print("Unknown camera access status")
        }
    }
    
    private func requestMicrophonePermission() {
        let status = AVCaptureDevice.authorizationStatus(for: .audio)
        switch status {
        case .authorized:
            print("Microphone access granted")
        case .notDetermined:
            AVCaptureDevice.requestAccess(for: .audio) { [weak self] granted in
                DispatchQueue.main.async {
                    if granted {
                        print("Microphone access granted")
                    } else {
                        self?.showPermissionDeniedAlert(for: "Microphone")
                    }
                }
            }
        case .denied, .restricted:
            showPermissionDeniedAlert(for: "Microphone")
        @unknown default:
            print("Unknown microphone access status")
        }
    }
    
    private func showPermissionDeniedAlert(for device: String) {
        let alert = UIAlertController(
            title: "\\(device) Access Required",
            message: "Please enable \\(device.lowercased()) access in Settings to use this feature.",
            preferredStyle: .alert
        )
        
        alert.addAction(UIAlertAction(title: "Settings", style: .default) { _ in
            if let settingsURL = URL(string: UIApplication.openSettingsURLString) {
                UIApplication.shared.open(settingsURL)
            }
        })
        
        alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
        
        present(alert, animated: true)
    }
}
﻿
extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("Web page loaded successfully")
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("Failed to load web page: \\(error.localizedDescription)")
    }
}
常见问题
WebView 是否支持屏幕共享？
目前  WebView 不支持屏幕共享。
其他文档
﻿TUIRoomKit﻿
﻿TUIRoom Demo 快速跑通﻿
﻿设置昵称、头像﻿
﻿Web&Electron﻿
﻿界面定制 (TUIRoomKit)﻿
﻿常见问题﻿
WebView

本页目录：

uni-app 使用 WebView

Android 原生 App 使用 WebView

鸿蒙原生 App 使用 WebView

iOS 原生 App 使用 WebView

常见问题

WebView 是否支持屏幕共享？

其他文档
