简介

• 本文章分三部分介绍，首先介绍此项目实现的效果，接着对项目所用到技术栈简介下，最后详细介绍具体实现。

展示

• 这个玩意做了是搞啥的，可以应用于在线教育，教授上传一个文档后向小朋友们授课，需要将文件的内容展示给童鞋们，此时就需要屏幕上的内容共享，同时也要和学生们语音交流，最终实现的效果如下：

1.上传需要预览的文档，这里调用的永中的在线文档转换接口

2.PC端创建频道，启动预览分享，调用anyrtc屏幕分享和语音接口

3.移动端或者PC端加入特定频道，加入观看和语音通讯

想要实际体验的小伙伴们可以点击测试或者扫下方二维码体验。

技术栈

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文档转换体验下产品。

AnyRTC

• 提供实时音视频的云服务供应商。还有个webrtc，这个应该规模更大，翻了下里面论坛社区也做的不错。对于个人开发来讲，两者都是提供每月10000分钟免费的音视频，如果你对实时通讯是小白的话，建议还是用这些服务商提供的sdk，这样开发起来效率起飞，哈哈。

具体实现

1.新建uni-app项目，搭载页面

• 第一步总是这么朴实无华，写写页面，注入灵魂的样式，完成页面搭建，见谅鄙人的审美。

• 简简单单弄完页面，下面就是注册事件，代码贴多了，太臃肿了，想要看源码可以去github下载。

<template>
	<view class="content" :style="'height:'+screenHeight+'px'">
		<view class="img">预览转换在线体验</view>
		<view class="img2">
			<button type="default" @tap="uploadFile">上传文件</button>
		</view>
		<view class="">使用说明：</view>
		<view class="progress-box">
			<progress :percent="percent" show-info v-if="isShow" stroke-width="6" />
		</view>
	</view>
</template>
<script>
	export default {
		methods: {
                    uploadFile () {
                        ..............................................;
                    }
		}
	}
</script>

2.上传文件，对接永中DCS文档转换接口

• 调用uni.chooseFile选择上传文件，（此api针对web端，安卓，ios等参照uni文档），然后将文件传给永中文档转换接口，返回得到文档地址，然后uni.navigateTo跳转到新建的地址当中打开返回的文档地址。

uni.navigateTo({
        url: '../reader/reader?dcsRouter=' +
        JSON.parse(data.data).data.viewUrl.replace('http', 'https')
})

• 注意，我把地址中的http换成了https，应为调用anyrtc应用音视频的时候只能是https或者localhost。

3.创建音视频通道

• 按照AnyRTC官方文档提供的api去调用，记得去网站申请自己的appid，因为涉及到收费的原因，所以源码中关于文档转换和视频流收费的接口会打注释。

    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上，希望本文能给予大家一些帮助，哈哈。