--- highlight: a11y-dark theme: channing-cyan --- # 简介 - 本文章分三部分介绍，首先介绍此项目实现的效果，接着对项目所用到技术栈简介下，最后详细介绍具体实现。 ## 展示 - 这个玩意做了是搞啥的，可以应用于在线教育，教授上传一个文档后向小朋友们授课，需要将文件的内容展示给童鞋们，此时就需要屏幕上的内容共享，同时也要和学生们语音交流，最终实现的效果如下： #### 1.上传需要预览的文档，这里调用的永中的在线文档转换接口 ![lALPD3zUON1oBtbNBALNB3g_1912_1026.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb20b6248d404cd5a9350d10187679af~tplv-k3u1fbpfcp-watermark.image) #### 2.PC端创建频道，启动预览分享，调用anyrtc屏幕分享和语音接口 ![1625747897365_871F36D5-4D93-4f66-B0D1-BCC3B5D24DA8.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46da67f9d72f476f9c46964c77dd4e21~tplv-k3u1fbpfcp-watermark.image) #### 3.移动端或者PC端加入特定频道，加入观看和语音通讯 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/457d63affed14fc2a0eb7d407a240993~tplv-k3u1fbpfcp-watermark.image) 想要实际体验的小伙伴们可以[点击测试](https://static-9e7f78ac-4920-46e1-99a9-56abf24e1469.bspapp.com/#/)或者扫下方二维码体验。 ![1625733235475_yozoerweima.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b34746c3d384c45b3ac1955ef7fdc02~tplv-k3u1fbpfcp-watermark.image) ## 技术栈 ### uni-app - 字面意思：union app，听起来像是集大成的酱紫啊，听起来有点唬人，可是鄙人认为uni-app确实有嚣张的资本，union是啥意思，统治or联盟。简单的说下背景，在目前小程序多点泛滥的时代，杰出的军阀有微信小程序，支付宝小程序，还有些百度小程序，抖音小程序，360小程序，qq小程序等杂牌军，这些军阀有各自的一套小程序语法和各自的ide开发工具，让我们这些老百姓苦不堪言。世人苦其就已，都以为小程序是腾讯想出来的玩意，其实提出概念并实施的是Dcloud老祖，当时2012年老祖提出概念并应用时，市场还没有形成此时，到现在军阀羽翼丰满，各自为政，Dcloud老祖看不下去了，甩出一套uni-app大招，征服这些小崽子们的同时，顺便也解决了android-app和ios-app还有web应用，这么一讲，牛逼不，一套开发语法，你可以同时开发android，ios，小程序，web。 - 那么uni-app上手难吗？得看你手上有多少存货，你如果熟悉微信小程序开发并且熟悉vue框架，那么恭喜你，直接毕业，因为uni-app采用了小程序的项目架构，同时结合vue框架技术来编写。 - Dcloud团队同时也推出自己的ide，它的名字就叫hubuildX，用起来感觉还不错，反正为多端开发专门设计的，较为切合vue，应该是没有之一，为啥呢，vue官网挂着hubuildX，uni-app用vue语法，两个人狼狈为奸，能不切合吗。 - 随着小程序市场的火爆，uni-app肉眼可见的上升趋势，随着更多的开发人员的加入，以及dcloud团队的开源策略，uni-app的生态会越来越丰富。 ### 永中DCS文档转换 - 这家公司是做office的，其中dcs产品的核心功能是文档在线预览，譬如别人在qq邮箱里面发送了一篇word文档给你，以前都是将文件下载下来然后阅读，但是在线预览功能可以不用下载，直接观察。此项目中直接调用文档转换h5的接口，实现文档预览，如果有兴趣了解，可以去这个[永中DCS文档转换](https://www.yozodcs.com/)体验下产品。 ### AnyRTC - 提供实时音视频的云服务供应商。还有个webrtc，这个应该规模更大，翻了下里面论坛社区也做的不错。对于个人开发来讲，两者都是提供每月10000分钟免费的音视频，如果你对实时通讯是小白的话，建议还是用这些服务商提供的sdk，这样开发起来效率起飞，哈哈。 ## 具体实现 ### 1.新建uni-app项目，搭载页面 - 第一步总是这么朴实无华，写写页面，注入灵魂的样式，完成页面搭建，见谅鄙人的审美。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de8ffe2800194b2eabd8d0dc00dc3fa8~tplv-k3u1fbpfcp-watermark.image) - 简简单单弄完页面，下面就是注册事件，代码贴多了，太臃肿了，想要看源码可以去github下载。 ```js ``` ### 2.上传文件，对接永中DCS文档转换接口 - 调用uni.chooseFile选择上传文件，（此api针对web端，安卓，ios等参照uni文档），然后将文件传给永中文档转换接口，返回得到文档地址，然后uni.navigateTo跳转到新建的地址当中打开返回的文档地址。 ```js uni.navigateTo({ url: '../reader/reader?dcsRouter=' + JSON.parse(data.data).data.viewUrl.replace('http', 'https') }) ``` - 注意，我把地址中的http换成了https，应为调用anyrtc应用音视频的时候只能是https或者localhost。 ### 3.创建音视频通道 - 按照[AnyRTC官方文档](https://docs.anyrtc.io/)提供的api去调用，记得去网站申请自己的appid，因为涉及到收费的原因，所以源码中关于文档转换和视频流收费的接口会打注释。 ```js let client = this.client = ArRTC.createClient({ mode: "rtc", codec: "h264" }); client.on("user-published", async (user, mediaType) => { // 订阅远端用户的音视频轨道 await client.subscribe(user, mediaType); if (mediaType === 'video') { // 播放远端视频到指定窗口 user.videoTrack.play("reader"); } else if (mediaType === 'audio') { // 播放远端音频 user.audioTrack.play(); } }); ``` ### 4.其他客户端加入频道进行通讯设置在了broadcast页面下，这里博主偷懒，直接把anyrtc中web相关的代码拷贝下来，直接扔到项目里面，然后修修改改...... ## 总结 - 本文主要讲了项目的一些技术要点，至于uniapp的用法和接口文档调用需要各位童鞋们自己去探索，源码共享到[github](https://github.com/zhy531017132/dcs-uniapp-anyrtc)上，希望本文能给予大家一些帮助，哈哈。