init

xhs-mini-demos/api-case/capture-screen/capture-screen.css

@@ -0,0 +1,25 @@
+.screen_state_txt {
+    display: inline-block;
+    font-weight: bold;
+    font-size: 24rpx;
+}
+
+.screen_state_hidden {
+    color: red;
+}
+
+.screen_state_none {
+    color: green;
+}
+
+.recording-resp {
+    border: 1px solid rgba(0,0,0,.1);
+    background: #f2f2f2;
+    font-style: italic;
+    font-size: 24rpx;
+    padding: 20rpx;
+    margin: 16rpx;
+    color: rgba(0, 0, 0, 0.55);
+    min-height: 200rpx;
+    border-radius: 20px;
+}

xhs-mini-demos/api-case/capture-screen/capture-screen.js

@@ -0,0 +1,109 @@
+const onScreenRecordingStateHandler = function (res) {
+  console.log('onScreenRecordingStateChanged', res?.state);
+  if (res?.state && this.data.recordState !== res?.state) {
+    this.setData({
+      recordState: res?.state,
+      screenRecordingState: res,
+    });
+  }
+};
+
+function onUserCaptureHandler(res) {
+  console.log('截屏回调 userCaptureHandler: ', res);
+  this.setData({
+    captureScreenTimes: this.data.captureScreenTimes + 1,
+  });
+}
+
+Page({
+  data: {
+    // 截屏
+    visualEffect: 'none',
+
+    // 查询录屏的开关状态
+    isRecording: 'off',
+    isRecordingState: null,
+    
+    // 录屏状态
+    recordState: 'stop',
+    screenRecordingState: null,
+
+    onScreenRecordingStateChanged: false,
+    onUserCaptureScreen: false,
+    captureScreenTimes: 0,
+  },
+  onLoad() {
+    // 监听用户截屏事件
+    const userCaptureHandler = this.userCaptureHandler = onUserCaptureHandler.bind(this);
+    xhs.onUserCaptureScreen(userCaptureHandler);
+
+    // 监听用户录屏事件
+    const screenRecordingStateHandler = this.screenRecordingStateHandler = onScreenRecordingStateHandler.bind(this);
+    xhs.onScreenRecordingStateChanged(screenRecordingStateHandler);
+
+    xhs.showToast({ title: '正在监听用户截屏事件、录屏事件！！' });
+  },
+  handleSetVisualEffectOnCapture() {
+    const _this = this;
+    this.setData({
+      visualEffect: this.data.visualEffect === 'none' ? 'hidden' : 'none',
+    });
+    xhs.setVisualEffectOnCapture({
+      visualEffect: _this.data.visualEffect,
+      success(res) {
+        console.log('setVisualEffectOnCapture success', res);
+      },
+      fail(err) {
+        console.log('setVisualEffectOnCapture fail', err.errMsg);
+      },
+    });
+  },
+  handleGetScreenRecordingState() {
+    const _this = this;
+    xhs.getScreenRecordingState({
+      success(res) {
+        console.log('getScreenRecordingState success', res?.state);
+        if (res?.state === 'on') {
+          _this.setData({
+            isRecording: 'on',
+            isRecordingState: res
+          });
+        } else {
+          _this.setData({
+            isRecording: 'off',
+            isRecordingState: res
+          });
+        }
+      },
+      fail(err) {
+        console.log('getScreenRecordingState fail', err.errMsg);
+      },
+    });
+  },
+  // 取消「截屏」监听
+  handleOffCaptureScreen() {
+    if (this.userCaptureHandler) {
+      xhs.offUserCaptureScreen(this.userCaptureHandler);
+      this.userCaptureHandler = null;
+    } else {
+      this.userCaptureHandler = onUserCaptureHandler;
+    }
+    
+    xhs.showToast({
+      title: '取消截屏监听, 接下来将无法监听到截屏事件，截屏次数不会更新！',
+    });
+  },
+  // 取消「录屏」监听
+  handleOffScreenRecordingState() {
+    if (this.screenRecordingStateHandler) {
+      xhs.offScreenRecordingStateChanged(this.screenRecordingStateHandler);
+      this.screenRecordingStateHandler = null;
+      xhs.showToast({
+        title: '取消录屏监听, 接下来将无法观测到录屏消息！',
+      });
+      this.setData({
+        screenRecordingState: null
+      });
+    }
+  },
+});

xhs-mini-demos/api-case/capture-screen/capture-screen.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "截屏录屏 API",
+  "usingComponents": {
+    "showbox": "../../common/component/showbox/index",
+    "box": "../../common/component/container/index"
+  }
+}

xhs-mini-demos/api-case/capture-screen/capture-screen.xhsml

@@ -0,0 +1,46 @@
+<view class="container">
+  <showbox title="设置截屏/录屏时屏幕表现">
+    <view class="_pa6">
+      当前设置: {{visualEffect}} 
+      <view class="screen_state_txt screen_state_hidden" xhs:if="{{visualEffect === 'hidden'}}">【当前录制的屏幕内容将被隐藏】</view>
+      <view class="screen_state_txt screen_state_none" xhs:else>【当前录制屏幕不受限制】</view>
+      <button
+        class="_mt4 _px6 _ui-button"
+        bindtap="handleSetVisualEffectOnCapture"
+      >切换截屏/录屏时的表现</button>
+    </view>
+  </showbox>
+  <showbox title="监听用户主动截屏事件">
+    <view class="_pa6">
+      当前截屏次数: {{captureScreenTimes}}
+      <button
+        bindtap="handleOffCaptureScreen"
+        class="_mt4 _px6 _ui-button"
+      >点击取消截屏监听</button>
+    </view>
+  </showbox>
+  <showbox title="查询用户录屏信息">
+    <view class="_pa6">
+      当前录屏状态: {{isRecording}}
+      <button
+        class="_mt4 _px6 _ui-button"
+        bindtap="handleGetScreenRecordingState"
+      >查询用户录屏信息</button>
+    </view>
+    <view class="recording-resp">
+      {{ isRecordingState ? JSON.stringify(isRecordingState, null, 2) : '暂无返回' }}
+    </view>
+  </showbox>
+  <showbox title="监听用户录屏事件【注：该事件仅在 iOS 设备中生效】">
+    <view class="_pa6">
+      当前录屏状态: {{recordState}}
+      <button
+        class="_mt4 _px6 _ui-button"
+        bindtap="handleOffScreenRecordingState"
+      >点击取消录屏监听</button>
+    </view>
+    <view class="recording-resp">
+      {{ screenRecordingState ? JSON.stringify(screenRecordingState, null, 2) : '暂无信息' }}
+    </view>
+  </showbox>
+</view>