Android 增加config.xml配置

Signed-off-by: Caner

Client.html/src/page/index.vue

@@ -91,44 +91,50 @@ export default {
     async connect() {
       console.log("连接成功", this.socket.auth);
       this.isLogin = true;
-      // 初始化RTC
-      webRTC.init();
-      await sleep(100);
-      // 监听视频流
-      this.remoteVideo = document.getElementById("v2");
-      webRTC.ontrack((event) => {
-        this.remoteVideo.srcObject = event.streams[0];
-      });
-      // 监听ICE|发送
-      webRTC.onicecandidate((event) => {
-        if (event.candidate) {
-          this.socket.emit("msg", {
-            type: "candidate",
-            candidate: event.candidate,
-          });
-        }
-      });
-      // 监听ICE状态
-      webRTC.oniceconnectionstatechange(async () => {
-        // 失败
-        if (
-          webRTC.RTC.iceConnectionState === "failed" ||
-          webRTC.RTC.iceConnectionState === "disconnected" ||
-          webRTC.RTC.iceConnectionState === "closed"
-        ) {
-          this.close("ICE通信失败");
-        }
-        // ICE连接成功|初始化摇杆
-        if (webRTC.RTC.iceConnectionState === "connected") {
-          await sleep(1000 * 2);
-          this.$refs.Contrl.initContrl();
-          this.showLoading = false;
-        }
-      });
-      // RTC通信信号
-      webRTC.getReaport((data) => {
-        this.SignalText = data.size;
-      });
+      try {
+        // 初始化RTC
+        webRTC.init();
+        await sleep(100);
+        // 监听视频流
+        this.remoteVideo = document.getElementById("v2");
+        webRTC.ontrack((event) => {
+          this.remoteVideo.srcObject = event.streams[0];
+        });
+        // 监听ICE|发送
+        webRTC.onicecandidate((event) => {
+          if (event.candidate) {
+            this.socket.emit("msg", {
+              type: "candidate",
+              candidate: event.candidate,
+            });
+          }
+        });
+        // 监听ICE状态
+        webRTC.oniceconnectionstatechange(async () => {
+          // 失败
+          if (
+            webRTC.RTC.iceConnectionState === "failed" ||
+            webRTC.RTC.iceConnectionState === "disconnected" ||
+            webRTC.RTC.iceConnectionState === "closed"
+          ) {
+            this.close("ICE通信失败");
+          }
+          // ICE连接成功|初始化摇杆
+          if (webRTC.RTC.iceConnectionState === "connected") {
+            await sleep(1000 * 2);
+            this.$refs.Contrl.initContrl();
+            this.showLoading = false;
+          }
+        });
+        // RTC通信信号
+        webRTC.getReaport((data) => {
+          this.SignalText = data.size;
+        });
+      } catch (error) {
+        this.socket.disconnect();
+        this.isLogin = false
+        alert('不支持Webrtc')
+      }
     },
 
     // 通信

Client.html/src/utils/RTC.js

@@ -4,24 +4,24 @@ class RtcService {
         this.iceServers = [
             {
                 urls: [
-                    'stun:caner.top:3478',
-                    'stun:stun.l.google.com:19302',
-                    'stun:stun1.l.google.com:19302',
-                    'stun:stun2.l.google.com:19302',
-                    'stun:stun3.l.google.com:19302',
-                ]
+                    "stun:caner.top:3478",
+                    "stun:stun.l.google.com:19302",
+                    "stun:stun1.l.google.com:19302",
+                    "stun:stun2.l.google.com:19302",
+                    "stun:stun3.l.google.com:19302",
+                ],
             },
             {
-                urls: 'turn:caner.top:3478',
-                username: 'admin',
-                credential: '123456'
-            }
-        ]
-        this.RTC = null
+                urls: "turn:caner.top:3478",
+                username: "admin",
+                credential: "123456",
+            },
+        ];
+        this.RTC = null;
     }
 
     // 初始化RTC
