uni发布成web

流程如下:1.创建一个uni项目https://www.jianshu.com/p/a2f57d00ae602.配置mainfest.json的h5模块3.开始发布运行这个域名可以是腾讯云的静态网站默认域名此时可能会报错:“该项目的AppID非当前账号所有,请...
继续阅读 »

流程如下:

1.创建一个uni项目

https://www.jianshu.com/p/a2f57d00ae60

2.配置mainfest.json的h5模块

d31e42db963b7780677e95495d5f51cd.png

3.开始发布运行

585eab023b512901300f6a910c3a2609.png

这个域名可以是腾讯云的静态网站默认域名

此时可能会报错:“该项目的AppID非当前账号所有,请联系应用所有者设置你的账号为协作者或者在该项目的manifest.json中重新获取”

这个可以到“基础配置”,单击”重新获取“

如果点击发行的时候没有登录,那就麻烦登录下,没密码当然可以注册一个再登录。

4.再次发行即可看到如下内容

654427ef903f66cbec1b16d847d1ab5d.png

此时我们打包好的文件就在这个地方:C:/workFile/userProject/uni-player/unpackage/dist/build/h5

5.最后在把这个文件部署到静态网站

059a35dbf0a511d59f3f930591aa7745.png

收起阅读 »

使用electron-vue踩坑

问题描述:electron-vue使用该sdk,执行进房时报错:C:\workFile\vueproject\my-project\node_modules\_trtc-electron-sdk@8.9.102@trtc-electron-sdk\liteav...
继续阅读 »

问题描述:

electron-vue使用该sdk,执行进房时报错:
C:\workFile\vueproject\my-project\node_modules\_trtc-electron-sdk@8.9.102@trtc-electron-sdk\liteav\trtc.js:1135 enterRoom, params is not instanceof TRTCParams!

9a44f5003a45bfd8c6de7726d8dab38c.png


问题分析:

    目前来看是引入TRTCClound类的方式不对,新版本可以直接从trtc-electron-sdk印出来,如图:

b00acd854ead443baedf50ca3310497f.png


electron-vue打包:

命令:

npm run build

