5_3-手机开播场景-PPT白板

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Introduction
  • 3.1 PLVStreamerPPTView

1 Feature Overview

The PPT & Whiteboard module includes features such as whiteboard, PPT display, and pen annotation. The PPT & Whiteboard display interface is encapsulated in the class PLVLSDocumentAreaView.

2 Usage Demo

To use the PPT & Whiteboard module, add the PLVLSStatusAreaView control to PLVLSStreamerViewController:

self.documentAreaView = [[PLVLSDocumentAreaView alloc] init];
self.documentAreaView.delegate = self;
[self.view addSubview:self.documentAreaView];

At the same time, PLVLSStreamerViewController must conform to the protocol PLVLSDocumentAreaViewDelegate and implement the following callbacks:

#pragma mark - PLVSDocumentAreaView Delegate

- (void)documentAreaView:(PLVLSDocumentAreaView *)documentAreaView openBrush:(BOOL)isOpen {
    // isOpen - YES：打开画笔隐藏聊天区域
    // isOpen - NO：打开画笔显示聊天区域
}

- (void)documentAreaView:(PLVLSDocumentAreaView *)documentAreaView changeFullScreen:(BOOL)isFullScreen {
    self.fullscreen = isFullScreen; // 布尔值 fullscreen 表示当前页面是否处于 ppt 全屏状态
    if (fullscreen) {
        [self.view insertSubview:self.documentAreaView aboveSubview:self.statusAreaView];
    } else { // 全屏时将 documentAreaView 控件插入到子视图的最顶部
        [self.view insertSubview:self.documentAreaView atIndex:0];
    }
}

And in the -viewWillLayoutSubviews method, layout PLVLSStatusAreaView as follows:

if (self.isFullscreen) {
    self.documentAreaView.frame = self.view.bounds;
} else {
    self.documentAreaView.frame = CGRectMake(PLVLSUtils.safeSidePad, 44, documentAreaViewWidth, ducomentViewHeight);
}

3 Implementation Introduction

The PPT & Whiteboard view PLVLSStatusAreaView mainly consists of the following controls, the most important of which is the PLVStreamerPPTView class responsible for whiteboard & PPT display:

@property (nonatomic, strong) PLVStreamerPPTView *pptView;          // PPT 功能模块视图
@property (nonatomic, strong) PLVLSDocumentNumView *pageNum;        // 页码
@property (nonatomic, strong) PLVLSDocumentToolView *toolView;      // 控制条视图
@property (nonatomic, strong) PLVLSDocumentBrushView *brushView;    // 画笔条视图

3.1 PLVStreamerPPTView

PLVStreamerPPTView is located in the PolyvLiveCommonModule folder. Its UI consists of an instance of WKWebView, relying on the SDK's PLVWebViewBridge class for native-to-H5 communication to implement various interactive features.

PLVStreamerPPTView exposes the following read-only properties to obtain the status attributes of the PPT & Whiteboard view:

@property (nonatomic, assign, readonly) NSInteger autoId;       // ppt id, 0是白板
@property (nonatomic, assign, readonly) NSInteger currPageNum;  // 当前页码
@property (nonatomic, assign, readonly) NSInteger totalPageNum; // 总页码
@property (nonatomic, assign, readonly) NSUInteger pptStep;     // 当前文档所处于动画步数

Provides the following methods for implementing native-to-H5 communication:

/// 设置画板是否处于可绘制状态
/// @param open  打开或关闭画板
- (void)setPaintStatus:(BOOL)open;

/// 设置画笔类型
/// @param type  line - 自由笔；text - 文字；arrowLine - 箭头
- (void)setDrawType:(PLVWebViewBrushPenType)type;

/// 完成文本输入
- (void)changeTextContent:(NSString *)content;

/// 修改画笔颜色
/// @param hexString  RGB色值，如红色为“#FF0000”
- (void)changeColor:(NSString *)hexString;

/// 进入画笔删除状态
- (void)toDelete;

/// 删除所有画笔
- (void)deleteAllPaint;

/// 告诉 h5 现在开始上课，h5 会清空画板
/// @param jsonDict 开始推流时发送的 socket 消息
- (void)setSliceStart:(NSDictionary *)jsonDict;

Provides the following methods for completing functions such as whiteboard and document switching and page turning:

/// 白板、文档间的切换方法
/// 如果切换的是文档，切换成功后触发回调 '-jsbridge_documentChangeWithAutoId:imageUrls:'
/// @param autoId  切换的文档的 autoId，如果是白板 autoId 为 0
/// @param pageNumber  切换到文档的第几页
- (void)changePPTWithAutoId:(NSUInteger)autoId pageNumber:(NSInteger)pageNumber;

/// 当前白板/文档下的翻页方法
- (void)turnPage:(BOOL)isNextPage;

/// 新增白板方法
- (void)addWhiteboard;

Defines the protocol PLVStreamerPPTViewDelegate, providing the following callbacks for UI updates:

@protocol PLVStreamerPPTViewDelegate <NSObject>

///  PPT加载完成准备就绪回调
///
/// @param streamerPPTView   PPT视图对象
- (void)streamerPPTViewDidReady:(PLVStreamerPPTView *)streamerPPTView;

///  PPT加载失败回调
///
/// @param streamerPPTView   PPT视图对象
- (void)streamerPPTView:(PLVStreamerPPTView *)streamerPPTView loadFailWithError:(NSError *)error;

/// webView 上准备输入文字时回调
/// @param streamerPPTView PPT视图对象
/// @param inputText 输入文本
/// @param textColor 文本颜色字符串 格式：#FFFFFF
- (void)streamerPPTView:(PLVStreamerPPTView *)streamerPPTView inputWithText:(NSString *)inputText textColor:(NSString *)textColor;

/// 切换到新文档时的回调
/// 用于切换文档时更新文档缩略图
/// @param streamerPPTView PPT视图对象
/// @param autoId 文档autoId
/// @param imageUrls 文档页面缩略图
- (void)streamerPPTView:(PLVStreamerPPTView *)streamerPPTView changeWithAutoId:(NSUInteger)autoId imageUrls:(NSArray *)imageUrls;

/// 文档、白板页码变化的回调、
///
/// @param streamerPPTView  PPT视图对象
/// @param autoId 文档autoId
/// @param pageNumber 文档当前页码
- (void)streamerPPTView:(PLVStreamerPPTView *)streamerPPTView pageStatusChangeWithAutoId:(NSUInteger)autoId
             pageNumber:(NSUInteger)pageNumber totalPage:(NSUInteger)totalPage pptStep:(NSUInteger)step;

@end