-    init () {
+    init() {
         const PeerConnection =
             window.RTCPeerConnection ||
             window.mozRTCPeerConnection ||
@@ -30,59 +30,59 @@ class RtcService {
     }
 
     // ICE监听
-    onicecandidate (callBack) {
-        this.RTC.onicecandidate = callBack
+    onicecandidate(callBack) {
+        this.RTC.onicecandidate = callBack;
     }
 
     // ICE状态监听
-    oniceconnectionstatechange (callBack) {
-        this.RTC.oniceconnectionstatechange = callBack
+    oniceconnectionstatechange(callBack) {
+        this.RTC.oniceconnectionstatechange = callBack;
     }
 
     // 视频流
-    ontrack (callBack) {
-        this.RTC.ontrack = callBack
+    ontrack(callBack) {
+        this.RTC.ontrack = callBack;
     }
 
     // 设置远程description
-    setRemoteDescription (data) {
-        this.RTC.setRemoteDescription(data)
+    setRemoteDescription(data) {
+        this.RTC.setRemoteDescription(data);
     }
 
     // 设置本地de
-    setLocalDescription (data) {
-        this.RTC.setLocalDescription(data)
+    setLocalDescription(data) {
+        this.RTC.setLocalDescription(data);
     }
 
     // 添加ICE
-    addIceCandidate (candidate) {
-        this.RTC.addIceCandidate(candidate)
+    addIceCandidate(candidate) {
+        this.RTC.addIceCandidate(candidate);
     }
 
     // 创建应答
-    async createAnswer () {
-        return await this.RTC.createAnswer()
+    async createAnswer() {
+        return await this.RTC.createAnswer();
     }
 
     // 创建offer
-    async createOffer () {
-        return await this.RTC.createOffer()
+    async createOffer() {
+        return await this.RTC.createOffer();
     }
 
     // 统计报告
-    async getReaport (callBack) {
-        if (!this.RTC) return
-        const res = await this.RTC.getStats(null)
-        callBack(res)
-        await sleep(1000 * 2)
-        this.getReaport(callBack)
+    async getReaport(callBack) {
+        if (!this.RTC) return;
+        const res = await this.RTC.getStats(null);
+        callBack(res);
+        await sleep(1000 * 2);
+        this.getReaport(callBack);
     }
 
     // close
-    close () {
-        if (!this.RTC) return
-        this.RTC.close()
-        this.RTC = null
+    close() {
+        if (!this.RTC) return;
+        this.RTC.close();
+        this.RTC = null;
     }
 }
-module.exports = new RtcService()
+module.exports = new RtcService();

README.md

@@ -11,6 +11,8 @@
 9. √ 电量展示
 10. √ 离线状态展示
 
-## run
+## android
 
-1. cordova 环境目的打包 app
+1. cordova run android
+2. webrtc 依赖 cordova-plugin-webview-x5
+3. 权限需要用户手动打开

config.xml

@@ -1,13 +1,14 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>HelloCordova</name>
+<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+    <name>Contrl</name>
     <description>
-        A sample Apache Cordova application that responds to the deviceready event.
+        The remote end.
     </description>
-    <author email="dev@cordova.apache.org" href="http://cordova.io">
-        Apache Cordova Team
+    <author email="5658514@qq.com" href="https://caner.top">
+        Caner
     </author>
     <content src="index.html" />
+    <plugin name="cordova-plugin-whitelist" spec="1" />
     <access origin="*" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
@@ -15,8 +16,42 @@
     <allow-intent href="sms:*" />
     <allow-intent href="mailto:*" />
     <allow-intent href="geo:*" />
-    <platform name="android">
+    <platform name="android" value="app">
         <allow-intent href="market:*" />
+        <config-file parent="/*" target="AndroidManifest.xml">
+            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+            <uses-permission android:name="android.permission.CAMERA" />
+            <uses-permission android:name="android.permission.RECORD_AUDIO" />
+            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+        </config-file>    
+        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
+            <activity android:usesCleartextTraffic="true" />
+        </edit-config>   
+        <preference name="FadeSplashScreen" value="true"/>
+        <preference name="ShowSplashScreenSpinner" value="true"/>
+        <preference name="AutoHideSplashScreen" value="true" />
+        <preference name="SplashScreenDelay" value="3000" />
+        <preference name="AndroidPersistentFileLocation" value="Compatibility" />
+        <!-- 图标 -->
+        <icon density="ldpi" src="res/icon/android/ldpi/icon.png" />
+        <icon density="mdpi" src="res/icon/android/mdpi/icon.png" />
+        <icon density="hdpi" src="res/icon/android/hdpi/icon.png" />
+        <icon density="xhdpi" src="res/icon/android/xhdpi/icon.png" />
+        <icon density="xxhdpi" src="res/icon/android/xxhdpi/icon.png" />
+        <icon density="xxxhdpi" src="res/icon/android/xxxhdpi/icon.png" />
+        <!-- 以下是欢迎页面，可根据需要进行添加 -->
+        <splash density="land-hdpi" src="res/screen/android/drawable-land-hdpi/screen.png" />  
+        <splash density="land-ldpi" src="res/screen/android/drawable-land-ldpi/screen.png" />  
+        <splash density="land-mdpi" src="res/screen/android/drawable-land-mdpi/screen.png" />  
+        <splash density="land-xhdpi" src="res/screen/android/drawable-land-xhdpi/screen.png" />  
+        <splash density="land-xxhdpi" src="res/screen/android/drawable-land-xxhdpi/screen.png" />  
+        <splash density="land-xxxhdpi" src="res/screen/android/drawable-land-xxxhdpi/screen.png" />  
+        <splash density="port-hdpi" src="res/screen/android/drawable-port-hdpi/screen.png" />  
+        <splash density="port-ldpi" src="res/screen/android/drawable-port-ldpi/screen.png" />  
+        <splash density="port-mdpi" src="res/screen/android/drawable-port-mdpi/screen.png" />  
+        <splash density="port-xhdpi" src="res/screen/android/drawable-port-xhdpi/screen.png" />  
+        <splash density="port-xxhdpi" src="res/screen/android/drawable-port-xxhdpi/screen.png" />  
+        <splash density="port-xxxhdpi" src="res/screen/android/drawable-port-xxxhdpi/screen.png" />                 
     </platform>
     <platform name="ios">
         <allow-intent href="itms:*" />

package.json

@@ -14,18 +14,20 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "cordova-android": "^9.1.0",
-    "cordova-browser": "^6.0.0",
     "cordova-plugin-file": "^6.0.2",
     "cordova-plugin-media-capture": "^3.0.3",
-    "cordova-plugin-whitelist": "^1.3.4"
+    "cordova-plugin-splashscreen": "^6.0.1",
+    "cordova-plugin-webview-x5": "^0.3.2-alpha.1",
+    "cordova-plugin-whitelist": "^1.3.5"
   },
   "cordova": {
     "plugins": {
       "cordova-plugin-whitelist": {},
-      "cordova-plugin-media-capture": {}
+      "cordova-plugin-webview-x5": {},
+      "cordova-plugin-media-capture": {},
+      "cordova-plugin-splashscreen": {}
     },
     "platforms": [
-      "browser",
       "android"
     ]
   }