initialize method

Future<HTMLCanvasElement?> initialize(MediaStream localStreamScreen)

Initialize the annotation capture system with screen share stream.

localStreamScreen is the flutter_webrtc MediaStream from screen sharing. Returns the annotation canvas element that can be drawn to.

Implementation

Future<web.HTMLCanvasElement?> initialize(
    MediaStream localStreamScreen) async {
  try {
    // Get video track settings for dimensions
    final videoTracks = localStreamScreen.getVideoTracks();
    if (videoTracks.isEmpty) {
      return null;
    }

    final videoTrack = videoTracks.first;

    // Get dimensions from track settings
    // Access the settings from the underlying JS object
    final jsTrack = (videoTrack as dynamic).jsTrack as web.MediaStreamTrack;
    final settings = jsTrack.getSettings();

    // settings.width and settings.height are int, not nullable
    _width = settings.width > 0 ? settings.width : 1920;
    _height = settings.height > 0 ? settings.height : 1080;

    // Clone the screen share track (React: clonedStreamScreen)
    final clonedTrack = jsTrack.clone();
    _clonedScreenStream = web.MediaStream();
    _clonedScreenStream!.addTrack(clonedTrack);

    // Create hidden video element for screen playback (React: screenVideo)
    _screenVideo = web.HTMLVideoElement()
      ..width = _width
      ..height = _height
      ..autoplay = true
      ..muted = true
      ..playsInline = true
      ..style.display = 'none'
      ..style.position = 'absolute'
      ..style.left = '-9999px';

    // Set the cloned stream as video source
    _screenVideo!.srcObject = _clonedScreenStream;

    // Add to DOM (required for video playback)
    web.document.body?.appendChild(_screenVideo!);

    // Wait for video to be ready
    await _waitForVideoReady();

    // Create main canvas for combining video + annotations (React: mainScreenCanvas)
    _mainCanvas = web.HTMLCanvasElement()
      ..width = _width
      ..height = _height
      ..style.display = 'none'
      ..style.position = 'absolute'
      ..style.left = '-9999px';

    web.document.body?.appendChild(_mainCanvas!);
    _mainCtx = _mainCanvas!.context2D;

    // Create annotation canvas for drawing (React: canvasScreenboard)
    _annotationCanvas = web.HTMLCanvasElement()
      ..width = _width
      ..height = _height
      ..style.display = 'none'
      ..style.position = 'absolute'
      ..style.left = '-9999px';

    web.document.body?.appendChild(_annotationCanvas!);

    return _annotationCanvas;
  } catch (e) {
    return null;
  }
}