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


三、总结

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

收起阅读 »

短视频录制时长切换功能实现

需求:实现短视频录制不同录制时长切换功能,目前遇到达到最大录制时长未停止的问题实现方案:根据不同的拍摄模式,更新录制时长。设置切换"拍摄模式"监听器,录制进度回调方法中对不同的拍摄模式做判断,如果达到了录制时长,就调接口停止录制。

需求:实现短视频录制不同录制时长切换功能,目前遇到达到最大录制时长未停止的问题

实现方案:

根据不同的拍摄模式,更新录制时长。

设置切换"拍摄模式"监听器,录制进度回调方法中对不同的拍摄模式做判断,如果达到了录制时长,就调接口停止录制。

b6ec3ec4a269068918459354c7c05931.png


移动直播相关问题整理

1、移动直播V1接口onVideoRawDataAvailable软解视频帧回调不执行问题原因:需要在回调中再次调用 addVideoRawData,将 buffer 塞给 SDK 来填充下一帧 YUV 数据才会执行。2、移动直播专业版无法拉HLS的直播流。需...
继续阅读 »

1、移动直播V1接口onVideoRawDataAvailable软解视频帧回调不执行

问题原因:需要在回调中再次调用 addVideoRawData,将 buffer 塞给 SDK 来填充下一帧 YUV 数据才会执行。

da7621b4873efadd1f7e68c95d22884c.png5d49b7a198cc3b6f214181a21515f2c0.png

8c30fc422b993fe61e5fbf4239c81d9f.png

2、移动直播专业版无法拉HLS的直播流。

需用V1的接口,外部指定播放类型
int  code = mV1LivePlayer.startPlay(playURL, mCurrentPlayURLType);
V2接口不支持外部指定播放类型
int   code =  mV2LivePlayer.startPlay(playURL);
播放类型解析由SDK内部处理。

3、如何实现同一直播流,多平台同时直播分发

移动直播SDK目前支持向其他厂商推流,但不支持多路转推功能。

SDK 不绑定腾讯云,如果要推流到非腾讯云地址,请在推流前设置 TXLivePushConfig 中的 enableNearestIP为 false。但要推流的地址为腾讯云地址时,请务必在推流前将其设置为 YES,否则 SDK 针对腾讯云的协议优化将不能发挥作用。

TRTC调用startPublishCDNStream接口向非腾讯云 CDN 上发布音视频流,特不支持多路转推功能。

最多支持同时转推1路,需要开白后使用。

若同一直播流,多平台同时直播分发,建议多路分流的工作在云端完成,也就是云导播台。

主播端(直播端)通过OBS或者手机将流推送到云端,再由云端导播台做多路分流,转推给多个直播平台、CDN平台;
由于主播端(直播端)场地不一定固定,而且上行带宽比较弱,
而云端主机都是上下行带宽共用的,没有网络带宽的瓶颈,所以导播台的方式是更优选择。

4、移动直播推流失败3004 

[I][2021-08-23 +9.0 16:24:33.510][30229, 30229][V2-TXRTMPPusherImpl][, , 0][thread ID:2|line:-1|v2_api_rtmp_pusher(@dbfe184) push event:3004 param:Bundle[{EVT_UTC_TIME=1629703473507, EVT_MSG=UNKNOWN, EVT_TIME=2168494182}]

c020d3c70f56ed4932c5ecefcc0c9971.png

拉流域名,用来推流导致。

5、观众进入直播间没声音,观众需要手动调整下媒体音量才正常。

进房成功拉主播CDN流,setMue默认是false。

若检查为true,

mTXLivePlayer.setMute(false); 解决。

6、移动直播License更新问题,导致推流失败

问题原因:即日起,旧版 SDK License 管理已升级为新版腾讯云视立方 License 管理,新版 License 可通过一组 LicenseUrl&Key 管理所有终端授权
若您的应用正使用旧版 License 进行校验,可继续使用旧版 License 或改用新版 License(推荐)。
未来新购买获赠的 License 进行绑定时将不再提供旧版 License 的 URL 和 Key
新版LicenseURL特征:v_cube.license后缀
旧版LicenseURL特征:TXLiveSDK.licence后缀

7、移动直播SDK指标监控系统CPU使用率获取不到什么原因?2d26823761eea53a43dff3acb10be5c2.png

Google 权限限制,Android 8.0 以后非系统应用无法读取 /proc/stat 来获取 CPU 的实时占用率。

8、移动直播相关问题在线文档整理

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

https://docs.qq.com/doc/DQ2d4c01jQkJJTklW

收起阅读 »

TRTC相关问题整理

1、TRTC setAudioRoute无效问题整理1)TRTC双方音视频通话时,不开麦的一方,通过setAudioRoute设置是否声音外放是没有效果的原因:不开麦时走的是媒体通道,无法设置声音外放setAudioRoute。分析:[I][2020-09-1...
继续阅读 »

1、TRTC setAudioRoute无效问题整理

1)TRTC双方音视频通话时,不开麦的一方,通过setAudioRoute设置是否声音外放是没有效果的
原因:不开麦时走的是媒体通道,无法设置声音外放setAudioRoute。
分析:
[I][2020-09-15 +8.0 18:21:45.097][28356, 30490][][audio_device_android.cpp, OnPlayAudioData, 1533][AudioEngine : AudioDeviceAndroid play device ready:sample_rate:48000 channels:2 bits:16, volumetype:MEDIA_PLAY:表示现在使用的是媒体通道,没有办法设置是否外放
只有当volumetype不为MEDIA_PLAY,为volumetype:VOIP才能正常设置外放还是听筒。 

总结:不开麦走的是媒体通道,无法设置路由。

2)TRTC主播设置音频质量setAudioQuality为高音质后, setAudioRoute无法切换。

