uniapp微信小程序与百度小程序防止录屏功能

weixin_45371976

2533人浏览 · 2025-07-04 16:17:52

weixin_45371976 · 2025-07-04 16:17:52 发布

防录屏技术背景与重要性

小程序生态中用户隐私与内容保护需求日益增长，防止录屏技术可有效规避敏感信息泄露。微信与百度小程序平台均提供部分原生能力支持，但需结合技术手段强化防护。

微信小程序防录屏实现方案

关键点
1.对于Android平台，可以使用wx.setVisualEffectOnCapture方法设置visualEffect:'hidden’来防止录屏和截屏。
2.对于iOS平台，由于无法直接禁止录屏，我们可以通过监听录屏状态（wx.getScreenRecordingState）来检测用户是否在录屏，并在录屏时采取相应措施，例如暂停视频播放并提示用户。
3.在页面隐藏或销毁时（onHide和onUnload）：-对于Android，调用wx.setVisualEffectOnCapture设置visualEffect:'none’来释放。-对于iOS，清除定时器。

代码如下：

data() {
	return {
		videoContext：null,
		timer: null,
	}
},
onLoad() {
 	let self = this;
	self.videoContext = uni.createVideoContext('myVideo')
},
onShow() {
  let self = this;
  // 获取设备平台信息
  const platform = uni.getSystemInfoSync().platform;
  // #ifdef MP-WEIXIN
  // Android防录屏
	if (self.platform === 'android' && wx.setVisualEffectOnCapture) {
		wx.setVisualEffectOnCapture({//API要求基础库2.16.0+
			visualEffect: 'hidden',
			success: () => console.log('Android录屏保护已启用'),
			fail: (err) => console.error('启用失败', err)
		});
	}
	// iOS检测机制
	else if (self.platform === 'ios') {
		self.startScreenRecordingCheck();
	}
	// #endif
},
methods: {
	// iOS录屏检测
	startScreenRecordingCheck() {
		let self = this;
		//设置一个定时器，定期检查录屏状态（每2秒一次）
		self.timer = setInterval(() => {
			wx.getScreenRecordingState({//API要求基础库2.11.0+
				success: (res) => {
					if (res.state === 'on') {//如果检测到录屏开启
						self.handleScreenRecording();
					}
				}
			});
		}, 2000);
	},
	// 处理录屏行为
	handleScreenRecording() {
		let self = this;
		self.videoContext.pause();//停止播放视频
		uni.showModal({//提示
			title: '安全警告',
			content: '此内容禁止录屏',
			showCancel: false,
			success: () => {
				uni.navigateBack()//返回上一页
			}
		});
	},
},
onUnload() {// 页面隐藏时
	let self = this;
	// 清除定时器
	if (self.timer) {
		clearInterval(self.timer);
		self.timer = null;
	}
  // #ifdef MP-WEIXIN
  // 释放保护
  if (wx.setVisualEffectOnCapture) {
    wx.setVisualEffectOnCapture({
      visualEffect: 'none',
      complete: () => console.log('录屏保护已释放')
    })
  }
  // #endif
}

注意事项
API兼容性：在使用wx.setVisualEffectOnCapture和wx.getScreenRecordingState前，最好判断API是否兼容，以避免在低版本基础库上运行出错。
可查看微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.setVisualEffectOnCapture.html
https://developers.weixin.qq.com/miniprogram/dev/api/device/screen/wx.getScreenRecordingState.html

百度小程序防录屏实现方案

关键点
1.对于Android平台，可以使用swan.disableUserScreenRecord方法来防止录屏和截屏。（目前开发者工具不支持此 API，需使用真机进行调试）
2.对于iOS平台，由于无法直接禁止录屏，我们可以通过监听录屏状态（swan.getScreenRecordingState）来检测用户是否在录屏，并在录屏时采取相应措施，例如暂停视频播放并提示用户。(也需要真机调试)
3.在页面隐藏或销毁时（onHide和onUnload）：-对于Android，调用swan.enableUserScreenRecord来释放。-对于iOS，清除定时器。

代码如下：