打包报错task重复 const tasks = new Listr(SyntaxError: Identifier 'tasks' has already been declared

因此找到.electron-vue => build.js 修改下文:

2c182f89f5a762bd4d0b275f21066df6.png

再次执行命令打包报错找不到 Multispinner is not defined:

bb38cb0db98928f1d26aebe3d85077a5.png

再次执行打包命令报错Please remove it from the "dependencies" section in your package.json.

ecce2d7bcf2df9200af7f2c3aaed642a.png

此时只需要将dependencies中的electron移除掉,同时再初始化一次:npm install

最后再次执行打包命令,只要网络OK则正常打包:

818ef5a2eb1b0c35ffcee886dada4c9c.png


收起阅读 »

trtc-wx之截图(snapshot)

    这边就贴一下自己写得snapsho 的使用吧。就一demo为参考吧    有个注意得地方:就是获取 this.TRTC.getPlayerInstance(“live-player的ID”)时,demo这边live-player组件的id是动态得,绑...
继续阅读 »

    这边就贴一下自己写得snapsho 的使用吧。就一demo为参考吧

    有个注意得地方:就是获取

this.TRTC.getPlayerInstance(“live-player的ID”)时,demo这边live-player组件的id是动态得,绑定的传入了streamID。这样得话就可以直接拿传入得streamID,放getPlayerInstance里面就可以。
                    b17b98846b219f630c788e8099c72ea0.png

下面就贴一下完整的代码吧
     //播放截图

  playsnapshot() {
    //这里小程序的live-player绑定的id时候streamID
    var live_player=this.data.playerIDvideo.streamID
    this.TRTC.getPlayerInstance(live_player).snapshot().then(res => {
      if (res{
        // 保存至本地相册
        wx.saveImageToPhotosAlbum({
          filePath: res.tempImagePath,
          success: function (result) {
            console.log('saveImageToPhotosAlbum() result======', result)
            if (result.errMsg.indexOf('ok'> 0{
              wx.showToast({
                title: '图片已保存至系统相册-ok',
                icon:"success",
                duration:1000
              })
            }
          }
        })
      }
    })
  },


收起阅读 »

vue处理get和post相关

导读        本次内容分为两块:1.使用get情况;2.使用post情况    在使用get和post的情况下,可以先按照上一篇文章,先搭建一个服务器:https://www.rtcgeek.com/?/article/421    1.使用get的情况...
继续阅读 »

导读    

    本次内容分为两块:1.使用get情况;2.使用post情况

    在使用get和post的情况下,可以先按照上一篇文章,先搭建一个服务器:https://www.rtcgeek.com/?/article/421

    1.使用get的情况 

// main.js

import axios from 'axios'
Vue.prototype.$axios = axios;
axios.defaults.baseURL = '域名地址';

//vue.config.js内容
module.exports = {
devServer: {
proxy: {
'/api': {
target: '/sign', //路径
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/sig': {
target: '/createSig',//路径
ws: true,
changeOrigin: true,
pathRewrite: {
'^/sig': ''
}
}
}
}
}

// About.vue内容
this.$axios.get('/sign').then(res => {
console.error(res)
}).catch(err => {
console.error(err)
})

有打印成功即可

69e361e5b87946369a60a842ebabcc85.png

    2.使用post的情况

    服务器同上

let form = qs.stringify({
userID: query.userID
})
window.qs = qs;
this.$axios.post('/createSig',form).then(res => {
console.error(res)
).catch(err => {
console.error(err)
})

    这里需要注意的是post在vue里面发送的是Request Payload而后端希望我们传的值形式为Form Data,因此需要使用qs进行转换一下,值得注意的是,qs不等同于JSON,对比如下:

    b9a36a4bf4a195827d836e34e6ef4a4b.png

收起阅读 »

实现前端根据userID获取到后端的userSig

     直接上正文:    正如文档所描述:正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。那么,如果我们需...
继续阅读 »

     直接上正文:

    正如文档所描述:正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。那么,如果我们需要实现前端根据不同的userID到后端去请求对应的userSig,就得根据以下步骤来操作:

    1.首先我们需要搭建一个服务器

    这里我们以express为例,快速搭建一个简易的服务器,也不需要用矿建,简单的js即可,不过由于后面会使用到post请求,因此我们需要安装一些东西:

    npm i express 

    引入body-parser:const bodyParser = require('body-parser')

    使用:

    app.use(bodyParser.urlencoded({ extended: false}))

    app.use(bodyParser.json())

    服务器搭建流程:

    1.1引入express

    const express = require('express')

    const app = express();

    1.2引入body-parser

    const bodyParser = require('body-parser')

    app.use(bodyParser.urlencoded({ extended: false}))
    app.use(bodyParser.json())

    1.3服务端配置跨域

app.all('*', (req, res, next) => {
 res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//  res.header("X-Powered-By",' 3.2.1')
    res.header('Access-Control-Allow-Content-type','*')
    next();
});

    1.4做监听

app.get('/sign',(req,res) =>{   
res.json({status: 'ok'})
})
app.listen(3000 ,() => {

    1.5执行node index.js便会开启一个localhost:3000/sign的窗口


    2.实现生成userSig

    2.1安装tls-sig-api-v2

    这个Js是腾讯云给我们封装好的node可引入的Js,帮助我们快速生成有效的userSig

    2.2创建一个createSig.js写好方法,并导出

var TLSSigAPIv2 = require('tls-sig-api-v2');

// var TLSSigAPIv2 = require('./TLSSigAPIv2'); // 源码集成需要使用相对路径

var api = new TLSSigAPIv2.Api("your sdkappid", "your userSig");

//传入对应的userID并返回userSig
function createSig(userID) {
console.log(api.genSig(userID, 86400*180))
return api.genSig(userID, 86400*180);
}

// 将生成的userSig进行导出
exports.createSig = createSig

    2.3在index.js页面将方法引入

    const fuc = require('./creaeteSig')

    2.4码一下后端的post接口

app.post('/createSig',(req,res,next) => {
console.log(req.body.userID)
console.log(req.userID)
if (req.body.userID.length > 0) {
let userID = req.body.userID
let userSig = fuc.createSig(userID)
// 将传过来的userID生成对应的userSig并返回给到前端
res.send(userSig)
} else {
res.send('注册失败')
}

})

    3.前端发起请求

    3.1这里以小程序为例,我们会在进房的时候会传入userID和roomID,因此在onLoad中结构出来

    { userID, roomID } = options

    3.2向后端发起请求

  wx.request({      //后端请求地址
url: '/createSig',
method: 'post',
//需要传给后端的东西
data:{
userID: userID
},
success(e){
//后端相应结果
console.log(e)
// 获取后端返回的userSig
let userSig = e.data
//完成初始化
_this.timInit(userID,userSig)
//临时保存一份
_this.setData({
options:{
userID,
userSig,
roomID
}
})
}
})


    总结:通过上面流程便可实现前端的动态userID向后端返回正确的userSig,从而保证key的隐秘性

    

收起阅读 »

electron-setCurrentMicDeviceVolume设置系统当前麦克风设备的音量问题

    这边有遇到一个这样得问题     通过"setCurrentMicDeviceVolume"设置话筒input音量等级。在连接前检查"getCurrentMicDeviceVolume“时,所有的话筒音量接受设置都正常。在正式接入"startMicDe...
继续阅读 »

    这边有遇到一个这样得问题
     通过"setCurrentMicDeviceVolume"设置话筒input音量等级。
在连接前检查"getCurrentMicDeviceVolume“时,所有的话筒音量接受设置都正常。
在正式接入"startMicDeviceTest"或者”enterRoom"后,再次调用getCurrentMicDeviceVolume时音量又会别设置为100或者跳动。
进房前设置得bfad3641415154346d0d84d35c1d3fa9.png
进房后获取的
8c75c7309f3dbbc1f3c4a3535387be1b.png

这个也是win的得一个预期内的表现,因为进房后默认开启3a的策略,AGC会自动调整才会这样得,
当然也可以对其规避。

就是

进房调用startlocalaudio关闭AGC,0是false,1是true,目前WIN这边对齐腾讯会议的。这样设置就没有问题了
5577f854527efac0fd2706d8fd761d41.png

大家有什么想法可以一起交流

收起阅读 »

手动集成tuikit组件

手动集成TUIKit_live+TUIKit组件,参考简易demo:https://erickyan-1253985742.cos.ap-beijing.myqcloud.com/demo/TIMDemo%202.zip

手动集成TUIKit_live+TUIKit组件,参考简易demo:https://erickyan-1253985742.cos.ap-beijing.myqcloud.com/demo/TIMDemo%202.zip

播放器相关问题整理

1、传psign播放无法请求到自定义码流的视频,只拉取到了原视频生成psign的参数之一pcfg是配置超级播放的模板的,如需播放自定义码流的视频,要通过pcfg配置对应的自定义码流模板名称。如自定义码率模板名为123,则需在控制台创建一个名为123的播放模板,...
继续阅读 »

1、传psign播放无法请求到自定义码流的视频,只拉取到了原视频

生成psign的参数之一pcfg是配置超级播放的模板的,如需播放自定义码流的视频,要通过pcfg配置对应的自定义码流模板名称。

如自定义码率模板名为123,则需在控制台创建一个名为123的播放模板,pcfg的值需传123。

点播控制台预设的转码模板,播放只需要传固定的模板名称给pcfg。

2、超级播放器使用预置转自适应码流模板12播放失败

basicDrmPreset 是预置超级播放器配置,用于播放12模板转自适应码流输出,10模板截雪碧图输出。
生成签名时生成播放器配置pcfg需设置成basicDrmPreset 。


收起阅读 »

IM相关问题整理

1、IM调用getConversationList获取会话列表,IOS和Android返回的会话列表数量为何不一致?     本地存储的会话列表没有数量上限,云端存储的会话列表最大数量为100(可以提单配置)。    app 卸载重装之后,只能从后台拉,最多 ...
继续阅读 »

1、IM调用getConversationList获取会话列表,IOS和Android返回的会话列表数量为何不一致?

     本地存储的会话列表没有数量上限,云端存储的会话列表最大数量为100(可以提单配置)。

    app 卸载重装之后,只能从后台拉,最多 100 个

    但是如果一直没有卸载的话,SDK 本地的会话都会保存的本地数据库里 ,所以各终端拉取数量会有差异。   

2、IM信令相关。发起方发起通话请求,两个接收方。

未接通状态下,发起方挂断后,接收方某一方收不到。如果只发起一个接收方是可以收到回调的。

接收方有两个的情况下。
需要发起群聊通话邀请,tuikit也有示例。
见:ConversationManagerKit、MessageInfoUtil
示例:
2021-09-02 11:20:30.886 2160-2160/com.yp.tuikit I/imsdk: TIM: 160 2021-09-02 11:20:30.886/I/2160-2160 /IMSDK -TUIKit-MessageInfoUtil.0 /custom data:{"businessID":1,"inviteID":"144115234463960915-1630552832-820804380","groupID":"@TGS#2TWZ44HH4","inviter":"111","inviteeList":["user1","112"],"data":"{\"room_id\":1934462090,\"call_type\":1,\"version\":4,\"businessID\":\"av_call\"}","timeout":30,"actionType":1,"onlineUserOnly":false}


3、IM不同群类型差异整理、相关问题整理在线文档

https://docs.qq.com/sheet/DQ3d2d1haQ2pYdEJ2?tab=BB08J2

收起阅读 »

【iOS】TUIKit如何实现置顶群公告的展示

TUIKit(IM5.4.666)如何实现置顶群公告的展示一、思路1. 添加展示公告的view2. 调整消息列表的高度3. 处理键盘展示问题二、过程1. 添加公告view2. 修改消息控制器列表显示的高度3 . 处理键盘4. 效果展示三、总结其实功能不难,但是...
继续阅读 »

TUIKit(IM5.4.666)如何实现置顶群公告的展示

一、思路

1. 添加展示公告的view

2. 调整消息列表的高度

3. 处理键盘展示问题


二、过程

1. 添加公告view

ade6bd138423a6a0a60c511d799073b5.png


2. 修改消息控制器列表显示的高度

f441d25eb0ed683c8609b8b33f81468e.png


3 . 处理键盘

ed96b2c779d63866c96d4bb84993687f.png


4. 效果展示

c789e549e7b72087f1340939f5bd5413.png


三、总结

其实功能不难,但是很多人不愿自己动手实践,喜欢拿来主义,笔者希望大家面对一个功能的时候,能够自己独立思考,多多尝试,解决问题。

收起阅读 »