基于uniapp实现在线文档预览的屏幕共享和通讯

·  阅读 1433
基于uniapp实现在线文档预览的屏幕共享和通讯

简介

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

展示

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

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

lALPD3zUON1oBtbNBALNB3g_1912_1026.png

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

1625747897365_871F36D5-4D93-4f66-B0D1-BCC3B5D24DA8.png

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

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

技术栈

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项目,搭载页面

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

image.png

  • 简简单单弄完页面,下面就是注册事件,代码贴多了,太臃肿了,想要看源码可以去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上,希望本文能给予大家一些帮助,哈哈。
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改