uniapp开发视频会议(uni发布会视频)

软件开发 31
本篇文章给大家谈谈uniapp开发视频会议,以及uni发布会视频对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、基于uniapp如何实现语音房聊天?

本篇文章给大家谈谈uniapp开发视频会议,以及uni发布会视频对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

基于uniapp如何实现语音房聊天?

基于uniapp实现语音房聊天,可以直接用第三方开发的uniapp 原生插件,比如即构科技的ZegoExpressUniAppSDK,是一个基于 ZegoExpressEngine 原生 Android / iOS SDK 的 uni-app Wrapper,提供视频直播以及实时音视频服务。仅需几行代码,30分钟即可轻松接入。

uni-app 使用腾讯云im开发app聊天室

组件地址:

哪找教程引入就行,开发什么端看什么端文档

npm install tim-wx-sdk@2.15.0--save

npm install cos-wx-sdk-v5@0.7.11--save

----------------------------------------------------------

import TIM from 'tim-wx-sdk';

import COS from "cos-wx-sdk-v5";

import logger from './utils/logger'; // app.js

import { genTestUserSig } from './debug/GenerateTestUserSig.js'

在app.vue文件下onLaunch周期里面:

/// userInfo 为判断用户是否登录

if( userInfo != '' || userInfo != undefined ) {

if( uni.getStorageSync('zuserInfo').role == 1 || uni.getStorageSync('zuserInfo').role == 2 ) {

// 连接im

// 如果您已经接入 tim ,请将 uni.tim 修改为 uni.$TUIKit。

uni.$TUIKit = TIM.create({

  SDKAppID: '   '   // 填写你申请的AppID

});

uni.$TUIKit.registerPlugin({

  'cos-wx-sdk': COS

});

uni.$resetLoginData = this.resetLoginData(userInfo)

uni.$TUIKitTIM = TIM;

uni.$TUIKitEvent = TIM.EVENT;

uni.$TUIKitVersion = TIM.VERSION;

uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件

uni.$TUIKit.on(uni.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);

uni.$TUIKit.on(uni.$TUIKitEvent.KICKED_OUT, this.onKickedOut);

uni.$TUIKit.on(uni.$TUIKitEvent.ERROR, this.onTIMError);

uni.$TUIKit.on(uni.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);

uni.$TUIKit.on(uni.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);

uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onSDKReady);

}

}

// TODO:

  resetLoginData(info) {

let _this = this

    this.globalData.expiresIn = '';

    this.globalData.sessionID = '';

    this.globalData.userInfoIm = {

      userID: info.userId,

      userSig: info.txSig,

      token: info.token,

      phone: info.phone

    };

    this.globalData.userProfile = null;

uni.$TUIKit.login({userID: info.userId.toString(), userSig: info.txSig.toString()})

.then(function(imResponse) {

  // console.log(imResponse.data); // 登录成功

// _this.getUpdateMyProfile()

  if (imResponse.data.repeatLogin === true) {

    // 标识帐号已登录,本次登录操作为重复登录。v2.5.1 起支持

    // console.log(imResponse.data.errorInfo);

  }

})

.catch(function(imError) {

  console.warn('login error:', imError); // 登录失败的相关信息

});

  },

onTIMError() {},

  onNetStateChange() {},

  onSDKReload() {},

  onSDKReady(event) {

let _this = this

_this.getUpdateMyProfile()

_this.getImUnread()

},

  onSdkNotReady() {

this.getImLogin()

},

  onKickedOut() {

    uni.showToast({

      title: '您被踢下线',

      icon: 'error'

    });

let userinfo = ''

uni.setStorageSync('zuserInfo', userinfo)

setTimeout(()={

uni.redirectTo({

  url: '/pages/login/login'

});

},2000)

    // uni.navigateTo({

    //  url: './pages/TUI-Login/login'

    // });

  },

logoutTim() {

uni.$TUIKit.logout()

},

