yk-screenRecord.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="zzc_mol" v-if="isRecording"></view>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. isRecording: false
  9. }
  10. },
  11. created() {
  12. this.screenInit();
  13. },
  14. onUnload() {
  15. this.AllowScreenshots()
  16. },
  17. methods: {
  18. screenInit() {
  19. let _this = this;
  20. // #ifdef H5
  21. uni.showToast({
  22. title: '请在APP或者小程序环境下操作',
  23. icon: 'error'
  24. })
  25. // #endif
  26. // #ifndef H5
  27. uni.getSystemInfo({
  28. success: function(e) {
  29. // #ifdef APP-PLUS
  30. if (e.platform == 'android') {
  31. //注意:一旦开启禁止截屏/录屏后将会全局生效,关闭页面时记得放开允许截屏/录屏
  32. _this.NoscreenCapture();
  33. } else {
  34. //在APP IOS端截屏、录屏暂时没办法实现,可以寻求原生解决
  35. }
  36. // #endif
  37. // #ifdef MP-WEIXIN
  38. if (e.platform == 'android') {
  39. //微信小程序在安卓手机上 禁止截屏/录屏(注意:禁止后录屏动作还是会进行,但录屏后的视频是黑屏的)
  40. wx.setVisualEffectOnCapture({
  41. visualEffect: 'hidden', //传入 hidden 则表示在截屏/录屏时隐藏屏幕
  42. success: (res) => {
  43. console.log(res)
  44. },
  45. fail: (err) => {
  46. console.log(err)
  47. },
  48. complete: (res) => {
  49. console.log(res)
  50. }
  51. })
  52. } else {
  53. //微信小程序在IOS手机上,注意:目前微信小程序在ios上也只能通过监听录屏状态,然后通过添加view层来进行阻止,截屏暂时无法实现
  54. //监听用户录屏事件
  55. wx.onScreenRecordingStateChanged(function(res) {
  56. if (res.state == 'start') {
  57. _this.isRecording = true
  58. } else {
  59. _this.isRecording = false
  60. }
  61. })
  62. //查询用户是否在录屏
  63. wx.getScreenRecordingState({
  64. success: (res) => {
  65. if (res.state == 'on') {
  66. _this.isRecording = true
  67. } else if (res.state == 'off') {
  68. _this.isRecording = false
  69. }
  70. },
  71. fail: (err) => {
  72. _this.isRecording = false
  73. }
  74. })
  75. }
  76. // #endif
  77. }
  78. })
  79. // #endif
  80. },
  81. //安卓端禁止截屏
  82. NoscreenCapture() {
  83. let osname = plus.os.name;
  84. if (osname == "Android") {
  85. var activity = plus.android.runtimeMainActivity();
  86. plus.android.invoke(plus.android.invoke(activity, "getWindow"), "addFlags", 0x00002000);
  87. }
  88. },
  89. //安卓端允许截屏
  90. AllowScreenshots() {
  91. let osname = plus.os.name;
  92. if (osname == "Android") {
  93. var activity = plus.android.runtimeMainActivity();
  94. plus.android.invoke(plus.android.invoke(activity, "getWindow"), "clearFlags", 0x00002000);
  95. }
  96. }
  97. }
  98. }
  99. </script>
  100. <style>
  101. .zzc_mol {
  102. background: #000;
  103. width: 100%;
  104. height: 100%;
  105. position: fixed;
  106. z-index: 99999;
  107. top: 0;
  108. left: 0;
  109. }
  110. </style>