Share and Annotate PDFs

Add UI to Enable PDF Sharing

Add UI to enable PDF sharing for your users. Use role permissions to decide if you want to allow PDF sharing for users in a room. Note: Disable PDF sharing UI for users when there's an ongoing sharing session.

You can refer to the code snippet in our repository to learn more about how we built this. View Snippet

Add UI to Enable PDF Selection

Next, you need to prompt the user to provide input, either by selecting a local PDF file or providing a PDF URL. We also recommend implementing validation to handle scenarios such as:

1. Invalid local PDF file.
2. Invalid or non-PDF URL.

Check out the code snippet in our repository to see how we built this. View Snippet

Render the PDF and start sharing

Finally, add an iframe to the DOM and make sure it refrences the iframeRef from usePDFShare. In the snippet below, as a logical next step, we automatically initiate startSharing when a local PDF is selected or URL is provided.

import { useCallback, useState, useEffect } from "react";
import { usePDFShare } from "@100mslive/react-sdk";

export const PDFAnnotatorComponent = () => {
  // URL or File to the PDF. Use your own state management to set or reset the PDF config.
  const [pdfConfig, setPdfConfig] = useState(pdfileOrUrl);

  // Implement resetConfig to handle resetting the PDF configuration.
  const resetConfig = useCallback(() => {
    setPdfConfig(null);
  }, []);

  const { iframeRef, startPDFShare, stopPDFShare, isPDFSharingInProgress } =
    usePDFShare(resetConfig);

  useEffect(() => {
    (async () => {
      if (pdfConfig && !isPDFSharingInProgress) {
        try {
          await startPDFShare(pdfConfig);
        } catch (error) {
          resetConfig();
          console.log("Couldn't start PDF Sharing", error);
        }
      }
    })();
  }, [isPDFSharingInProgress, pdfConfig, resetConfig, startPDFShare]);

  return (
    <iframe
      ref={iframeRef}
      style={{
        width: "100%",
        height: "100%",
        border: 0,
        borderRadius: "0.75rem",
      }}
      allow="autoplay; clipboard-write;"
      referrerPolicy="no-referrer"
    />
  );
};

Stop Sharing

Through your UI, typically a button, enable the user who is currently sharing a PDF to stop when they desire.

import { usePDFShare } from "@100mslive/react-sdk";

const StopSharingButton = ({ pdfConfig, resetConfig }) => {
  const { stopPDFShare, isPDFSharingInProgress } = usePDFShare(resetConfig);

  const stopPdfSharing = () => {
    if (isPDFSharingInProgress && pdfConfig) {
      stopPDFShare();
      resetConfig();
    }
  };

  return <button onClick={stopPdfSharing}>Stop Sharing</button>;
};