【Web API系列】使用getDisplayMedia来实现录屏功能

简介: 【Web API系列】使用getDisplayMedia来实现录屏功能



前言

Web API经过长期的发展,尤其是最近,发展相当迅猛,现在已经支持很多功能了,一些原生就支持的功能也是做的相当好,这也带来了现在一些跨端应用的升级。有许多跨端的App框架可以考虑,就比如Tauri2.0就开启了跨端,又或者Uni X,现在也是在做原生级别的跨端应用框架。

最近用了好多相关内容,所以将其分享给大家。

本文直接开始使用Web API中MediaDevices的getDisplayMedia方法来实现录屏或直播效果。(如果你有兴趣可以上后探索探索)

如果你对这个API本身很感兴趣,建议看看原文


一、认识getD该处使用的url网络请求的数据。

—isplayMedia

getDisplayMedia方法是浏览器Web API中MediaDevices的一个函数。它允许网页开发者在浏览器中捕获和共享用户设备(如屏幕、窗口或摄像头)的媒体内容。

通过调用getDisplayMedia方法,网页开发者可以请求用户允许共享屏幕、窗口或摄像头的权限。一旦用户授权,网页开发者就可以在网页中获取媒体流,并将其用于实时通信、视频录制、屏幕分享等功能。

使用getDisplayMedia方法的一般步骤如下:

  1. 调用getDisplayMedia方法,传递一个MediaStreamConstraints对象作为参数,该对象描述了要请求的媒体类型和约束条件。
  2. 如果用户允许共享媒体内容,则返回一个Promise对象,该Promise对象解析为一个MediaStream对象。如果用户拒绝共享或硬件不可用,则Promise对象会被拒绝。
  3. 使用返回的媒体流进行进一步的操作,如获取媒体流中的轨道,显示在网页中,发送到服务器等。

getDisplayMedia方法该处使用的url网络请求的数据。

—通常与其他媒体相关的API(如MediaRecorder和WebRTC)结合使用,以便实现功能丰富的实时通信和多媒体应用程序。

二、使用步骤

经过我查找getDisplayMedia的相关资料,getDisplayMedia的使用方法基本上可以分为两种:

  1. 获取流,然后设置到一个新建的video标签,然都对video的流进行处理。
  2. 获取流,然后使用MediaStreamTrackProcessor转换为视频帧进行处理。

方法2会有更多的用处,比如实现在线剪辑,批量剪辑,以及AI剪辑都有很大的帮助。除此以外,还有另一种使用stream API的通道写法,但是我写了怎么也不生效,如果有大佬还麻烦请帮我看看怎么回事。

1.使用方法一实现录屏

方法一其实质就是将视频源直接设置到video标签,然后video标签会自动处理一些数据,算是比较常用的方式,代码如下

// 获取canvas元素
let canvas = document.getElementById('canvas');
// 获取2d上下文
let ctx = canvas.getContext('2d');
// 创建video标签
let video = document.createElement('video');
// 异步或者不异步都行,选择你喜欢的一种方式
async function start() {
    const userStream = await navigator.mediaDevices.getDisplayMedia({
      // 开启视频
        video: true,
        // 关闭音频,选择适合你的
        audio: false
    });
    // video标签的源设置为获取到的流
    video.srcObject = userStream;
    // 播放视频
    video.play();
    // 请求动画帧
    window.requestAnimationFrame(frame);
}
// 这里是每帧进行的处理
frame = () => {
    if (video.readyState == video.HAVE_ENOUGH_DATA) {
        canvas.hidden = false;
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // 做其他事情,比如绘制二维码或者文字或者扫描二维码,只要你有想法
    }
    window.requestAnimationFrame(frame);
}
function stop(){
    video.srcObject.getTracks().forEach((track) => track.stop());
}

2.使用方法二实现录屏

方法二是官方给出的结合stream API之前的一种死循环的方式来读取视频流的每帧,然后绘制到canvas。

// 获取canvas元素
let canvas = document.getElementById('canvas');
// 获取2d上下文
let ctx = canvas.getContext('2d');
// 创建video标签
let video = document.createElement('video');
// 异步或者不异步都行,选择你喜欢的一种方式
const track = null;
async function start() {
    const userStream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: false
    });
    track = userStream.getVideoTracks()[0];
    const processor = new MediaStreamTrackProcessor(track);
    const reader = processor.readable.getReader();
    while (true) {
        const {done, value} = await reader.read();
        if (done) {
            break;
        }
        const frame = value;
        // 这里对每帧进行处理
        ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
        frame.close();
    }
}
function stop(){
    track.stop();
}

3. 运行效果

延伸


  1. 要想实现完整的录屏功能,还需要实现保存录像文件等功能,在后面如果接触到了文件操作等,我会详细的写如何将录制的文件保存下来。 如果你现在就有兴趣想要研究,建议看前面的MDN
  2. 该功能可以使用谷歌的stream api来做,但是我的代码一直不能正常运行,希望能有大佬帮我看看。
  3. 除了Stream API,实际上还可以用rxjs做,目前我也在研究中,如果有了结果我会发另一篇文章来介绍如何使用rxjs来实现,rxjs对于流操作还是比较擅长的。
目录
相关文章
|
17天前
|
JSON JavaScript 数据格式
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
33 1
|
27天前
|
JSON API 数据库
解释如何在 Python 中实现 Web 服务(RESTful API)。
解释如何在 Python 中实现 Web 服务(RESTful API)。
22 0
|
2月前
|
IDE Java API
使用Java Web技术构建RESTful API的实践指南
使用Java Web技术构建RESTful API的实践指南
|
27天前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
1月前
|
缓存 监控 API
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
47 0
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
45 0
|
1月前
|
JSON API 数据格式
构建高效Python Web应用:Flask框架与RESTful API设计实践
【2月更文挑战第17天】在现代Web开发中,轻量级框架与RESTful API设计成为了提升应用性能和可维护性的关键。本文将深入探讨如何使用Python的Flask框架来构建高效的Web服务,并通过具体实例分析RESTful API的设计原则及其实现过程。我们将从基本的应用架构出发,逐步介绍如何利用Flask的灵活性进行模块化开发,并结合请求处理、数据验证以及安全性考虑,打造出一个既符合标准又易于扩展的Web应用。
603 4
|
2月前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门
|
2月前
|
数据挖掘 API 数据处理
获取商品详情信息API接口:1688开放平台功能解析
首先,要获取商品详情信息,开发者需要向1688开放平台申请相应的权限,并遵循其调用规则。在调用商品详情信息API接口时,需要传入相应的请求参数,如商品ID、调用时间戳、密钥等。这些参数对于确保接口的正常运行至关重要。
|
2月前
|
API 网络架构
解释 RESTful API,以及如何使用它构建 web 应用程序。
解释 RESTful API,以及如何使用它构建 web 应用程序。
86 0