在CEF中给 getDisplayMedia 增加区域捕获(Region Capture)功能

11 篇文章 12 订阅

Chromium(以及CEF)以及Chrome并没有提供区域捕获功能(注:有一种消息表明Chrome M97可能会添加),但因为公司产品需要,所以就阅读了一下Chromium、WebRTC的源码,上个月花了几天时间,在Windows上为CEF添加了区域捕获功能,版本基于CEF 4472(Chromium 91)。

用法也比较简单:

const displayMediaOptions = {
  audio: true,
  video: true,
  regionShare: true
};

const startButton = document.getElementById('startButton');
startButton.addEventListener('click', () => {
  navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
      .then(handleSuccess, handleError);
});

其中 displayMediaOptions 里面那个 regionShare属性是我给 MediaStreamConstraints 添加的。
通过这种方式,前端同学就可以很方便地启动区域共享。下面是CEF中的运行演示:

在这里插入图片描述

用于选择区域的那个窗口我是用Duilib写的,捕捉范围会随窗口大小改变而改变。另外,Chromium的屏幕/窗口捕捉在Windows上有好多种实现,如GDI、DirectX、WGC等,由于时间关系,我目前只写了一份GDI的版本,以后有时间再写一下其他版本。另外还有macOS的后面也抽空实现一下。

修改的源码比较杂乱,blink、WebRTC都有些改动,还没有整理,后面整理好了再贴吧。

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值