处理ios拉流页添加到主屏幕并打开时出现偶发黑屏问题

static/rtcEngine/js/WXtrialInterface.js

@@ -7,6 +7,102 @@ import logReport from './logReport.js'
 document.addEventListener('dblclick', function (e) {
     e.preventDefault();
 });
+
+// 添加监听 页面显示或隐藏 事件
+document.addEventListener('visibilitychange', visibilitychanged);
+
+// 监听 页面显示或隐藏 执行的函数
+function visibilitychanged() {
+  // 获取当前环境
+  const env = isBrowserEnvironment();
+
+  // 获取当前页面的可见性状态
+  const visibilityState = document.visibilityState;
+
+  if (visibilityState === 'visible') {
+    // 页面显示时的逻辑
+    // 网页重载
+    if (env.isBrowser && env.isTopWindow && env.isIPhone) {
+      location.reload();
+    }
+  } else if (visibilityState === 'hidden') {
+    // 页面隐藏时的逻辑
+    // video.pause();
+  } else if (visibilityState === 'prerender') {
+    // 页面预渲染时的逻辑
+    console.log('页面处于预渲染状态');
+  } else if (visibilityState === 'unloaded') {
+    // 页面即将卸载时的逻辑 移除监听
+    document.removeEventListener('visibilitychange', visibilitychanged);
+  }
+}
+
+/**
+ * @description: 判断当前页面运行环境
+ * @return {Object} 返回当前页面运行环境
+ */
+function isBrowserEnvironment() {
+  // 判断是否在浏览器环境中
+  const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
+
+  // 判断是否在微信环境中
+  const isWechat = /MicroMessenger/i.test(navigator.userAgent);
+
+  // 判断是否在微信小程序的 web-view 中
+  const isMiniProgramWebview = isWechat && /miniProgram/i.test(navigator.userAgent);
+
+  // 判断是否是 iPhone 设备
+  const isIPhone = /iPhone/i.test(navigator.userAgent);
+
+  // 判断是否是顶级窗口（不是嵌套在 iframe 中）目前只有ios的浏览器中才会是顶级窗口
+  const isTopWindow = window.parent === window.self;
+
+  return {
+    isBrowser, // 是否在浏览器环境中
+    isWechat, // 是否在微信环境中
+    isMiniProgramWebview, // 是否在微信小程序的 web-view 中
+    isIPhone, // 是否是 iPhone 设备
+    isTopWindow, // 是否是顶级窗口
+  };
+}
+
+/**
+ * @description: 检查视频是否黑屏
+ * @param {Number} threshold 阈值，根据需要调整 默认20
+ * @return {Boolean} 返回是否为黑屏
+ */
+function checkVideoBlackScreen(threshold = 20) { // 阈值，根据需要调整
+    // 获取视频元素
+  const video = document.getElementById('playerVideo');
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  // 绘制视频帧到画布上
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  // 获取图像数据
+  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  let totalBrightness = 0;
+  // 遍历图像数据，计算亮度
+  for (let i = 0; i < data.length; i += 4) {
+    // 计算每个像素RGB(R:data[i], G:data[i + 1], B:data[i + 2])的亮度，这里使用简单的平均值
+    const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+    
+    // 累加亮度值
+    totalBrightness += brightness;
+  }
+
+  // 判断亮度是否低于阈值
+  const averageBrightness = totalBrightness / (data.length / 4); // 计算平均亮度
+  let isBlackScreen = averageBrightness < threshold;
+  console.log('平均亮度', averageBrightness);
+  // 释放资源
+  canvas.remove();
+  // 返回是否为黑屏
+  return isBlackScreen;
+}
+
 const { Dialog, Toast } = vant
 Toast.setDefaultOptions({ duration: 2000 });
 // 从 CLOUD_GAME_SDK 结构中解构必要的函数和常量
@@ -150,9 +246,6 @@ const app = new Vue({
                 obj = {
                     width: `${this.layoutViewHeight}px`,
                     height: `${this.layoutViewWidth}px`,
-                    // left: '50%',
-                    // top: '50%',
-                    // transform: 'translate(-50%, -50%) rotate(90deg)'
                     transform: 'rotate(90deg)'
                 }
             }
@@ -181,6 +274,7 @@ const app = new Vue({
             // 获取商户标识, 打开云机时必传, 用于日志上报
             request.defaults.headers.merchantSign = merchantSign;
             window.onresize = () => {
+                console.log('窗口尺寸变化');
                 this.getInitSize()
             }
         },
@@ -424,6 +518,7 @@ url: ${this.engine.options.url}
 
         // 退出相关按钮操作
         exitFun(key) {
+            console.log(key)
             switch (key) {
                 case 'dormant':
                     Dialog.alert({
@@ -1068,6 +1163,7 @@ method: post
     }
 })
 
+// 播放按钮点击事件
 function playOnBtn() {
     const { isTips } = this.parametersData;
     Dialog.alert({

static/webRtcYJ/WXdraw.js

@@ -710,3 +710,61 @@ function GetRequest() {
   }
   return obj;
 }
+
+// 添加监听 页面显示或隐藏 事件
+document.addEventListener('visibilitychange', visibilitychanged);
+
+// 监听 页面显示或隐藏 执行的函数
+function visibilitychanged() {
+  // 获取当前环境
+  const env = isBrowserEnvironment();
+
+  // 获取当前页面的可见性状态
+  const visibilityState = document.visibilityState;
+
+  if (visibilityState === 'visible') {
+    // 页面显示时的逻辑
+    // 网页重载
+    if (env.isBrowser && env.isTopWindow && env.isIPhone) {
+      location.reload();
+    }
+  } else if (visibilityState === 'hidden') {
+    // 页面隐藏时的逻辑
+    // video.pause();
+  } else if (visibilityState === 'prerender') {
+    // 页面预渲染时的逻辑
+    console.log('页面处于预渲染状态');
+  } else if (visibilityState === 'unloaded') {
+    // 页面即将卸载时的逻辑 移除监听
+    document.removeEventListener('visibilitychange', visibilitychanged);
+  }
+}
+
+/**
+ * @description: 判断当前页面运行环境
+ * @return {Object} 返回当前页面运行环境
+ */
+function isBrowserEnvironment() {
+  // 判断是否在浏览器环境中
+  const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
+
+  // 判断是否在微信环境中
+  const isWechat = /MicroMessenger/i.test(navigator.userAgent);
+
+  // 判断是否在微信小程序的 web-view 中
+  const isMiniProgramWebview = isWechat && /miniProgram/i.test(navigator.userAgent);
+
+  // 判断是否是 iPhone 设备
+  const isIPhone = /iPhone/i.test(navigator.userAgent);
+
+  // 判断是否是顶级窗口（不是嵌套在 iframe 中）目前只有ios的浏览器中才会是顶级窗口
+  const isTopWindow = window.parent === window.self;
+
+  return {
+    isBrowser, // 是否在浏览器环境中
+    isWechat, // 是否在微信环境中
+    isMiniProgramWebview, // 是否在微信小程序的 web-view 中
+    isIPhone, // 是否是 iPhone 设备
+    isTopWindow, // 是否是顶级窗口
+  };
+}