starrtc-web-demo
starrtc-web-demo copied to clipboard
starrtc
您好，请问下有没有微信小程序的sdk ，或者是否能提供不压缩的源码，方便进行小程序的二次开发
No description provided.
我也很希望能提供微信小程序的SDK
提供一种方便修改为小程序SDK的思路，前提是只能修改IM功能，小程序音视频功能需要走腾讯的SDK，starrtc SDK目前无法兼容音视频功能
IM功能，群聊，聊天室，使用的是websocket，小程序中使用的是小程序封装的websocket接口，即将starrtc IM SDK 中，websocket相关部分做修改，就可以在小程序中使用，目前不提供不经过压缩的源码，但是有一种方法可以实现。在starrtc IM SDK 中有专门负责websocket连接的类，叫做StarRtc.WebrtcWebsocket，只是对websocket进行了简单封装，重写这个类，保持接口不变，改变其实现内容，即可实现没有源码情况下，对starrtc IM SDK 的小程序改造，下面附上StarRtc.WebrtcWebsocket的源码，在引入starrtc IM SDK后，重写这个类，即可， 切记不要修改接口名称，参数类型，里面的回调调用，只修改websocket连接相关
``StarRtc.WebrtcWebsocket = function (_callback, _srcScheduleUrl) { var self = this; var srcScheduleUrl = _srcScheduleUrl;
var callback = _callback;
var starWebsocket = null;
var heartbeat_timer;
self.startHeartBeat = function (heartBeatMsg, interval) {
var intervalTime = interval || 5000;
if (starWebsocket != null && starWebsocket.readyState == 1) {
starWebsocket.send(heartBeatMsg);
}
heartbeat_timer = setInterval(function () {
if (starWebsocket != null && starWebsocket.readyState == 1) {
starWebsocket.send(heartBeatMsg);
}
}, intervalTime);
}
//停止心跳
self.stopHeartBeat = function () {
clearInterval(heartbeat_timer);
}
self.connect = function (url) {
StarRtc.debug('WebSocket连接:' + url);
starWebsocket = new WebSocket(url);
//连接发生错误的回调方法
starWebsocket.onerror = function (event) {
StarRtc.warn("WebSocket连接发生错误:" + url);
callback({ "msg": "WebSocket连接发生错误", "data": event.data }, "connect failed");
};
//连接成功建立的回调方法
starWebsocket.onopen = function () {
StarRtc.debug("WebSocket连接成功:" + url);
callback({ "msg": "WebSocket连接成功" }, "connect success");
};
//接收到消息的回调方法
starWebsocket.onmessage = function (event) {
StarRtc.debug("onmessage", event.data);
callback(event.data, "onmessage");
};
//连接关闭的回调方法
starWebsocket.onclose = function (event) {
StarRtc.debug("WebSocket连接关闭:" + url);
self.stopHeartBeat();
callback({ "msg": "WebSocket连接关闭", "data": event.code }, "connect closed");
starWebsocket = null;
};
}
self.send = function (msg) {
starWebsocket.send(msg);
}
self.close = function () {
if (starWebsocket != null) {
starWebsocket.close();
}
}
self.readyState = function () {
if (starWebsocket != null) {
return starWebsocket.readyState;
}
else {
return -1;
}
}
return self;
}
关于利用web端的sdk，植入到小程序使用的方法
1.首先也是把作者的starrtc SDK (https://github.com/starrtc/starrtc-web-demo/blob/master/sdk/star_rtc_lib.min.js)
star_rtc_lib.min.js 放入自己的项目当中，我这边是单独放进了一个目录
可以先把 star_rtc_lib.min.js 格式化，方便操作，格式化有很多种，可以选择自己喜欢的（格式化js 的地址：https://tool.oschina.net/codeformat/js/）
- 处理 star_rtc_lib.min.js 使用的window 的对象，小程序里没有使用window可说，虽然在小程序的开发者工具
上可以输出window. 测试运行项目的时候，是不会识别window变量
可以在sdk的开头定义处理
var window = {};
window.WebSocket = {} （window.WebSocket 在sdk 的源码中间会用作判断的条件，可以自己搜索查看）
重新运行是不会有 window相关变量的报错了
3.改写web端的websocket ，改成走小程序封装的websocket接口
一。先把楼上作者 websocket 的代码搬到项目中，我这里取名 star_rtc_ws.js,（ 由于github 展示的问题，不要复制漏了代码）
二。我这里是把StarRtc.WebrtcWebsocket 方法，重命名了StartRtcWs
export const StartRtcWs = function (_callback, _srcScheduleUrl) 然后export 导出
三。改写函数StartRtcWs 里面的websocket ，全换成小程序的websocket api
找到 connect 方法
onerror --> onError
onopen -->onOpen
onmessage --> onMessage
onclose --> onClose
改造好小程序的api之后，需要注意的小程序发送，接收数据格式要使用 string/ArrayBuffer 数据类型
https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/SocketTask.send.html
可是看到sdk 里有发 Blob对象 数据格式，小程序不支持 Blob对象
可以定位到 sdk e.parseProtocol 方法 （473行，看格式化的效果，建议搜索）
进行改造下。这里贴出改造部分，替换即可
var t = new Uint8Array(e);
StarRtc.debug("parseProtocol:", t);
var R = t[0],
a = t.slice(1, 5),
O = t[5],
E = t.slice(6, 8),
_ = t.slice(8, 10),
r = t[10],
n = t.slice(11, t.byteLength - 2);
StarRtc.debug("parseProtocol: msgArr = ", n);
var s = t.slice(t.byteLength - 2, t.byteLength);
c({
appid: R,
plength: a,
appver: O,
rese1: E,
rese2: _,
actionid: r,
msgArr: n,
end: s
})
然后再改造下 star_rtc_ws.js 里面的 send 方法
在发送和心跳发送的时候都需要改造，如图：
// 处理发送的数据格式： function handleUint8Array(data) { let init8arr = new Uint8Array(data) return init8arr.buffer }
这里再附上 star_rtc_ws.js 代码，由于展示的问题，可以重开始复制到结尾： <---star_rtc_ws开始---> export const StartRtcWs = function(_callback, _srcScheduleUrl) { var self = this; var srcScheduleUrl = _srcScheduleUrl;
var callback = _callback; var starWebsocket = null;
var heartbeat_timer; self.startHeartBeat = function (heartBeatMsg, interval) { var intervalTime = interval || 5000; if (starWebsocket != null && starWebsocket.readyState == 1) { starWebsocket.send({ data: handleUint8Array(heartBeatMsg), success: (res) => { // console.log(res) }, fail: (res) => { console.log("发送失败", res) }, });
}
heartbeat_timer = setInterval(function () {
if (starWebsocket != null && starWebsocket.readyState == 1) {
starWebsocket.send({
data: handleUint8Array(heartBeatMsg),
success: (res) => {
// console.log(res)
},
fail: (res) => {
console.log("发送失败", res)
},
});
}
}, intervalTime);
}
// 处理发送的数据格式： function handleUint8Array(data) { let init8arr = new Uint8Array(data) return init8arr.buffer }
//停止心跳 self.stopHeartBeat = function () { clearInterval(heartbeat_timer); }
self.connect = function (url) { console.log('WebSocket连接:' + url);
// starWebsocket = new WebSocket(url);
starWebsocket = wx.connectSocket({
url,
header: {
'content-type': 'application/json'
},
method: 'post',
})
//连接发生错误的回调方法
starWebsocket.onError = function (event) {
// StarRtc.warn("WebSocket连接发生错误:" + url);
callback({
"msg": "WebSocket连接发生错误",
"data": event.data
}, "connect failed");
};
//连接成功建立的回调方法
starWebsocket.onOpen(event => {
console.log("WebSocket连接成功:" + url);
callback({
"msg": "WebSocket连接成功"
}, "connect success");
});
//接收到消息的回调方法
starWebsocket.onMessage(event => {
console.log("服务端返回的消息：")
// console.log(event)
console.log(event.data)
callback(event.data, "onmessage");
})
//连接关闭的回调方法
starWebsocket.onClose = function (event) {
console.log("WebSocket连接关闭:" + url);
self.stopHeartBeat();
callback({
"msg": "WebSocket连接关闭",
"data": event.code
}, "connect closed");
starWebsocket = null;
};
}
self.send = function (msg) { starWebsocket.send({ data: handleUint8Array(msg), success: (res) => { // console.log('发送成功', res) }, fail: (res) => { console.log("发送失败", res) }, complete: (res) => { // console.log("发送完成", res) } }); }
self.close = function () { if (starWebsocket != null) { starWebsocket.close(); } }
self.readyState = function () { if (starWebsocket != null) { return starWebsocket.readyState; } else { return -1; } }
return self; } <<---star_rtc_ws结尾--->> 4.最后一步需要更换web端的Websocket
在star_rtc_lib.min.js 底部替换 和 导出
StarRtc.WebrtcWebsocket = StartRtcWs
export {
StarRtc
}
具体的使用实例化，就和web端差不多了，这里使用443的端口，是手机连接服务需要这个端口。
调用登录的方法
最后成功的话，控制台会打印对应的信息：
单聊的消息也是可以发送的
由于是公司的项目，不能给源码地址，哪里有问题可以讨论解决
最后公司放弃了这个项目，想起来真可惜，如果继续做下去，就可以开发视频聊天的功能了，和作者说一样， 视频方面走小程序的sdk，希望可以帮助各位
谢谢
| | 雷军辉 | | [email protected] |
签名由 网易邮箱大师 定制
在2020年12月08日 17:35，liangjuncheng1995 写道：
关于利用web端的sdk，植入到小程序使用的方法
1.首先也是把作者的starrtc SDK (https://github.com/starrtc/starrtc-web-demo/blob/master/sdk/star_rtc_lib.min.js) star_rtc_lib.min.js 放入自己的项目当中，我这边是单独放进了一个目录
可以先把 star_rtc_lib.min.js 格式化，方便操作，格式化有很多种，可以选择自己喜欢的（格式化js 的地址：https://tool.oschina.net/codeformat/js/）
处理 star_rtc_lib.min.js 使用的window 的对象，小程序里没有使用window可说，虽然在小程序的开发者工具 上可以输出window. 测试运行项目的时候，是不会识别window变量
可以在sdk的开头定义处理 var window = {}; window.WebSocket = {} （window.WebSocket 在sdk 的源码中间会用作判断的条件，可以自己搜索查看）
重新运行是不会有 window相关变量的报错了
3.改写web端的websocket ，改成走小程序封装的websocket接口 一。先把楼上作者 websocket 的代码搬到项目中，我这里取名 star_rtc_ws.js,（ 由于github 展示的问题，不要复制漏了代码）
二。我这里是把StarRtc.WebrtcWebsocket 方法，重命名了StartRtcWs export const StartRtcWs = function (_callback, _srcScheduleUrl) 然后export 导出
三。改写函数StartRtcWs 里面的websocket ，全换成小程序的websocket api 找到 connect 方法
onerror --> onError onopen -->onOpen onmessage --> onMessage onclose --> onClose 改造好小程序的api之后，需要注意的小程序发送，接收数据格式要使用 string/ArrayBuffer 数据类型 https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/SocketTask.send.html 可是看到sdk 里有发 Blob对象 数据格式，小程序不支持 Blob对象 可以定位到 sdk e.parseProtocol 方法 （473行，看格式化的效果，建议搜索） 进行改造下。这里贴出改造部分，替换即可
var t = new Uint8Array(e); StarRtc.debug("parseProtocol:", t); var R = t[0], a = t.slice(1, 5), O = t[5], E = t.slice(6, 8), _ = t.slice(8, 10), r = t[10], n = t.slice(11, t.byteLength - 2); StarRtc.debug("parseProtocol: msgArr = ", n); var s = t.slice(t.byteLength - 2, t.byteLength); c({ appid: R, plength: a, appver: O, rese1: E, rese2: _, actionid: r, msgArr: n, end: s })
然后再改造下 star_rtc_ws.js 里面的 send 方法 在发送和心跳发送的时候都需要改造，如图：
// 处理发送的数据格式： function handleUint8Array(data) { let init8arr = new Uint8Array(data) return init8arr.buffer }
这里再附上 star_rtc_ws.js 代码，由于展示的问题，可以重开始复制到结尾： <---star_rtc_ws开始---> export const StartRtcWs = function(_callback, _srcScheduleUrl) { var self = this; var srcScheduleUrl = _srcScheduleUrl;
var callback = _callback; var starWebsocket = null;
var heartbeat_timer; self.startHeartBeat = function (heartBeatMsg, interval) { var intervalTime = interval || 5000; if (starWebsocket != null && starWebsocket.readyState == 1) { starWebsocket.send({ data: handleUint8Array(heartBeatMsg), success: (res) => { // console.log(res) }, fail: (res) => { console.log("发送失败", res) }, });
}
heartbeat_timer = setInterval(function () { if (starWebsocket != null && starWebsocket.readyState == 1) { starWebsocket.send({ data: handleUint8Array(heartBeatMsg), success: (res) => { // console.log(res) }, fail: (res) => { console.log("发送失败", res) }, });
} }, intervalTime);
}
// 处理发送的数据格式： function handleUint8Array(data) { let init8arr = new Uint8Array(data) return init8arr.buffer }
//停止心跳 self.stopHeartBeat = function () { clearInterval(heartbeat_timer); }
self.connect = function (url) { console.log('WebSocket连接:' + url);
// starWebsocket = new WebSocket(url);
starWebsocket = wx.connectSocket({ url, header: { 'content-type': 'application/json' }, method: 'post', })
//连接发生错误的回调方法 starWebsocket.onError = function (event) { // StarRtc.warn("WebSocket连接发生错误:" + url); callback({ "msg": "WebSocket连接发生错误", "data": event.data }, "connect failed"); };
//连接成功建立的回调方法 starWebsocket.onOpen(event => { console.log("WebSocket连接成功:" + url); callback({ "msg": "WebSocket连接成功" }, "connect success"); });
//接收到消息的回调方法 starWebsocket.onMessage(event => { console.log("服务端返回的消息：") // console.log(event) console.log(event.data) callback(event.data, "onmessage"); })
//连接关闭的回调方法 starWebsocket.onClose = function (event) { console.log("WebSocket连接关闭:" + url); self.stopHeartBeat(); callback({ "msg": "WebSocket连接关闭", "data": event.code }, "connect closed"); starWebsocket = null; };
}
self.send = function (msg) { starWebsocket.send({ data: handleUint8Array(msg), success: (res) => { // console.log('发送成功', res) }, fail: (res) => { console.log("发送失败", res) }, complete: (res) => { // console.log("发送完成", res) } }); }
self.close = function () { if (starWebsocket != null) { starWebsocket.close(); } }
self.readyState = function () { if (starWebsocket != null) { return starWebsocket.readyState; } else { return -1; } }
return self; } <<---star_rtc_ws结尾--->> 4.最后一步需要更换web端的Websocket
在star_rtc_lib.min.js 底部替换 和 导出 StarRtc.WebrtcWebsocket = StartRtcWs export { StarRtc }
具体的使用实例化，就和web端差不多了，这里使用443的端口，是手机连接服务需要这个端口。
调用登录的方法
最后成功的话，控制台会打印对应的信息：
单聊的消息也是可以发送的
由于是公司的项目，不能给源码地址，哪里有问题可以讨论解决
最后公司放弃了这个项目，想起来真可惜，如果继续做下去，就可以开发视频聊天的功能了，和作者说一样， 视频方面走小程序的sdk
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.
