屏幕截图

功能说明

用户在某些特定场景下需要在会议过程中进行屏幕截图并保存。

通过平台 API，开发者可实现截图操作并将图片保存到本地。

实现方法

通过如下两种方式，可以实现将用户的某一帧画面截图为图片进行后续处理，具体可以结合业务场景选择其一即可：

方式一

在使用小鱼Electron SDK开会过程中，会通过渲染Layout列表数据显示每个人的画面，此时，每个人的画面已经通过​​setVideoRender​​方法将业务上提供的Canvas元素和内部的渲染库绑定起来，SDK内部会通过WebGL将YUV原始数据显示到业务提供的Canvas元素上。

所以业务上如果需要实现截图，可以通过​​sourceId​​​、​​id​​​、​​key​​等形式，获取想要截图的参会者Canvas元素，通过Canvas转图片功能得到图片数据，进而可以保存或者上传服务器操作；

此方式实现较为简单，推荐业务上使用此方式截图；

方式二

SDK提供了获取帧数据接口，可以获取到原始的画面视频帧YUV Buffer数据，业务上需要截图时，可以主动调用获取到原始数据，通过一定的方式渲染为图片进而保存或者上传到服务器操作；

此方式实现较为复杂，推荐业务上使用小鱼SDK提供的​​Render​​库进行YUV数据渲染到Canvas上，方便用户通过Canvas转图片操作；

示例代码

方式二示例代码：

import { Render } from '@xylink/xy-electron-sdk';

// 获取某个用户的原始YUV帧数据
const videoFrame = xyRTC.getVideoFrame('userXXXSourceId', false);
const { buffer, width, height, rotation } = videoFrame;

// 实例化 Render 模块
const render = new Render(canvasElement);

// 通过render库渲染到Canvas元素上
render.draw(buffer, width, height, rotation);

// ...后续可以通过Canvas转图片获取截图数据

API 参考

1. ​​getVideoFrame​​
2. ​​Render​​
3. ​​CanvasRenderingContext2D: drawImage() ​​