基于uniapp+vue，腾讯云仿斗鱼虎牙腾讯云移动直播应用实践，以及实现了以下功能：1：用户登录2：房间管理3：房间聊天4：直播美化5：Svga礼物动画6：一对一mic观众项目开发环境IDE：HbuilderX3.0+开发框架：uniapp+vue2.0x+sass运行平台：Android，IOS环境要求：window7+，macOS10.12.6+，node10.14.5+效果演示教程目录参考文档资源：uniapp腾讯云MLVB原生插件文档：https://www.yuque.com/zhimike...uniappSvga原生插件文档：https://ext.dcloud.net.cn/plu...腾讯云MLVB原生SDK文档：https://cloud.tencent.com/doc。..uniapp腾讯云MLVB原生插件地址：https://ext.dcloud.net.cn/plu...uniapp腾讯云TXIMSmart原生插件地址：https://ext.dcloud.net.cn/plu...uniappSvga原生插件地址：https://ext.dcloud.net.cn/plus...1.从0开始配置工程1.1获取Demo工程，将其导入到HbuilderX中，获取Demo工程。该项目可以通过插件页面获取。插件页面地址如下https://ext.dcloud.net.cn/plu...的获取方式很简单。只需点击导入示例工程按钮即可导入工程，如下：工程导入完成后，我们还需要对工程进行一些调整。双击打开manifest.json（根目录），选择“基本配置”，点击重新获取AppId，否则打包自定义库时可能会出现AppId不属于账号的错误。1.2试用云插件，导入Demo工程打开uniapp腾讯云TXIM原生插件地址：https://ext.dcloud.net.cn/plu...点击Try，选择我们的AppId刚刚重新获取，并设置为AppId请求插件免费试用。确认应用完成后，我们回到HbuilderX，打开manifest.json（根目录下），点击App原生插件配置，导入云插件。确认如图显示后（如果需要svga插件，还需要多一个对应的云插件），开始下一步1.2.1导入MLVB依赖的TXIM底部Smartmlvb依赖txim，所以需要引入TXIMSmart（价格仅为0.01元），导入过程参考上述过程tximsmart插件链接：https://ext.dcloud.net.cn/plu...1.3腾讯CloudUserId+UserSig用于配置和测试腾讯云系列SDK使用userId+UserSig的方式进行用户登录。一般我们是通过后台的return方法获取的，但是这里我们显然没有连接到后台，所以需要自己生成多个UserId+UserSig来测试，一般是5个就可以了，生成之后我们就可以替换了在Demo中查看效果。（首先确保你已经登录腾讯云并创建了应用，创建应用参考官方文档：https://cloud.tencent.com/doc...）腾讯云IM控制台：https://console.cloud.tencent...打开腾讯云IM控制台，点击对应应用进入管理。这里我们需要先记录SDKAppID，如下图，我们的SDKAppID是1400521882，得到SDKAppID后，我们点击【辅助工具】，点击【UserSig生成&验证】，这里我们通过获取需要的UserId+UserSIg腾讯云IM控制台辅助工具，注意这里生成的有效期为180天，请在有效期内完成测试。重复操作，这样我们就得到了5组UserID+UserSig，以及SDKAppID，数据如下：{id:'10001',sign:'eJwtzF0LgjAYBeD-suuQd5tbInRjGF2kGa3upU17G8owkyL6782Py-MczvkSdTgHg*lITFgAZDVl1KbtscKJKQDQpXhqWzqHmsQ0BAgjSSnMjXk77Ix3IQTzi1l7bEaTXvlaRnx5wXr8rS6FKur0w4fH8XXS21zyJL1fG9btVCttn6Aubb6-ZdmG-P6UADBd'},{id:'10002',sign:'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgZGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbWEJNyUwHmlvh7e*X52VhWelqnpJtmh9WGZZi6OxvmBRmll0eox9u4Znk4pNvnm*WkesYaqtUCwC*HDA6'},{id:'10003',sign:'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgbGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbGUFNyUwHWZceo5-sGuzt7p-pGaNfWpUT6F0Q5OrqX2js5Z6aWRkUkuqSl1Xk6ePs6BaVbqtUCwDxBzDx'},{id:'10004',sign:'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgYmUInilOzEgoLMFCUrQxOgqIWZoaEBRCa1oiCzKBUobmpqagTUAREtycwFiZkBRY3NzY2NoaZkpgPNdXb1TvMMSk0xSw33ci5N83YJCnKr8vfyMshIdUqO0S-PdUvL94r0NCitski3VaoFAL*XMJM_'},{id:'10005',sign:'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgamUInilOzEgoLMFCUrQxOgqJGhhYURRCa1oiCzKBUobmpqagTUAREtycwFiZkZm5kaG1oaGkJNyUwHmluVm1fkUxCaWFjqllGYEqOfWxQSFlkWblmQ7JTqHpQcllZk7Jvo6ZZrFuUUaKtUCwD1lzGr'},constSDKAppID=14005218821.4打包自定义基座，并且使用自定义基座进行开发调试在打包之前，我们需要安装依赖，这里需要开发者安装nodejs运行环境，以及安装hbuilderxscss编译插件，没有安装Developerspleasefollowthelinkbelowtoinstallthecorrespondingenvironmentnodejsofficialwebsite:https://nodejs.org/zh-cn/nodejsChinesewebsite:http://nodejs.cnscss/sasscompileplug-in:https://ext.dcloud.net.cn/plu...Aftertheinstallationiscomplete,thedevelopercanopentheterminalinhbuilderxandenterthefollowingcommandtocompletethedependencyinstallation.Duetothelimitationsoftheuniappframework,theuseofnativeplug-insmustfirstpackagethecustombase,andthendevelopanddebugthroughthecustombase.HerewefirstdemonstratehowAndroidpackagesacustomdockandusesitfordevelopment(IOSoperationprocessisconsistent,thecertificateneedstouseadevelopmentcertificateoranenterprisecertificate,andcannotuseareleasecertificate)Note:Theerrorreportedhereisirrelevant,becauseTXIMSmartdoesnothavethesefunctions,itjustusesthesameJSSDK,andthereisnodifferenceforAppdevelopment.2.UnderstandthedesignandtransformationofWeChat-likeAppapplications2.1InterfacelayoutdesignandcustomizeddevelopmentFormobilelivebroadcastapplications,Demodividesthepageinto3largeblocksandmultiplecomponentsaccordingtodifferentUIfunctions.Thedetailsareasfollows:ByseparatingtheUIcomponentsfromthebusinesslogic,theoverallcouplingbetweenthebusinessandtheUIisreduced,sothatonlytheUIcomponentscanbemodifiedwhentheUIneedstobecustomized,reducingthedevelopmentcost.对于业务界面，分为3个界面，分别是：login.nvue-登录界面，用于登录腾讯云账号首页。nvue-选择账号角色登录pusher.nvue-锚点界面，创建房间，聊天，美化配置，连麦管理等操作liveroom.nvue-直播间，观众看到的画面需要注意这里，因为这里用到了自定义控件，所以直播间，直播等界面需要使用nvue对于开发者如何进行改造和调试主要分为两种场景：更改主题颜色和样式。这种情况下，主要修改组件中的图标和颜色即可，业务界面部分根据需求修改即可。改变界面的布局风格。此时只需要修改组件中的图标和排版位置即可。对于较大的改动，需要根据排版要求调整liveroomLayout（比如加插槽等）。2.2修改测试UserId+UserSig，设置cdnUrl。演示项目中内置的测试UserId和UserSig已经过期。在上面的操作中，我们配置了属于我们测试的UserId和UserSig。这里我们需要把它改成我们上面配置的那个。UserId和UserSig，方便我们开发调试App。当然，我们还需要修改SDKAppID，否则会报错UserId与SDKAppID不匹配。修改工作很简单，我们只需要修改2个地方，如下图：注意：修改后我们不需要重新打包自定义库，但是最好重启调试，因为编译uniapp的机制有时会导致一些Android设备不会刷新和同步额外导入的js文件，导致调试和开发中出现一些意想不到的“意外”。当观众播放视频时，我们需要配置自己已经备案的cdnUrl。具体的域名配置过程可以参考以下链接：https://cloud.tencent.com/doc...假设我们已经配置了自定义域名，还需要修改main.js中的sdk配置。2.3创建直播间并开启摄像头预览推送首先，在创建直播间之前，我们需要开启摄像头的本地预览。要启用摄像头预览，我们需要获取用户的摄像头和麦克风权限。具体获取方法如下：importmlvbfrom'../tx-jssdk/mlvb-jssdk'mlvb.checkPermissions(ret=>{if(ret.code!==0){return}//这里我们得到了cameramicrophonepermission})获取cameramicrophone权限后，我们就可以开始打开本地摄像头预览了。具体代码如下：importmlvbfrom'../tx-jssdk/mlvb-jssdk'letfrontCamera=true//true=使用前置摄像头false=使用后置摄像头mlvb.startLocalPreview(frontCamera)启动本地后相机预览，主播完成美颜配置等操作后，就可以开始创建直播间了。腾讯云官方推荐最好使用userid作为直播间id，保证直播间id的唯一性，也方便底层数据管理（底层的推拉流streamid为直接根据userid确定），直播间创建后底层会自动推送用户的视频流，无需开发者自行推拉。代码如下：letuserId=''//可以将userId传给当前登录用户的userIdmlvb.createRoom(userId,{},res=>{//创建房间结果的回调})创建直播间后，观众就可以加入房间了。当然，后期开发者也可以对直播的一些配置进行操作，比如切换摄像头、麦克风静音等。发送和接收聊天短信在框架中发送和接收聊天短信非常简单，只需要监听短信和发送短信2个API，如下：mlvb.setListener(this.mlvbroomListener)//下面的方法写在methodsmlvbroomListener(e){let{type,code,data}=eswitch(type){case'onRecvRoomTextMsg'://收到短信this.onRecvRoomTextMsg(data)break}}onRecvRoomTextMsg(data){this.chatLogs.push({nick:data.userName||data.senderID,message:data.message,payload:data})}mlvb.sendRoomTextMsg(text,res=>{if(res.code!==0){控制台.error(res)this.toast('发送失败')return}console.log(res)this.chatLogs.push({nick:res.data.userName||res.data.userID,message:res.data.message,payload:res})})3.锚点美化的实现3.1获取美化管理对象后初始化美颜实例以后jssdk底层会自动初始化美颜实例，我们不需要关心，对于一些美颜实例无法正常初始化的情况，我们可以通过下面的方式手动初始化constBeautyManagerapi=mlvb.getBeautyManager()//内部自动完成获取和初始化的操作3.2设置美颜参数美颜部分的API需要参考腾讯云官方文档：https://cloud.tencent.com/doc...通过美容管理，您可以使用以下功能：●设置“美容风格”、“美白”、“红润”、“大眼睛”、“瘦脸”、“V脸”、“下巴”、“短脸”、“小鼻子”、“大眼睛”、“美白牙齿”、“去眼袋”、“去皱纹”、“去法令纹”等美容效果调整“发际线”、“眼距”、“眼角”、“嘴型”、“鼻翼”、“鼻子位置”、“唇厚”、“脸型”。●设置面部挂件（材质）等动态效果。●增添美感。●执行手势识别。目前免费版只提供以下3个APIconstbeauty=mlvb.getBeautyManager()letbeautyLevel=9beauty.setBeautyLevel(beautyLevel)//0-9自动美颜letwhitenessLevel=9beauty.setWhitenessLevel(whitenessLevel)//0-9自动美白letruddyLevel=9beauty.setRuddyLevel(ruddyLevel)//0-9自动红润3.3进阶版美颜获取进阶版美颜腾讯官方收费，需要参考以下链接说明：https://cloud.tencent.com/doc...购买美颜企业版请到腾讯官方购买：https://buy.cloud.tencent.com...购买美颜高级版后，您将可以支持包括免费版在内的所有美颜Api，这些美颜效果的调用接口已经在SDK内部预置，开发者可以直接调用。4.一对一主播连麦的实现4.1连麦流程探索与实践连麦示意图如下：这里sdk底层主要对用户的视频流进行混音和信令操作。开发者一般不需要在这里操作特殊的接口，但是这里需要注意三点。1：主播必须使用userid作为唯一id才能创建userid，否则可能导致混流失败2：观众必须使用主播userid作为唯一id才能进入房间，否则混流可能失败3：相应的mlvb应用必须开启云测转推功能，详见https://cloud.tencent.com/doc...4.2主动发起mic连接+mic连接业务处理已在此处底层封装。这里只需要执行一个api，发起mic连接，等待反馈事件。对，代码如下：//先获取相机权限mlvb.checkPermissions(({code})=>{if(code!==0){return}uni.showLoading()mlvb.requestJoinAnchor('',ret=>{uni.hideLoading()console.log(ret)let{type,code,data}=retswitch(type){case'onAccept':this.toast('对方接受了你的麦克风')this.playOpt.muted=falsethis.playOpt.frontCamera=truemlvb.startLocalPreview(this.playOpt.frontCamera)mlvb.joinAnchor(ret=>{console.log(ret)if(ret.code===0){this.playOpt.inLinkMic=true}})breakdefault://是否拒绝你的连入break}})})mlvb.requestJoinAnchor第一个方法是申请连入的原因，如果不需要，不需要填写。4.3主动断开mic+退出mic连接对于主播来说，主播的操作是主动断开mic连接，观众的操作是退出mic连接状态。下面展示主播主动断开mic连接的具体代码mlvb.kickoutJoinAnchor(this.currentLinkmicUserID)this.currentLinkmicUserID=''断开mic成功后，观众会收到onKickoutJoinAnchor事件，该事件为anchordisconnectingthemic，开发者可以处理断开mic后的业务逻辑。viewer退出disconnectedmic状态this.playOpt.inLinkMic=falsemlvb.quitJoinAnchor(ret=>{console.log(ret)})viewer退出connectedmic状态后，主播会收到onAnchorExit事件。请注意，该事件代表的是推流端断线，所以无论是断开mic连接还是跨房间PK断线，都会收到该事件，开发者可以根据业务需要进行逻辑处理。5、观众礼物的实现5.1试用云端Svga插件，导入Demo工程。我们需要用到观众礼物的svga插件。试用mlvb的过程也是一样的，这里就不赘述了。开发者请参考1.2流程打开插件链接进行试用和配置。5.2初始化Svga并加载SvgaSvga提供了播放显示svga文件的自定义控件，所以我们需要在模板中插入svga的自定义控件。