uni.navigateTo({

url: '/pages/TUI-Chat/chat?conversationID=C2C' + this.info.user_id

});

getImUnread() {

uni.$TUIKit.getConversationList().then(res = {

// console.log(res.data.conversationList)

for( let i of res.data.conversationList ) {

if( i.unreadCount != 0 ) {

uni.showTabBarRedDot({index:2})

return

}

}

}).catch(fail = {

// console.log(fail)

});

},

uniapp开发聊天界面有推荐的框架吗?

现在有很多做聊天的框架啊,比如融云、腾讯云、GoEasy这些。

在整个uniapp生态体系内,即时通讯这一块要说对uniapp支持不错的估计就只有GoEasy了。

这里有一份GoEasy提供的uniapp版本的即时通讯源码,他们的API很简单,你可以下载下来跑一下,再结合开发文档看一遍,基本就会了。

这个demo可以打包成安卓、iOS的APP,也可以打包成微信小程序。

支持发送文字、图片、语音、视频这些

源码地址:网页链接

uni-app开发一个小视频应用(二)

前情回顾uni-app开发一个小视频应用(一)上篇文章,我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件,传入视频列表渲染后已经可以上下滑动进行视频切换和播放,接下来我们将完成首页的剩余部分,左侧信息栏组件、右侧图标栏组件,以及完善视频切换动画、播放控制等功能。

左侧的信息栏组件,主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的,所以应该在循环视频列表的时候,将左侧信息栏组件一起渲染出来,所以左侧信息栏组件应该加到swiper-item中。

// components/list-left.vue

// components/video-list.vue

右侧图标栏组件,主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius),右侧图标栏组件设置一个固定宽度,然后让各种图标依次排列即可,如:

// components/list-right.vue

当点击头像下部的加号图标,可以对该用户进行关注,即隐藏加号图标,还有就是收藏爱心图标颜色切换,当点击收藏爱心图标,爱心图标变成红色,再次点击收藏爱心图标,爱心图标变回白色,这里先只处理颜色的变化,具体后台交互暂不处理。

// 在头像图标下方通过绝对定位添加一个加号图标,并定位到头像底部

所谓滑动播放,即向上滑动的时候,暂停当前播放视频并且播放下一个视频,向下滑动的时候,暂停当前播放视频,播放上一个视频,而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件,我们可以监听这个change事件,拿到滑动完成后滑动到了第几页,即swiper-item的序号(从0开始),然后与滑动前的当前page相比较,就可以知道是向上滑还是向下滑了。

判断好了是上滑还是下滑后,我们还需要对上滑和下滑作出正确的处理,我们需要能够拿到每个视频播放组件,然后调用视频播放组件上的相关方法对播放进行控制,这就是涉及到了父组件如何调用子组件上方法,父组件要想调用子组件上的方法,关键是父组件要能够拿到子组件对象,我们可以通过ref实现,因为每一个视频播放组件是video-list视频列表组件的一个子组件,所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player",即可拿到对应的视频播放组件了。

// components/video-list.vue

要想实现单击视频播放组件,视频可以进行播放和暂停切换,那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中,如果是播放中,那么点击就暂停,如果不是播放中,那么点击就播放,同时,由于uni-app不支持vue的dblclick事件的,所以我们还需要对单击和双击操作进行判断,我们需要定义一个变量用于记录用户点击次数,如果300ms内用户点击次数大于等于2,那么就是双击,否则就是单击,如:

双击的时候会向video-list父组件(视频列表组件)发送一个follow事件,video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可,如:

之前我们的视频播放组件接收了一个index属性,即当前视频对应的索引号,我们可以通过这个索引号判断当前视频是否是第一个,然后将其video组件的autoPlay设置为true即可自动播放。

至此,首页已经完成,效果图如下:

原文地址:

关于uniapp开发视频会议和uni发布会视频的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫码二维码