data() {
	return {
		videoContext: null,
		watchTimer: null,
		isss: true
	}
},
onLoad() {
 	let self = this;
	self.videoContext = uni.createVideoContext('myVideo')
},
onShow() {
	let self = this;
	// 获取设备平台信息
	const platform = uni.getSystemInfoSync().platform;
	
	// #ifdef MP-WEIXIN
  	// Android防录屏
	if (self.platform === 'android' && wx.setVisualEffectOnCapture) {
		wx.setVisualEffectOnCapture({//API要求基础库2.16.0+
			visualEffect: 'hidden',
			success: () => console.log('Android录屏保护已启用'),
			fail: (err) => console.error('启用失败', err)
		});
	}
	// iOS检测机制
	else if (self.platform === 'ios') {
		self.startScreenRecordingCheck();
	}
	// #endif
	
	// #ifdef MP-BAIDU	
  	//防录屏
	if (self.platform === 'android') {
		swan.disableUserScreenRecord({//API要求基础库 3.880.1+
			success: res => {
				console.log('disableUserScreenRecord success: ', res);
			}
		})
	}
	// iOS检测机制
	else if (self.platform === 'ios') {
		self.getScreenRecordingState();
	}
	// #endif
},
methods: {
	// iOS录屏检测
	getScreenRecordingState() {
		let self = this;
		//仅在 iOS 上生效
		console.log(typeof swan.getScreenRecordingState)
		self.watchTimer = setInterval(() => {
			swan.getScreenRecordingState({//API要求基础库 3.880.1+
				success: res => {
					if (res.state === 'on' && self.isss) { //只弹一次弹窗
						self.handleScreenRecording();
					}
				}
			})
		}, 2000);
	},
	// 处理录屏行为
	handleScreenRecording() {
		let self = this;
		self.videoContext.pause();//停止播放视频
		self.isss = false;
		uni.showModal({//提示
			title: '安全警告',
			content: '此内容禁止录屏',
			showCancel: false,
			success: () => {
				uni.navigateBack()//返回上一页
			}
		});
	},
},
onUnload() {// 页面隐藏时
	let self = this;
	// 清除定时器
	if (self.watchTimer) {
		clearInterval(self.watchTimer);
		self.watchTimer= null;
	}
  // #ifdef MP-BAIDU
  // 释放保护
  if (swan.disableUserScreenRecord) {
	swan.enableUserScreenRecord({
		success: res => {
			console.log('enableUserScreenRecord success: ', res)
		}
	});
  }
  // #endif
}

注意事项
基础库 3.880.1 开始支持，低版本需做兼容处理。目前开发者工具不支持此 API，需使用真机进行调试。
可查看智能小程序文档：
https://smartprogram.baidu.com/docs/develop/api/device_sys/swan-disableUserScreenRecord/
https://smartprogram.baidu.com/docs/develop/api/device_sys/swan-getScreenRecordingState/

总结
平台差异：Android可实现直接阻止录屏，iOS只能检测录屏行为并响应，需要在Android和iOS设备上分别测试（若需严格防录屏，也可结合动态水印）

代码合并

data() {
	return {
		videoContext: null,
		watchTimer: null,
		timer: null,
		isss: true
	}
},
onLoad() {
 	let self = this;
	self.videoContext = uni.createVideoContext('myVideo')
},
onShow() {
	let self = this;
	// 获取设备平台信息
	const platform = uni.getSystemInfoSync().platform;
	// #ifdef MP-BAIDU	
  	//防录屏
	if (self.platform === 'android') {
		swan.disableUserScreenRecord({//API要求基础库 3.880.1+
			success: res => {
				console.log('disableUserScreenRecord success: ', res);
			}
		})
	}
	// iOS检测机制
	else if (self.platform === 'ios') {
		self.getScreenRecordingState();
	}
	// #endif
},
methods: {
	// wx-iOS录屏检测
	startScreenRecordingCheck() {
		let self = this;
		//设置一个定时器，定期检查录屏状态（每2秒一次）
		self.timer = setInterval(() => {
			wx.getScreenRecordingState({//API要求基础库2.11.0+
				success: (res) => {
					if (res.state === 'on') {//如果检测到录屏开启
						self.handleScreenRecording();
					}
				}
			});
		}, 2000);
	},
	// baidu-iOS录屏检测
	getScreenRecordingState() {
		let self = this;
		//仅在 iOS 上生效
		console.log(typeof swan.getScreenRecordingState)
		self.watchTimer = setInterval(() => {
			swan.getScreenRecordingState({//API要求基础库 3.880.1+
				success: res => {
					if (res.state === 'on' && self.isss) { //只弹一次弹窗
						self.handleScreenRecording();
					}
				}
			})
		}, 2000);
	},
	// 处理录屏行为
	handleScreenRecording() {
		let self = this;
		self.videoContext.pause();//停止播放视频
		self.isss = false;
		uni.showModal({//提示
			title: '安全警告',
			content: '此内容禁止录屏',
			showCancel: false,
			success: () => {
				uni.navigateBack()//返回上一页
			}
		});
	}
},
onUnload() {// 页面隐藏时
	let self = this;
	// 清除定时器
	if (self.timer) {
		clearInterval(self.timer);
		self.timer = null;
	}
	if (self.watchTimer) {
		clearInterval(self.watchTimer);
		self.watchTimer= null;
	}
    // #ifdef MP-WEIXIN
    // 释放保护
    if (wx.setVisualEffectOnCapture) {
      wx.setVisualEffectOnCapture({
        visualEffect: 'none',
        complete: () => console.log('录屏保护已释放')
      })
    }
    // #endif
    // #ifdef MP-BAIDU
    // 释放保护
    if (swan.disableUserScreenRecord) {
	  swan.enableUserScreenRecord({
		  success: res => {
		  	console.log('enableUserScreenRecord success: ', res)
		  }
	  });
    }
    // #endif
}