JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<body>
  <video controls>
    <source src="https://tekeye.uk/html/images/Joren_Falls_Izu_Jap.mp4" type="video/mp4" />
  </video>

  <script src="https://sdk.morphcast.com/mphtools/v1.1/mphtools.js" data-config="cameraPrivacyPopup, compatibilityUI, compatibilityAutoCheck"></script>
  <script src="https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Trova il primo tag video nel DOM
      let videoElement = document.querySelector('video');

      if (videoElement) {

        // Wait for the video to be ready (loaded) before running the test
        videoElement.addEventListener('loadeddata', function() {
          testCanvasTaintWithVideo(videoElement);

          CY.loader()
            .source(CY.createSource.fromVideoElement(videoElement))
            .licenseKey("9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b")
            .addModule(CY.modules().FACE_AROUSAL_VALENCE.name, {
              smoothness: 0.70
            })
            .addModule(CY.modules().FACE_ATTENTION.name, {
              smoothness: 0.83
            })
            .addModule(CY.modules().DATA_AGGREGATOR.name, {
              initialWaitMs: 2000,
              periodMs: 1000
            })
            .load()
            .then(({
              start,
              stop
            }) => {
              videoElement.addEventListener('play', function() {
                testCanvasTaintWithVideo(videoElement);
                // Code to execute when the video starts playing
                console.log("The video has started playing.");
                // For example, displaying an alert (optional)
                // alert("The video is now playing.");

                start();
              });
            });


          window.addEventListener(CY.modules().EVENT_BARRIER.eventName, (evt) => {
            console.log('EVENT_BARRIER result', evt.detail);
          });

         ...