IOS技术分享| anyRTC 互动白板场景实现

Posted 2022-02-05 anyRTC

前言

互动白板提供一整套完整的互动白板解决方案，客户端 SDK 覆盖 ios、android、Web 等主流平台，同时提供完整的服务端配套功能，可用于在线教育、在线会议、协作办公、在线互动娱乐等场景。

方案优势

• 超低延时

我们自研引擎和算法，减少传输冗余数据，白板操作延迟低至 100 ms，节约带宽资源的同时，打造真正无感知的实时互动体验。

服务部署于全球多个节点，通过就近接入、智能路由等控制策略，给不同地域的用户带来同样顺畅的体验。

• 支持多平台，集成简单

互动白板 SDK 覆盖 Web、Android、iOS 等主流平台，几行代码即可快速接入。

• 灵活组合

互动白板 SDK 作为独立、可自定义的白板产品，灵活易用，可满足不同场景的需求:

可与 音视频SDK、信令SDK等产品搭配使用，丰富应用的功能，详见anyRTC 文档。

平台支持

平台	体验	源码
Web	在线体验	ARBoard-Web（Github 开源项目）
Android	前往下载	ARBoard-Android（Github 开源项目）
iOS	App Store 下载	ARBoard-iOS（Github 开源项目）

新春献礼，钜惠来袭

详见 anyRTC 官网

互动白板

效果预览

App Store 体验

点击下载互动白板

源码下载

点击跳转 Github

开发环境

• 开发工具：Xcode13

• 开发语言：Swift

• 实现：互动白板相关。

核心代码

实例化白板对象

    func initializeBoard() 
        boardKit = ARBoardKit(engineWithAppId: AppID, delegate: self)
        
        let boardView = boardKit.getBoardRenderView()
        boardView.frame = view.bounds
        view.insertSubview(boardView, at: 0)

        boardKit.joinChannel(byToken: nil, channelId: channelId, uid: localUid)  [weak self] _, _ in
            boardKit.setDrawEnable(true)
            self?.isJoin = true
            print("joinChannel")
        
    

白板菜单

    @objc func didClickMenu() 
        view.endEditing(true)
        
        if isJoin 
            menuVc.view.frame = CGRect(x: isMenuOn ? 0 : -288, y: 0, width: ARScreenWidth, height: ARScreenHeight - (isFullScreen() ? 88 : 64))
            isMenuOn.toggle()
            if isMenuOn 
                view.addSubview(menuVc.view)
                addChild(menuVc)
            
            
            UIView.animate(withDuration: 0.2) 
                self.menuVc.view.x = self.isMenuOn ? 0 : -288
             completion:  _ in
                if !self.isMenuOn 
                    self.menuVc.view.removeFromSuperview()
                    self.menuVc.removeFromParent()
                
            
         else 
            print("Join Channel first")
        
    

白板操作

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) 
        let menuItem = menus[indexPath.section].rows[indexPath.row]
        if menuItem.identifier.count != 0 
            guard let toolVc = storyboard?.instantiateViewController(withIdentifier: menuItem.identifier) else  return 
            toolVc.modalPresentationStyle = .overCurrentContext
            
            if toolVc is ARColorViewController 
                let colorVc = toolVc as! ARColorViewController
                colorVc.colorIndex = indexPath.row
            
            present(toolVc, animated: false, completion: nil)
            return
        
        
        if indexPath.section == 0 
            if indexPath.row == 6 
                /// 撤销
                boardKit.undo()
                
             else if indexPath.row == 7 
                /// 重做
                boardKit.redo()
                
             else if indexPath.row == 8 
                /// 清空涂鸦
                boardKit.clear(false)
                
             else if indexPath.row == 9 
                /// 清空涂鸦和背景
                boardKit.clear(true)
                
             else if indexPath.row == 10 
                /// 重置
                boardKit.reset()
            
         else if indexPath.section == 1 
            if indexPath.row == 0 
                /// 新增
                boardKit.addBoard()
                
             else if indexPath.row == 1 
                /// 删除
                boardKit.deleteBoard()
                
             else if indexPath.row == 2 
                /// 上一页
                boardKit.preBoard()
                
             else if indexPath.row == 3 
                /// 下一页
                boardKit.nextBoard()
            
        
    

白板回调

extension ARBoardViewController: ARBoardDelegate 
    func board(_ boardKit: ARBoardKit, didOccurError errorCode: ARBoardErrorCode) 
        /// 发生错误回调
        Logger.log(message: "didOccurError errorCode = \\(errorCode.rawValue)", level: .error)
    
    
    func board(_ boardKit: ARBoardKit, addBoard boardIds: [Any], fileId: String) 
        /// 添加白板页的回调
        Logger.log(message: "addBoard boardIds = \\(boardIds) fileId = \\(fileId) ", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, deleteBoard boardIds: [Any], fileId: String) 
        /// 删除白板页的回调
        Logger.log(message: "deleteBoard boardIds = \\(boardIds) fileId = \\(fileId)", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, gotoBoard fileId: String, boardId: String) 
        /// 白板页切换的回调
        Logger.log(message: "gotoBoard fileId = \\(fileId) boardId = \\(boardId)", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, scaleChannge boardId: String, scale: CGFloat) 
        /// 白板缩放的回调
        Logger.log(message: "scaleChannge boardId = \\(boardId) scale = \\(scale)", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, connectionChangedTo state: ARBoardConnectionStateType, reason: ARBoardConnectionChangedReason) 
        /// 网络状态回调
        Logger.log(message: "connectionChangedTo state = \\(state.rawValue) reason = \\(reason.rawValue)", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, undoStateChange enable: Bool) 
        /// 当前白板页是否可撤销
        Logger.log(message: "undoStateChange enable = \\(enable)", level: .info)
    
    
    func board(_ boardKit: ARBoardKit, redoStateChange enable: Bool) 
        /// 当前白板页是否可重做
        Logger.log(message: "redoStateChange enable = \\(enable)", level: .info)
    

结束语

互动白板目前还存在一些待完善的功能点，体验或集成过程中有不足之处，欢迎大家指出~