在音视频通话场景中，部分用户希望可以通过视频截图功能截取实时视频流画面，以便后续的存档分析、事件备忘、证据留存等等。NERTC SDK 提供视频截图功能，本文为您介绍如何通过 takeLocalSnapshot 和 takeRemoteSnapshot 方法进行实时截图。

功能介绍

NERTC SDK 支持针对实时视频流进行截图，包括本地主流和辅流画面、远端主流和辅流画面。

视频截图适用于在线教育以及主播直播等场景中，具体场景说明如下：

• 在线课堂场景中，学生对课件或板书内容进行截图，截图作为笔记保存。
• 互动直播场景中，可以通过截图对直播画面进行内容安全审核。

注意事项

• 视频截图功能只截取实时视频流数据，截图中 不包含画布水印 信息，但可以包含编码水印信息。
• 截图相关接口调用时机如下，如果在其他时机调用截图相关接口，会报错 ERR_INVALID_OPERATION，表示当前不支持该操作。

API 调用时序

sequenceDiagram
    participant App
    participant NERtcSDK
    Note over App, NERtcSDK: 加入房间前截图

    App->>NERtcSDK: startPreview
    Note left of App: 本地视频截图
    App->>NERtcSDK: takeLocalSnapshot
    NERtcSDK-->>App: 图片的 base64 数据

    Note over App, NERtcSDK: 加入房间后截图

    App->>NERtcSDK: enableLocalVideo/startScreenCapture
    Note left of App: 本地视频截图
    App->>NERtcSDK: takeLocalSnapshot
    NERtcSDK-->>App: 图片的 base64 数据
    NERtcSDK-->> App: onUserVideoStart/onUserSubStreamVideoStart
    Note left of App: 远端视频截图
    App->>NERtcSDK: takeRemoteSnapshot
    NERtcSDK-->> App: 图片的 base64 数据

配置步骤

1. 根据需求调用截图相关接口，实现视频流截图。

   • 本地视频主流截图：

     • 加入房间前，在调用 startPreview(kNERtcVideoStreamTypeMain) 方法开启视频预览后，调用 takeLocalSnapshot 方法，并设置 NERtcVideoStreamType 为 kNERTCVideoStreamMain 截取本地主流画面。

     • 加入房间后，在调用 enableLocalVideo(kNERtcVideoStreamTypeMain) 开启本地摄像头采集后，调用 takeLocalSnapshot 方法，并设置 NERtcVideoStreamType 为 kNERTCVideoStreamMain 截取本地主流画面。

   • 本地视频辅流截图：

     • 加入房间前，在调用 startPreview(kNERTCVideoStreamSub) 方法开启视频预览后，调用 takeLocalSnapshot 方法，并设置 NERtcVideoStreamType 为 kNERtcVideoStreamTypeSub 截取本地辅流画面。

     • 加入房间后，在调用 enableLocalVideo(kNERTCVideoStreamSub) 开启本地摄像头采集后，调用 takeLocalSnapshot 方法，并设置 NERtcVideoStreamType 为 kNERtcVideoStreamTypeSub 截取本地辅流画面。

     • 加入房间后，在调用 startScreenCapture 方法启用屏幕共享后，调用 takeLocalSnapshot 方法，并设置 NERtcVideoStreamType 为 kNERtcVideoStreamTypeSub 截取本地辅流画面。

   • 远端视频主/辅流截图：

     在分别收到 onUserVideoStart 与 onUserSubStreamVideoStart 回调后，调用 takeRemoteSnapshot 方法截取远端视频流画面，截图时可以通过 NERtcVideoStreamType 指定截取的视频流是主流还是辅流。

2. 通过回调的方式获取截图文件。

   截图画面数据以 base64 形式返回。

Demo 源码

您可以下载 Demo 源码，参考截图功能的示例代码（1v1Call.nvue），体验功能实现视频截图。详情请参考 下载 SDK 和示例代码。

示例代码

JavaScript//本地视频画面截图
this.engine.takeLocalSnapshot(NERtcVideoStreamType.MAIN).then(result=>{
    if(result.img){
        const imgBase64 = result.img
    } else {
        console.log('本地截图失败原因: ', result.errorCode)
    }
})

//远端截图
//本地视频画面截图
this.engine.takeRemoteSnapshot({
    userID: 100, //number格式的userID
    userStringID: '100', //string格式的userID,针对userID超过number范围的场景
    videoStreamType: NERtcVideoStreamType.MAIN
}).then(result=>{
    if(result.img){
        const imgBase64 = result.img
    } else {
        console.log('本地截图失败原因: ', result.errorCode)
    }
})

API 参考

方法	功能描述
takeLocalSnapshot	截取本地视频流画面
takeRemoteSnapshot	截取远端视频流画面