原因: 设置为高音质,sdk会把音频通道切换成媒体,而媒体通道是不能切路由的,需要强制在startLocalAudio之前调用下setSystemVolumeType,设置为通话。

总结:setAudioQuality设置高音质,sdk会把音频通道切换成媒体通道,无法设置路由。

3)[I][2021-08-16 +8.0 11:44:26.169][21199, 21818][TRTCCloudImpl][, , 0][(84694455)trtc_api setAudioQuality 2[I][2021-08-16 +8.0 11:44:55.961][21199, 21555][][monitor_api.cpp, PrintLocalLog, 153][onEvent => msg:audio|Event|local|AudioDevice: switch to media volume type [TRAE vloume type:2] params: code:10011 id: 

调用了API:setAudioQuality 设置了TRTCAudioQualityMusic高音质。TRTC主播设置音频质量setAudioQuality为高音质后, setAudioRoute无法切换。
原因: 设置为高音质,sdk会把音频通道切换成媒体,而媒体通道是不能切路由的,需要强制在startLocalAudio之前调用下setSystemVolumeType,设置为通话。

接口文档:https://liteav.sdk.qcloud.com/doc/api/zh-cn/group__TXDeviceManager__android.html#interfacecom_1_1tencent_1_1liteav_1_1device_1_1TXDeviceManager_1_1TXSystemVolumeType

2、muteLocalVideo暂停本地视频流,setVideoMuteImage设置垫片

图片,本地未显示。

设置垫片图片是发送到云端,远端用户观看的。
本地是停止摄像头采集,暂停本地视频流之后可以设置本地展示图片。

3、RTMP协议流成功推流,TRTC协议流推流失败。

[monitor_api.cpp, PrintLocalLog, 153][(42993275)trtc_api onEnterRoom err:-3301, msg:[-100024]Please go to IM Console - App Management to activate TRTC service. self:42993275 

请转到IM控制台-应用程序管理处激活TRTC服务。
RTC 连麦互动直播需要在开始接入前,先开通腾讯云实时音视频服务。

https://cloud.tencent.com/document/product/454/52751#step1

4、本地录制mediarecorder与屏幕共享冲突,报-7001

bb68dd35d879f4c6efefea355f8427fa.png

移动端支持屏幕分享辅路分享(即同时上行摄像头画面和屏幕画面两路画面)。
屏幕分享采用的系统MediaRecorder类进行录屏。
本地录制用mTRTCCloud.startLocalRecording();将视频流保存到本地解决。

5、混流相关问题

1)SDK Version:6.7.7754混流失败报505,流不存在

322b01ec2859933522c666c9e415df1e.png

29c87f154368b54d1f76e79b21989ad8.png

直播的混流接口,不是MCU封装后的

升级最新的SDK(9.0.10437),用SDK 封装的MCU混流方案
客户端去调用
trtc_api setMixTranscodingConfig接口发起混流。

2)老版Mix_StreamV2混流,A+B =A 模式云端混流,混流失败

{"code":-2,"event_id":"1630549262","message":"small picture out of the background","timestamp":1630549262}

混流画面的布局只能在背景流宽高内。
x+width <=画布的宽,y+height<=画布的高。

6、TRTC视频通话场景下,一方退出房间后。房间被解散了,什么原因?

00b439b9cbfef15950d2b35766b4059b.png

https://cloud.tencent.com/document/product/647/46351#.E6.88.BF.E9.97.B4


  [I][2021-09-02 +8.0 17:51:55.118][2608, 3391][TRTCCloudImpl][, , 0][(9340061)trtc_api onKickOut 2, kick out room by business

  [I][2021-09-02 +8.0 17:51:53.635][13760, 14772][][monitor_api.cpp, PrintLocalLog, 153][(126706145)trtc_api onExitRoom err:2, msg:kick out room by business self:126706145 

[I][2021-09-02 +8.0 17:51:55.382][2608, 3388][][monitor_api.cpp, PrintLocalLog, 153][(9340061)trtc_api onExitRoom err:2, msg:kick out room by business self:9340061

trtc_api onKickOut 2, kick out room by business,onKickOut  2回调触发的场景是

 服务端接口是:DismissRoom

 https://cloud.tencent.com/document/product/647/50089


收起阅读 »