uniapp微信小程序与百度小程序防止录屏功能_微信小程序全局防截屏和录屏

防录屏技术背景与重要性

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

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

关键点
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}