首页 > 其他分享 >Element Capture API

Element Capture API

时间:2024-04-11 16:12:26浏览次数:23  
标签:Capture canvas const Element height API video dialog document

Element Capture API DOM(元素)节点捕获

捕获并记录一个特定的 HTML 元素 (能剪裁并去除那些遮盖和被遮盖的内容)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>Element Capture</title>
    <style>
      .box {
        overflow-y: scroll;
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        box-sizing: border-box;
        resize: both;
      }
      .dialog {
        isolation: isolate;
        position: fixed;
        top: 20%;
        left: 20%;
        width: 200px;
        height: 100px;
        margin: 0;
        /* display: flex;
        justify-content: center;
        align-items: center; */
        font-size: 20px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h1>Element Capture</h1>
    <hr />
    <div class="box">
      <ul>
        <li class="item">1. Lorem ipsum dolor sit amet.</li>
        <li class="item">2. Eum voluptates eos maiores sed.</li>
        <li class="item">3. Inventore itaque placeat aliquam! Laborum.</li>
        <li class="item">4. Odit facilis totam ullam dignissimos?</li>
        <li class="item">5. A dolorem repellendus nesciunt iusto?</li>
        <li class="item">6. Magni cupiditate facere voluptatum aspernatur?</li>
        <li class="item">7. Voluptates minima ullam laudantium laboriosam.</li>
        <li class="item">8. Explicabo officia odit doloremque blanditiis.</li>
        <li class="item">9. Voluptatem ea sed itaque officiis.</li>
        <li class="item">10. Impedit culpa incidunt alias maiores!</li>
      </ul>
    </div>
    <hr />
    <button type="button" id="btn-dialog">show</button>
    <dialog id="dialog" class="dialog">
      <header>
        <b>dialog test title</b>
      </header>
    </dialog>
    <hr />

    <script>
      const box = document.querySelector('.box');
      const dialog = document.querySelector('#dialog');
      const dialogBtn = document.querySelector('#btn-dialog');
      let num = 0, timerId = null;

      // 监听按钮点击事件,显示或隐藏 dialog 元素。
      dialogBtn.addEventListener('click', () => {
        // dialog.showModal() / dialog.close()
        dialog.toggleAttribute('open');
        dialogBtn.textContent = dialog.open ? 'hide' : 'show';

        if (dialog.open) {
          clearInterval(timerId);
          timerId = null;
          
          captureElement().catch((err) => console.log(err));
          
          timerId = setInterval(() => {
            dialog.children[0].children[0].textContent = num++;
          }, 500);
        }
      });

      async function captureElement() {
        // 请求用户授权,开始捕获当前的标签页。
        const stream = await navigator.mediaDevices.getDisplayMedia({
          preferCurrentTab: true,
        });
        const [track] = stream.getVideoTracks();
        console.log('track => ', track);

        // 将 captureTarget 与一个新的 RestrictionTarget 关联起来
        const restrictionTarget = await RestrictionTarget.fromElement(dialog);

        // 开始使用 RestrictionTarget 限制自我捕捉的视频轨道。
        await track.restrictTo(restrictionTarget);

        const video = document.createElement('video');
        video.autoplay = true;
        video.width = dialog.clientWidth;
        video.height = dialog.clientHeight;

        video.srcObject = stream;

        document.body.appendChild(video);

        // 捕获视频轨道的画面,并将其显示在 canvas 中。
        // const canvas = document.createElement('canvas');
        // const ctx = canvas.getContext('2d');
        // const draw = () => {
        //   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        //   requestAnimationFrame(draw);
        // };
        // requestAnimationFrame(draw);

        // // 显示 canvas 元素,并将其置于 dialog 元素的顶层。
        // canvas.width = video.width * devicePixelRatio;
        // canvas.height = video.height * devicePixelRatio;
        // canvas.style.width = `${video.width}px`;
        // canvas.style.height = `${video.height}px`;

        // document.body.appendChild(canvas);

        // 监听 dialog 元素的关闭事件,停止捕获视频轨道。
        dialog.addEventListener('close', () => {
          track.stop();
          document.body.removeChild(video);
        });

        // 监听视频轨道的结束事件,移除 video 元素。
        track.addEventListener("ended", () => {
          document.body.removeChild(video);
        })
      }
    </script>
  </body>
</html>

标签:Capture,canvas,const,Element,height,API,video,dialog,document
From: https://www.cnblogs.com/chlai/p/18129444

相关文章

  • Protobuf - Designing Effective APIs
       ......
  • 2-64. 使用 Unity 最新 ObjectPool API 制作对象池
    创建PoolManager修改EventHandler修改CropDetails修改Crop修改PoolManager修改CropDataList_SO修改PoolManager作业做好Tree02项目相关代码代码仓库:https://gitee.com/nbda1121440/farm-tutorial.git标签:20240411_1542......
  • 发票识别+查验API-让繁琐查验成为过去式
    互联网时代,随着电子商务的蓬勃发展,无论是纸质增值税发票还是电子增值税发票使用量都在激增,也正因如此,让部分不法分子看到了“商机”,利用伪造、变造发票进行逃税、骗税等违法行为,严重扰乱了市场秩序,侵害了消费者权益。为防止假票、错票等违规发票入账现象的发生,越来越多的企业通过......
  • 定位Api食用方法
    定位Api食用方法申请接口微信小程序接口地址:小程序(qq.com)1.先在小程序后台,补充相关信息2.按照以下路径找到“getLocation”接口[开发]→[开发管理]→[接口设置]选择“开通”,并补充相关信息,其中演示图片请准备齐全,不然会以“不充分为理由打回”失败:*......
  • el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-cha
        写这篇博客的原因是前段时间做了一个数据列可变的表格,同时需要实现在网页中更新了数据列之后,能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序(列数据是通过计算获得,并且可以在页面中修改,在此基础上实现数据变化后实时更新)。请直接跳到......
  • 加密API研究
    0查找各种标准的原始文档,研究学习(至少包含CryptoAPI,PKCS#11,GMT0016-2012,GMT0018-2012)(1)CryptoAPI:CryptoAPI是微软Windows系统提供的一个应用程序编程接口,旨在让开发者能够轻松地对敏感数据进行加密或数字签名,以保护用户的私钥信息。这套API提供了一系列函数,而实际的加密工......
  • 淘宝详情API接口文档(java)get调用
    淘宝详情API接口是用于获取淘宝商品详细信息的接口,它允许开发者通过发送请求,获取商品的描述、价格、评价等信息。下面是一个关于淘宝详情API接口的示例文档,包括接口地址、请求参数、响应参数等内容。淘宝详情API接口文档一、接口地址https://api-gw.onebound.cn/taobao/item_ge......
  • ansible python API
    version:v2.9官方示例如下:点击查看代码#!/usr/bin/envpythonfrom__future__import(absolute_import,division,print_function)__metaclass__=typeimportjsonimportshutilimportansible.constantsasCfromansible.executor.task_queue_managerimportT......
  • Cisco APIC 6.0(5h) M - 应用策略基础设施控制器
    CiscoAPIC6.0(5h)M-应用策略基础设施控制器ApplicationPolicyInfrastructureController(APIC)请访问原文链接:CiscoAPIC6.0(5h)M-应用策略基础设施控制器,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org思科应用策略基础设施控制器(APIC)CiscoNX-OS......
  • App Store 警告 ITMS-91053: Missing API declaration
    问题:app虽然成功上架AppStore,但是邮件提示了如下警告:解决:解决方法是添加隐私清单文件。参考官方说明:官方文档其它相关链接:StackOverflow中关于这个问题的讨论这位作者分享了如何解决该问题这篇文章提供了解决该问题详细的指南......