搭建Flutter Web学习平台：如何禁用截图与录屏功能？

首先要明确：Web端无法完全阻止截图/录屏——系统级工具、第三方录屏软件不受浏览器控制，但可以通过以下手段增加操作门槛、降低非法复用的价值：

1. 动态水印叠加 #

用Flutter的Stack组件在核心内容上层添加低透明度的动态水印，即使被截图也能溯源或降低清晰度：

Stack(
  children: [
    // 你的核心内容（文本、图片、视频）
    YourContentWidget(),
    // 动态水印（可替换为用户唯一标识）
    Positioned.fill(
      child: Opacity(
        opacity: 0.12,
        child: Transform.rotate(
          angle: -0.2,
          child: Text(
            'USER_12345',
            style: TextStyle(
              fontSize: 28,
              color: Colors.grey.shade600,
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
      ),
    ),
  ],
)

2. 监听页面状态触发模糊 #

通过Web API监听页面可见性，当页面被隐藏（比如用户切换窗口、开始录屏）时，给内容添加模糊滤镜：

import 'dart:html' as html;
import 'dart:ui' as ui;

bool _isBlurred = false;

@override
void initState() {
  super.initState();
  // 监听页面可见性变化
  html.document.addEventListener('visibilitychange', (event) {
    setState(() {
      _isBlurred = html.document.visibilityState == 'hidden';
    });
  });
}

@override
Widget build(BuildContext context) {
  return BackdropFilter(
    filter: _isBlurred 
        ? ui.ImageFilter.blur(sigmaX: 10, sigmaY: 10) 
        : ui.ImageFilter.blur(sigmaX: 0, sigmaY: 0),
    child: YourContentWidget(),
  );
}

3. 禁用右键与文本选择 #

通过JS拦截右键菜单和文本选择，阻止用户快速复制或右键截图：

import 'dart:js' as js;

void disableContextActions() {
  // 禁用右键菜单
  js.context.callMethod('addEventListener', [
    'contextmenu',
    (js.JsEvent event) => event.preventDefault(),
  ]);
  // 禁用文本选择
  js.context.callMethod('addEventListener', [
    'selectstart',
    (js.JsEvent event) => event.preventDefault(),
  ]);
}

// 在initState中调用
@override
void initState() {
  super.initState();
  disableContextActions();
}

4. 检测屏幕共享行为 #

利用Web的getDisplayMedia API检测是否存在屏幕共享/录屏操作，触发后隐藏核心内容或弹出提示：

import 'dart:js' as js;

Future<bool> hasScreenRecording() async {
  try {
    final stream = await js.context
        .callMethod('navigator')
        .callMethod('mediaDevices')
        .callMethod('getDisplayMedia', [{'video': true}]);
    // 停止流避免持续占用资源
    stream.getTracks().forEach((track) => track.stop());
    return true;
  } catch (_) {
    // 用户拒绝授权或无录屏行为
    return false;
  }
}

// 使用示例
void checkAndHandleRecording() async {
  if (await hasScreenRecording()) {
    setState(() => _showProtectiveOverlay = true);
  }
}

5. 视频内容DRM加密 #

对视频内容使用DRM（如Widevine）加密，只有授权用户可播放，即使被录屏也可能呈现黑屏或加密状态：

final videoController = VideoPlayerController.networkUrl(
  Uri.parse('你的加密视频地址'),
  drmConfiguration: DrmConfiguration(
    widevine: DrmLicenseConfiguration(
      licenseUrl: '你的DRM授权接口地址',
    ),
  ),
);

关键提醒 #

Web环境下不存在绝对的防截图/录屏方案，以上手段都是增加非法获取成本的方式。核心还需配合用户协议、版权声明约束，同时通过水印溯源、内容加密等方式降低非法传播的价值。

内容的提问来源于stack exchange，提问作者Nitin Naik