Introduction to the

  • This article is divided into three parts. First, it introduces the effect of the project implementation, then it introduces the technology stack used in the project, and finally it introduces the specific implementation in detail.

show

  • It can be used in online education. After the professor uploads a document to teach the children, he/she needs to show the content of the document to the children. At this time, he/she needs to share the content on the screen and communicate with the students by voice.

1. Upload the documents that need to be previewed, and call yongzhong’s online document conversion interface here

2. Create channels on PC, start preview sharing, and call anyRTC screen sharing and voice interface

3. Add specific channels on mobile terminal or PC terminal for viewing and voice communication

Those of you who want to actually experience it canClick on the testOr scan the qr code below to experience.

Technology stack

uni-app

  • Uni-app does have a bit of arrogance, but IN my opinion, uni-app does have a bit of arrogance. Simple said that under the background, in the era of the small program more flooding, outstanding warlords have WeChat applet, pay treasure to small program, and some baidu small programs, trill small programs, 360 small programs, and other assorted qq small program, the warlords who have their own a set of small programs and their respective grammar ide development tools, let us these people suffering. In fact, it was Dcloud who put forward the concept and implemented it. When Dcloud put forward the concept and applied it in 2012, the market had not yet formed. Now, the warlords are full of wing, acting independently, Dcloud could not stand it, and threw out a set of uni-app. While you’re at it, you’ve also solved android-app and ios-app and web apps, so you can develop android, ios, applets, and Web at the same time.

  • So is uni-app hard to get started? It depends on how much inventory you have. If you are familiar with wechat small program development and VUE framework, congratulations, you can directly graduate, because Uni-app adopts the project architecture of small program and combines vUE framework technology to write.

  • The Dcloud team also launched their own IDE, which is called hubuildX, and it’s nice to use. It’s designed specifically for multi-terminal development, and it’s more suitable for Vue. If it doesn’t fit.

  • With the popularity of the small program market, the uni-App visible upward trend, with more developers joining, and dCloud team’s open source strategy, the Uni-App ecology will be more and more rich.

Yongzhong DCS document conversion

  • This company is doing office, the core function of DCS product is online preview of documents, such as others in QQ mailbox sent a word document to you, before is to download the file and then read, but online preview function can not download, direct observation. In this project, the interface of document transformation H5 is directly called to realize document preview. If you are interested in learning about it, you can go to this yongzhong DCS document transformation experience product.

AnyRTC

  • A cloud service provider that provides real-time audio and video. There is a webrTC, this should be a larger scale, scroll down inside the forum community is also doing well. For personal development, both offer 10,000 minutes of free audio/video per month. If you are not a real time communicators, it is recommended to use the SDKS provided by these services.

The specific implementation

1. Create a uni-app project and load the page

  • The first step is always so simple, write the page, inject soul into the style, complete the page, forgive me for my aesthetic.

  • Simply finish the page, the following is the registration event, the code is too much, too bloated, want to see the source code can go to Github download.
<template>
	<view class="content" :style="'height:'+screenHeight+'px'">
		<view class="img">Preview conversion online experience</view>
		<view class="img2">
			<button type="default" @tap="uploadFile">Upload a file</button>
		</view>
		<view class="">Instructions:</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>
Copy the code

2. Upload files and connect to the YONGzhong DCS document conversion interface

  • Call uni.chooseFile and select upload file (this API is for Web, Android, ios and so on refer to uni document), then send the file to the Document translation interface, return the document address, then uni. NavigateTo jump to the new address and open the returned document address.
uni.navigateTo({
        url: '.. /reader/reader? dcsRouter=' +
        JSON.parse(data.data).data.viewUrl.replace('http'.'https')})Copy the code
  • Note that I replaced HTTP in the address with HTTPS because anyrTC can only use HTTPS or localhost to apply audio and video.

3. Create audio and video channels

  • According to the API provided by AnyRTC official documents to call, remember to go to the website to apply for their own APPID, because it involves the reason of charging, so the source code on the document conversion and video stream charging interface will be annotates.
    let client = this.client = ArRTC.createClient({
            mode: "rtc".codec: "h264"
        });
        client.on("user-published".async (user, mediaType) => {
                // Subscribe to the remote user's audio and video tracks
                await client.subscribe(user, mediaType);
                if (mediaType === 'video') {
                        // Play the remote video to the specified window
                        user.videoTrack.play("reader");
                } else if (mediaType === 'audio') {
                        // Play the remote audiouser.audioTrack.play(); }});Copy the code

4. Other clients join the channel for communication

Set it under the broadcast page, where the blogger is lazy, just copy the web related code from AnyrTC, throw it directly into the project, and then fix and change……

conclusion

  • This article mainly talks about some technical points of the project, as for the uniapp usage and interface document call need you children to explore their own, share the source code to Github, hope this article can give you some help, haha.