Rongcloud. js this is my package integration of rongcloud module
Link to melt cloud step login -> Initialize IM -> link
To use some resources link below links: pan.baidu.com/s/1tOcHOA1d… Extraction code: UBS7
rongcloud.js
var appKey = "Your appkey";
var appSecret = "The appSecret you";
var statusDesc = {
CONNECTED: "Connection successful".CONNECTING: "Connected".DISCONNECTED: "Disconnect".KICKED: "User's account is logged in from another device, this opportunity will be kicked off.".NETWORK_UNAVAILABLE: "Network unavailable".SERVER_INVALID: "Server is abnormal or disconnected".TOKEN_INCORRECT: "Token incorrect",}var disConnectReasonDesc = {
1: 'Your party cancels the call request'.2: 'Your party refused to receive a call request'.3: 'Hang up your side'.4: 'Own busy'.5: 'Your side is not answering'.6: 'Current engine not supported'.7: 'Own network error'.8: 'Your camera initialization error, maybe camera permission is not enabled'.9: 'Other end has answered'.11: 'Cancel the call request'.12: 'Call request rejected by the other party'.13: 'Caller hangs up during call'.14: '对方忙碌'.15: 'There is no answer'.16: 'The other engine is not supported'.17: 'Peer network error'.18: 'IM IPC service is disconnected',}function RongCloud() {
this.appReception = true
this.nowTargetId = ' '
this.rong = api.require('rongCloud2');
this.messageType = {
'RC:VSTMsg': '[Video call]'.'RC:ImgMsg': '[images]'.'RC:VcMsg': '[Voice message]'}}function stringifyParse(stringify) {
return JSON.parse(stringify)
}
function date_format(micro_second) {
/ / the total number of seconds
var second = Math.floor(micro_second / 1000);
/ / number of days
// var day = Math.floor(second / 3600 / 24);
/ / hour
var hr = Math.floor(second / 3600 % 24);
/ / minute
var min = Math.floor(second / 60 % 60);
/ / SEC.
var sec = Math.floor(second % 60);
return (hr < 10 ? '0' + hr : hr) + ":" + (min < 10 ? '0' + min : min) + ":" + (sec < 10 ? '0' + sec : sec);
};
RongCloud.prototype.login = function (id, zh, tx, callback) {
/ / access token
var userId = id;
/ / member id
var name = zh;
// Member nicknames
var portraitUri = tx;
// Member profile picture
var nonce = Math.floor(Math.random() * 1000000);
/ / random number
var timestamp = Date.now();
/ / timestamp
var signature = sha1("" + appSecret + nonce + timestamp);
// Data signature (hash encryption)
api.ajax({
url: "http://api.cn.ronghub.com/user/getToken.json".method: "post".headers: {
"RC-App-Key": appKey,
"RC-Nonce": "" + nonce,
"RC-Timestamp": "" + timestamp,
"RC-Signature": "" + signature,
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
values: {
userId: userId,
name: name,
portraitUri: portraitUri
}
}
}, function (ret, err) {
if (ret) {
callback(ret)
} else {
api.toast({
msg: 'Communication link failed 🔗~'.duration: 3000.location: 'bottom'}); }}); } RongCloud.prototype.stopVideo =function () {
var that = this
api.stopPlay();
clearInterval(that.timer)
}
RongCloud.prototype.startVideo = function () {
var that = this
api.startPlay({
path: 'widget://image/chat/voice.amr' // The sound is placed in the call folder. If you want to change the location, note that this should also be changed
}, function (ret, err) {}); that.timer =setInterval(function () {
api.startPlay({
path: 'widget://image/chat/voice.amr' // The sound is placed in the call folder. If you want to change the location, note that this should also be changed
}, function (ret, err) {}); },5000)
}
RongCloud.prototype.removeConversation = function (targetId, winName, functionName) {
var that = this;
that.rong.removeConversation({
conversationType: 'PRIVATE'.targetId: targetId
}, function (ret, err) {
api.execScript({
name: winName,
script: 'vm.' + functionName + '('+ JSON.stringify(ret) +') '
});
});
}
RongCloud.prototype.init = function (callback) {
var that = this;
that.rong.init({}, function (ret, err) {
if (ret.status == 'success') {
that.rong.setConnectionStatusListener(function (ret, err) {
mineAlert(statusDesc[ret.result.connectionStatus])
});
that.setCallListener()
apiAddEventListener('removeConversation'.function (ret, err) {
that.removeConversation(ret.value.targetId, ret.value.winName, ret.value.functionName)
});
apiAddEventListener('pause'.function (ret, err) {
that.appReception = true
});
apiAddEventListener('resume'.function (ret, err) {
that.appReception = false
});
apiAddEventListener('setNowTargetId'.function (ret, err) {
if (ret.value.targetId) {
that.nowTargetId = ret.value.targetId
} else {
that.nowTargetId = ' '}}); apiAddEventListener('startVideo'.function (ret, err) {
that.startVideo()
});
apiAddEventListener('stopVideo'.function (ret, err) {
that.stopVideo()
});
apiAddEventListener('noticeclicked'.function (ret, err) {
if (ret.value) {
var value = JSON.parse(ret.value);
if (ret.type == 0) {
newOpenWindow(pageUrl.chat, {
targetId: value.message.targetId
})
//APICloud push content
} else if (ret.type == 1) {
newOpenWindow(pageUrl.chat, {
targetId: value.message ? value.message.targetId : value.targetId
})
// The developer defines the message}}}); that.rong.setOnReceiveMessageListener(function (ret) {
apiSendEvent('receiveMessage', ret.result)
if ((ret.result.message.targetId == that.nowTargetId) && that.appReception) {
that.setMessageReceivedStatus({
messageId: ret.result.message.messageId,
receivedStatus: 'READ'
}, function () {
apiSendEvent('getConversationList')})}else {
apiSendEvent('notificationYN', ret.result)
apiSendEvent('getConversationList')}// console.log(JSON.stringify(ret))
});
apiAddEventListener('notificationYN'.function (ret) {
api.notification();
api.notification({
notify: {
title: 'Buoyant psychology'.content: ret.value.message.objectName == 'RC:TxtMsg' ? ret.value.message.content.text : ('You have one' + that.messageType[ret.value.message.objectName] + 'message'),
extra: ret.value
}
});
})
}
callback(ret, err)
});
}
RongCloud.prototype.setCallListener = function () {
var that = this;
// Call received event
that.rong.addCallReceiveListener({
target: 'didReceiveCall'
}, function (ret, err) {
var callId = ret.callSession.callId;
var uid = ret.callSession.targetId;
// // is to enter the video interface, uid and callId need not be changed here. CallStatus indicates the button status. 3 indicates the call display.
newOpenWindow(pageUrl.showVideo, {
uid: uid,
callId: callId,
callStatus: 3.mediaType: ret.callSession.mediaType
})
console.log('call' + JSON.stringify(ret))
// Play the sound
api.startPlay({
path: 'widget://image/chat/voice.amr' // The sound is placed in the call folder. If you want to change the location, note that this should also be changed
}, function (ret, err) {}); that.timer =setInterval(function () {
api.startPlay({
path: 'widget://image/chat/voice.amr' // The sound is placed in the call folder. If you want to change the location, note that this should also be changed
}, function (ret, err) {}); },5000)});// // Event that a call is connected
that.rong.addCallSessionListener({
target: 'didConnect'
}, function (ret) {
console.log('Call connected event' + JSON.stringify(ret))
// Turn off the sound
api.stopPlay();
clearInterval(that.timer)
});
// // Indicates that the peer user joins the call
that.rong.addCallSessionListener({
target: 'remoteUserDidJoin'
}, function (ret) {
console.log('Event that peer User joined a call' + JSON.stringify(ret))
that.rong.getCallSession(function (ret) {
console.log('Conversation message' + JSON.stringify(ret))
apiSendEvent('myRemoteUserDidJoin', ret)
// The code to perform the call is placed here, not in didConnect above.
// api.execScript({
// name: 'showVideo_win',
// frameName: 'showVideo_frm',
// script: 'window.rootVue.setCallStatus('+2+'); '// the showVideo_win page is also in the call folder. Change callStatus to 2
// });
//callerUserId ID of the user who makes the call
//selfUserId SelfId
//targetId Specifies the ID of the peer
// api.execScript({
// name: 'showVideo_win',
// script: 'window.rootVue.showVideo("'+ret.selfUserId+'","'+ret.targetId+'"); '// leave the selfUserId and targetId untouched.
// });
// Re-open showVideo_frm and bring the frame button to the front of video
// api.execScript({
// name: 'showVideo_win',
// script: 'openFram(); '
// });
});
// Turn off the sound
api.stopPlay();
clearInterval(that.timer)
});
// // Event that the peer user's phone is ringing
that.rong.addCallSessionListener({
target: 'remoteUserDidRing'
}, function (ret) {
console.log('Event that peer user is ringing' + JSON.stringify(ret))
});
// // The event that the peer user changed the media type
that.rong.addCallSessionListener({
target: 'remoteUserDidChangeMediaType'
}, function (ret) {
console.log('Event where peer user switched media type' + JSON.stringify(ret))
});
// // Indicates the event that the peer user enables or disables the camera
that.rong.addCallSessionListener({
target: 'remoteUserDidDisableCamera'
}, function (ret) {
console.log('Event when the peer user turns on or off the camera state' + JSON.stringify(ret))
});
// // The call ended
that.rong.addCallSessionListener({
target: 'didDisconnect'
}, function (ret) {
console.log('Call Ended Event' + JSON.stringify(ret))
api.stopPlay();
clearInterval(that.timer)
apiSendEvent('didDisconnect', {
targetId: ret.userId,
messageDirection: ret.callerUserId == ret.userId ? 'RECEIVE' : 'SEND'.objectName: 'RC:VSTMsg'.sentTime: new Date().getTime(),
content: {
activeTime: ret.startTime,
endTime: ret.endTime,
hangupReason: ret.disConnectReason,
mediaType: ret.mediaType,
}
})
api.closeWin({
name: 'showVideo'
});
mineAlert(disConnectReasonDesc[ret.disConnectReason])
});
// The peer user hangs up
that.rong.addCallSessionListener({
target: 'remoteUserDidLeft'
}, function (ret) {
console.log('Peer User Hangs up' + JSON.stringify(ret))
api.stopPlay();
clearInterval(that.timer)
api.closeWin({
name: 'showVideo'
});
mineAlert(disConnectReasonDesc[ret.disConnectReason])
});
}
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / voice/video surveillance / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
RongCloud.prototype.connect = function (token, callback) {
var that = this;
that.rong.connect({
token: token
}, function (ret, err) {
callback(ret, err)
});
}
RongCloud.prototype.startCall = function (params, callback) {
var that = this;
newHasPermission('This feature requires you to grant microphone and camera permissions'[{name: 'microphone'.failDesc: 'Failed to authorize microphone permission'
}, {
name: 'camera'.failDesc: 'Failed to grant camera permissions'}].function () {
that.rong.startCall(params, function (ret, err) {
// api.startPlay({
Widgets: / / / path: '/ image/chat/voice. Amr' folder / / voice in the call, if you want to change the position, pay attention to here will also change
// }, function (ret, err) {});
// that.timer = setInterval(function () {
// api.startPlay({
Widgets: / / / path: '/ image/chat/voice. Amr' folder / / voice in the call, if you want to change the position, pay attention to here will also change
// }, function (ret, err) {});
// }, 5000)
callback(ret, err)
});
})
}
RongCloud.prototype.setVideoView = function (params) {
var that = this;
if(! params.rect) { params.rect = {x: 0.y: 0.w: api.winWidth,
h: api.winHeight
}
}
if(! params.userId) { mineAlert("Missing open video object")
return false
}
that.rong.setVideoView({
rect: params.rect,
userId: params.userId,
bg: '#ff0000'.renderModel: 'hidden'.fixedOn: api.frameName,
fixed: true
});
}
RongCloud.prototype.accept = function (params) {
var that = this;
newHasPermission('This feature requires you to grant microphone and camera permissions'[{name: 'microphone'.failDesc: 'Failed to authorize microphone permission'
}, {
name: 'camera'.failDesc: 'Failed to grant camera permissions'}].function () {
params.mediaType ? ' ' : (params.mediaType = 'video');
that.rong.accept(params);
})
}
RongCloud.prototype.hangup = function () {
var that = this;
that.rong.hangup();
that.stopVideo()
}
RongCloud.prototype.getConversationList = function (callback) {
var that = this;
that.rong.getConversationList(function (ret, err) {
callback(ret)
})
}
RongCloud.prototype.setMessageReceivedStatus = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
that.rong.setMessageReceivedStatus(params, function (ret, err) {
callback(ret)
})
}
RongCloud.prototype.clearMessagesUnreadStatus = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
that.rong.clearMessagesUnreadStatus(params, function (ret, err) {
callback(ret)
})
}
RongCloud.prototype.sendTextMessage = function (params, callback) {
var that = this;
// PRIVATE (PRIVATE)
// DISCUSSION
// GROUP (GROUP)
// a CHATROOM
// CUSTOMER_SERVICE
// SYSTEM (SYSTEM)
params.conversationType = 'PRIVATE'
if(! params.targetId) { mineAlert("Missing sending object")
return false
}
if(! params.text) { mineAlert("Please enter what you want to send")
return false
}
that.rong.sendTextMessage(params, callback)
}
RongCloud.prototype.sendVoiceMessage = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
if(! params.targetId) { mineAlert("Missing sending object")
return false
}
if(! params.voicePath) { mineAlert("Missing contents to send")
return false
}
// conversationType: 'PRIVATE',
// targetId: '9527',
// oldestMessageId: 688,
// count: 20
that.rong.sendVoiceMessage(params, callback)
}
RongCloud.prototype.sendImageMessage = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
if(! params.targetId) { mineAlert("Missing sending object")
return false
}
if(! params.imagePath) { mineAlert("Missing contents to send")
return false
}
// function(ret, err) {
// if (ret.status == 'prepare')
// api.toast({ msg: JSON.stringify(ret.result.message) });
// else if (ret.status == 'progress')
// api.toast({ msg: ret.result.progress });
// else if (ret.status == 'success')
// api.toast({ msg: ret.result.message.messageId });
// else if (ret.status == 'error')
// api.toast({ msg: err.code });
// }
that.rong.sendImageMessage(params, callback);
}
RongCloud.prototype.sendSightMessage = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
if(! params.targetId) { mineAlert("Missing sending object")
return false
}
if(! params.sightPath) { mineAlert("Missing contents to send")
return false
}
// conversationType: 'PRIVATE',
// targetId: '9527',
// thumbPath: 'fs:///xxx/xxx/picture.jpg',
// sightPath:'',
// duration: 10,
// extra: ''
// function(ret, err) {
// if (ret.status == 'prepare')
// api.toast({ msg: JSON.stringify(ret.result.message) });
// else if (ret.status == 'progress')
// api.toast({ msg: ret.result.progress });
// else if (ret.status == 'success')
// api.toast({ msg: ret.result.message.messageId });
// else if (ret.status == 'error')
// api.toast({ msg: err.code });
// }
that.rong.sendSightMessage(params, callback);
}
RongCloud.prototype.getHistoryMessages = function (params, callback) {
var that = this;
params.conversationType = 'PRIVATE'
if(! params.targetId) { mineAlert("Missing sending object")
return false
}
that.rong.getHistoryMessages(params, callback);
}
RongCloud.prototype.getConnectionStatus = function (callback) {
this.rong.getConnectionStatus(callback);
}
RongCloud.prototype.getUnreadCount = function (params, callback) {
params.conversationType = 'PRIVATE'
this.rong.getUnreadCount(params, callback);
}
RongCloud.prototype.setMuted = function (muted) {
var that = this;
that.rong.setMuted({
muted: muted
}, function (ret) { })
}
RongCloud.prototype.setSpeakerEnabled = function (speakerEnabled) {
var that = this;
that.rong.setSpeakerEnabled({
speakerEnabled: speakerEnabled
}, function (ret) {
})
}
RongCloud.prototype.logout = function (callback) {
var that = this;
that.rong.logout(function (ret, err) {
callback(ret)
})
}
function encodeUTF8(s) {
var i, r = [],
c, x;
for (i = 0; i < s.length; i++)
if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
else {
if ((x = c ^ 0xD800) > >10= =0) // Convert to Unicode for four-byte UTF-16
c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
else r.push(0xE0 + (c >> 12 & 0xF));
r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
};
return r;
}
// The string is encrypted into the hex string
function sha1(s) {
var data = new Uint8Array(encodeUTF8(s))
var i, j, t;
var l = ((data.length + 8) > > >6 << 4) + 16,
s = new Uint8Array(l << 2);
s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);
s[data.length >> 2] | =0x80< < (24 - (data.length & 3) * 8);
s[l - 1] = data.length << 3;
var w = [],
f = [
function () {
return m[1] & m[2] | ~m[1] & m[3];
},
function () {
return m[1] ^ m[2] ^ m[3];
},
function () {
return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
},
function () {
return m[1] ^ m[2] ^ m[3];
}
],
rol = function (n, c) {
return n << c | n >>> (32 - c);
},
k = [1518500249.1859775393, -1894007588, -899497514],
m = [1732584193, -271733879.null.null, -1009589776];
m[2] = ~m[0], m[3] = ~m[1];
for (i = 0; i < s.length; i += 16) {
var o = m.slice(0);
for (j = 0; j < 80; j++)
w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16].1),
t = rol(m[0].5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
m[1] = rol(m[1].30), m.pop(), m.unshift(t);
for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;
};
t = new DataView(new Uint32Array(m).buffer);
for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);
var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
return (e < 16 ? "0" : "") + e.toString(16);
}).join("");
return hex;
}
Copy the codeVm.rong. Login (Unique identifier of a user, user name, user profile picture,function (res) {
if (res.code == 200 && res.token) {
var token = res.token
apiAddEventListener('rongLogout'.function (ret) {
vm.rong.logout(function (ret) {})}); vm.rong.init(function (ret, err) {
vm.rong.connect(token, function (ret, err) {
if (ret.status == 'success') {
onlineAndOffline(1.function () {
})
apiSendEvent('getConversationList'); // Refresh the list of message menus after re-logging in
// apiAddEventListener('setConversationList', function (ret) {
// vm.rong.getConversationList(function (ret) {
// apiSendEvent('getConversationList', ret);
/ /})
// });
// apiAddEventListener('setHistoryMessages', function (ret) {
// vm.rong.getHistoryMessages(ret.value,function (ret) {
// apiSendEvent('getHistoryMessages', ret);
/ /})
// });
} else {
mineAlert("Communication login error, please log in again")}})})}else {
mineAlert("Communication link failed 🔗")}})Copy the codeHere’s the chat screen
<! DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="Maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = 0, width = device - width, initial - scale = 1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title></title>
<link rel="stylesheet" type="text/css" href=".. /.. /css/aui.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /css/common.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /css/index.css" />
<style>
html.body {
background: #EBEBEB;
}
input.textarea {
/* -webkit-user-select: auto; * /
/* WebKit browser */
/* margin: 0px; padding: 0px; outline: none; * /
}
.emoji:active {
background: rgba(0.0.0.0.09);
}
.backgroundR {
background: rgba(0.0.0.0.09);
}
.aui-chat .aui-chat-content {
color: # 444
}
.aui-chat .aui-chat-left .aui-chat-content {
background-color: #fff;
}
.aui-chat .aui-chat-left .aui-chat-arrow {
background: #fff ! important;
}
.aui-chat .aui-chat-right .aui-chat-content {
background-color: #4070FF;
color: #fff
}
.aui-chat .aui-chat-right .aui-chat-arrow {
background: #4070FF ! important;
}
.van-image {
display: flex;
align-content: flex-start;
}
</style>
</head>
<body>
<div v-cloak id="app">
<van-overlay :custom-style="{'height':'calc( 100vh - ' + keyboardHeight + 'px )'}" :show="recordingStatus">
</van-overlay>
<div @touchstart="emojiShow = false; addShow = false; recordStatus = false; blur()"
:style="{'height': '100vh','overflow':(chatBoxStatus ? 'hidden' : 'auto')}" id="chatBox">
<! -- translateStatus && -->
<div :style="{'transform': 'translateY('+ (((emojiShow || recordStatus || focusStatus || addShow)) ? -keyboardHeight : 0) +'px)'}"
id="chat" class="box_relative">
<van-pull-refresh pulling-text="Scroll down for more history..." loosing-text="Release to load..." v-model="isLoading"
@refresh="onRefresh">
<section id="chat1" @click="emojiShow = false; addShow = false" class="aui-chat">
<div v-if="showTop">
<div
class="aui-margin-t-10 aui-margin-b-10 aui-chat-header aui-flex-col aui-flex-center aui-flex-middle">
<div class=" color_999 aui-font-size-13 aui-padded-l-5 aui-padded-r-5">There is no more history</div>
</div>
</div>
<template :key="index" v-for="(item,index) in messagesList">
<div>
<div class="aui-chat-header aui-flex-col aui-flex-center aui-flex-middle">
<div class="bg_CCC color_fff aui-font-size-13 aui-padded-l-5 aui-padded-r-5"
style="Border - the radius: 0.21 rem;">
{{dateFtt1(item.sentTime)}}
</div>
</div>
</div>
<div
:class="['aui-chat-item', item.messageDirection == 'RECEIVE' ? 'aui-chat-left' : 'aui-chat-right']">
<div class="aui-chat-media">
<van-image round width="2rem" height='2rem' fit="cover"
:src="item.messageDirection == 'RECEIVE' ? otherInfo.headPortrait : userInfo.headPortrait">
</van-image>
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">{{item.messageDirection == 'RECEIVE' ? otherInfo.nickName : userInfo.name}}</div>
<div class="aui-chat-content">
<div :style="item.objectName == 'RC:VSTMsg' ? 'width:auto':''"
class="aui-chat-arrow"></div>
<template v-if="item.objectName == 'RC:TxtMsg'">
<template
v-if="item.content.extra && stringifyParse(item.content.extra).type && stringifyParse(item.content.extra).type == 'call'">
<div @click="startCall" style="flex-wrap: nowrap;"
class="aui-flex-col aui-flex-middle">
<img style="Width: 0.85 rem;" class="aui-margin-r-5"
:src=" item.messageDirection == 'RECEIVE' ? '.. /.. /image/chat/callyou.png' : '.. /.. /image/chat/callme.png'" />
<div></div>
{{item.content ?
item.content.text : ''}}
</div>
</template>
<div v-else>
{{item.content ?
item.content.text : ''}}
</div>
</template>
<template v-else-if="item.objectName == 'RC:VSTMsg'">
<div @click="startCall" style="flex-wrap: nowrap;"
class="aui-flex-col aui-flex-middle">
<img style="Width: 0.85 rem;" class="aui-margin-r-5"
:src=" item.messageDirection == 'RECEIVE' ? '.. /.. /image/chat/callyou.png' : '.. /.. /image/chat/callme.png'" />
<div style="white-space: nowrap;"
v-if="item.content.hangupReason ! = 11 && item.content.activeTime ! = 0 && item.content.endTime ! = 0">Call End {{date_format(item.content.endtime-item.content.activeTime)}}</div>
<div v-else>
{{disConnectReasonDesc[item.content.hangupReason]}}
</div>
</div>
</template>
<template v-else-if="item.objectName == 'RC:ImgMsg'">
<div class="box_relative">
<div v-if="item.progress && (item.progress ! = 100 || item.fail == 1)"
class="box_absolute aui-flex-col aui-flex-middle aui-font-size-14 color_fff aui-flex-center"
style="z-index:100; left: 0; width: 100%; top: 0; height: 100%; Background: rgba(0, 0, 0, 0.39);">
{{item.progress}}%
</div>
<van-image @click="chatPhoto(index)" fit="cover"
:src="item.content ? item.content.imageUrl : ''">
</van-image>
</div>
</template>
<template v-if="item.objectName == 'RC:VcMsg'">
<div class="aui-flex-col aui-flex-middle aui-flex-center"
@click="startPlay(index,item.content.voicePath)">
<img style="Width: 1.2 rem;" class="aui-margin-r-5"
:src="item.start ? '.. /.. /image/chat/playing.gif' : item.messageDirection == 'RECEIVE' ? '.. /.. /image/chat/stop.png' : '.. /.. /image/chat/myS.png'" />
{{item.content ? item.content.duration : ''}}s
</div>
</template>
</div>
<div v-if="item.fail == 1" class="aui-chat-status">
<i class="aui-iconfont aui-icon-info aui-text-danger"></i>
</div>
<div v-if="item.loading == 1" class="aui-chat-status">
<van-loading size="0.78 rem." "></van-loading>
</div>
</div>
</div>
</template>
<! -- "{'height': 'calc( 5rem + ' + ((emojiShow) ? keyboardHeight : 0 ) + 'px )'}" -->
<div class="aui-chat-item aui-font-size-15" :style="{'height': 'calc( 5rem )'}">
</div>
</section>
</van-pull-refresh>
</div>
<! -- -->
</div>
<footer @touchstart="chatBoxStatus = true" @touchmove="touchmove" @touchend="chatBoxStatus = false" id="textBox"
ref="footer" style="bottom: 0; left: 0; width: 100%;" class="bg_EBEBEB box_fixed footer">
<div class="aui-flex-col aui-flex-between aui-padded-r-10 aui-padded-l-10 aui-flex-middle"
style="flex-wrap: nowrap; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;">
<div @click="recordStatus = ! recordStatus">
<img style="Width: 1.36 rem;"
:src="recordStatus ? '.. /.. /image/chat/auido_acitve.png' : '.. /.. /image/chat/audio.png'" />
</div>
<div class="aui-flex-col aui-flex-auto aui-padded-10">
<div class="bg_F5F5F5 aui-padded-10" style="Border - the radius: 0.32 rem. width: 100%; height:100%;">
<textarea @click="showList = [0,current]; emojiShow = false" @blur="blur" @focus="focus"
ref="textarea" v-model="content" id="textarea" class="message"
style="Height: 1.5 em."></textarea>
</div>
</div>
<div style="flex-wrap: nowrap;" class="aui-flex-col aui-flex-middle">
<div class="aui-flex-col aui-flex-middle"
@click="setTimeout(function(){emojiShow = ! emojiShow},10) ">
<img style="Width: 1.36 rem;"
:src="emojiShow ? '.. /.. /image/chat/expression_active.png' : '.. /.. /image/chat/expression.png'" />
</div>
<div class="aui-flex-auto" v-if="content">
<van-button @click="sendTextMessage" class="aui-margin-l-10"
style="Height: 1.496 rem. width: auto;" block :color="themeColor" type="primary">
<span class="aui-font-size-15 color_fff ">send</span>
</van-button>
</div>
<div v-else @click="setTimeout(function(){addShow = ! addShow},10) "
class="aui-flex-col aui-flex-middle aui-padded-l-10">
<img style="Width: 1.36 rem;"
:src="addShow ? '.. /.. /image/chat/add_active.png' : '.. /.. /image/chat/add.png'" />
</div>
</div>
</div>
<! -- <transition name="van-slide-up"> -->
<div :style="'height:calc(' + keyboardHeight + 'px ); '" v-show="recordStatus">
<div class="aui-flex-col aui-padded-30">
<div class="aui-flex-row aui-flex-middle aui-flex-center" style="margin-top: 10%; width: 100%;">
<div class="aui-text-center aui-margin-b-10 aui-font-size-14 color_666">{{recordingStatus ? 'Release send' : 'Hold speak '}}</div>
<div :class="recordingStatus ? 'backgroundR' : 'bg_fff'" @touchstart="startRecord"
@touchend="stopRecord(sendRecord)"
class="aui-shadow aui-flex-col aui-flex-middle aui-flex-center"
style="Height: 4.2 rem. Width: 4.2 rem; border-radius: 50%;">
<img style="width: 60%;" src=".. /.. /image/record.png" />
</div>
</div>
</div>
</div>
<div :style="'height:calc(' + keyboardHeight + 'px ); '" v-show="addShow">
<div class="aui-flex-col aui-padded-30">
<div @click="selectPic1(1,sendImage)" style="Width: 3.4 rem. Height: 3.4 rem; Border - the radius: 0.45 rem."
class="aui-margin-r-15 emoji aui-flex-col aui-flex-center aui-flex-middle bg_fff">
<img style="width: 56%;" src=".. /.. /image/crame.png" />
</div>
<div @click="selectPic1(2,sendImage,3)" style="Width: 3.4 rem. Height: 3.4 rem; Border - the radius: 0.45 rem."
class="emoji aui-margin-r-15 aui-flex-col aui-flex-center aui-flex-middle bg_fff">
<img style="width: 56%;" src=".. /.. /image/photo2.png" />
</div>
<! "> <div @click="startCall" style="width: 3.4rem; Height: 3.4 rem; Border - the radius: 0.45 rem." class="emoji aui-flex-col aui-flex-center aui-flex-middle bg_fff"> <img style="width: 56%;" src=".. /.. /image/videoPlay.png" /> </div> -->
</div>
</div>
<! -- </transition> -->
<! -- <transition name="van-slide-up"> -->
<div id="emojiBox1" ref="emojiBox" @click="stop" class="">
<van-swipe :touchable="touchable" v-show="emojiShow" ref="swipe" @change="onChange">
<template v-for="(item,index) in emojiconfig" :key="index">
<van-swipe-item :style="'height:calc(' + keyboardHeight + 'px - 1.96rem);overflow: scroll;'"
class="content">
<template v-if="showList.indexOf(index) != -1">
<div style="The line - height: 2.2 rem. The font - size: 1.25 rem."
class="aui-text-center aui-flex-col">
<div :value="items" class="emoji" style="Width: 12.5%; Height: 2.2 rem. ""
v-for="(items,i) in item.alias">
{{items}}
</div>
</div>
</template>
</van-swipe-item>
</template>
<template slot="indicator">
<div id="myTab" style="flex-wrap: nowrap; overflow-y: scroll;" class="aui-flex-col">
<div :key="index" v-for="(item,index) in emojiconfig">
<van-button :class="'tab' + index" style="Height: 1.96 rem." " @click="current = index"
:color="current == index ? themeColor : ''" type="default">
{{item.name}}</van-button>
</div>
</div>
</template>
</van-swipe>
</div>
<! -- </transition> -->
</footer>
</div>
</body>
<script type="text/javascript" src=".. /.. /script/api.js"></script>
<script type="text/javascript" src=".. /.. /script/vue.js"></script>
<script type="text/javascript" src=".. /.. /script/jq.js"></script>
<script type="text/javascript" src=".. /.. /script/common.js"></script>
<script type="text/javascript" src=".. /.. /script/component.js"></script>
<script type="text/javascript" src=".. /.. /script/vant.min.js"></script>
<script type="text/javascript" src=".. /.. /script/js/emojisort.js"></script>
<script type="text/javascript" src=".. /.. /script/js/textarea.js"></script>
<script type="text/javascript" src=".. /.. /script/rongcloud.js"></script>
<script type="text/javascript">
if(! HTMLElement.prototype.addTapEvent) { HTMLElement.prototype.addTapEvent =function (callback) {
var tapStartTime = 0,
tapEndTime = 0,
tapTime = 250.//tap wait time under which to release the trigger method
tapStartClientX = 0,
tapStartClientY = 0,
tapEndClientX = 0,
tapEndClientY = 0,
tapScollHeight = 0.// If you move more than 15px horizontally or vertically, it will be cancelled.
cancleClick = false;
this.addEventListener('touchstart'.function (event) {
tapStartTime = event.timeStamp;
var touch = event.changedTouches[0];
tapStartClientX = touch.clientX;
tapStartClientY = touch.clientY;
cancleClick = false;
})
this.addEventListener('touchmove'.function () {
var touch = event.changedTouches[0];
tapEndClientX = touch.clientX;
tapEndClientY = touch.clientY;
if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
cancleClick = true; }})this.addEventListener('touchend'.function (event) {
tapEndTime = event.timeStamp;
if(! cancleClick && (tapEndTime - tapStartTime) <= tapTime) { callback(event); }}}})var emojiconfigElement = []
for (var key in emojiconfig) {
emojiconfigElement.push(emojiconfig[key])
}
var innerHeight = window.innerHeight
var vm = new Vue({
el: "#app".data: function () {
return {
showTop: false.rong: null.targetId: "".count: 8.messagesList: [].content: "".textareaHeight: 0.footHeight: 0.keyboardHeight: 346.textBoxRect: {},
emojiShow: false.emojiconfig: emojiconfigElement,
current: 0.showList: [0].touchable: true.textBoxRect: {},
textarea: null.focusStatus: false.addShow: false.chatBoxStatus: false.recordStatus: false.recordingStatus: false.isLoading: false.fontSize: null.translateStatus: true.userInfo: {},otherInfo: {}}}.watch: {
translateStatus: function (newValue) {
console.log(newValue)
if(! newValue) { vm.$nextTick(function () {
chatBox.scrollTo(0, chat1.offsetHeight)
})
}
},
current: function (newValue) {
if (vm.showList.indexOf(newValue) == -1) {
vm.showList.push(newValue)
}
this.$refs.swipe.swipeTo(newValue)
this.offsetLeft()
},
addShow: function (newValue) {
if (newValue) {
vm.emojiShow = false
vm.recordStatus = false}},recordStatus: function (newValue) {
if (newValue) {
vm.emojiShow = false
vm.addShow = false}},emojiShow: function (newValue) {
// if(newValue)this.$refs.swipe.resize();
this.$nextTick(function () {
if (newValue) {
vm.addShow = false
vm.recordStatus = false
vm.$refs.swipe.resize();
vm.$refs.swipe.swipeTo(vm.current)
vm.offsetLeft()
// window.scrollTo(0, window.scrollY + vm.keyboardHeight + vm.footHeight)
console.log(window.scrollY)
console.log(vm.keyboardHeight, vm.footHeight)
} else {
if (window.scrollY + innerHeight < chat.offsetHeight) {
// window.scrollTo(0, window.scrollY - (vm.keyboardHeight + vm.footHeight))}}})},footHeight: {
handler: function () {
this.$nextTick(function () {
// vm.textareaHeight = this.$refs.footer.offsetHeight})},// execute the handler method immediately after declaring firstName in wacth
immediate: true
},
keyboardHeight: function (newValue) {}},mixins: [mix],
mounted: function () {
// this.$nextTick(function () {
// vm.init()
// })
},
methods: {
chatPhoto(index) {
var imageUrlList = []
var findIndex = 0
vm.messagesList.forEach(function (ele, i) {
if (ele.objectName == 'RC:ImgMsg') {
imageUrlList.push(vm.messagesList[i].content.imageUrl)
}
})
findIndex = imageUrlList.findIndex(function (ele) {
return ele == vm.messagesList[index].content.imageUrl
})
photoBrowser(imageUrlList, findIndex)
},
startRecord: function () {
// Customize the permission application method
hasPermission('Sending voice messages requires microphone recording audio rights'.'microphone'.function (flag) {
if (flag) {
vm.recordingStatus = true
var savePath = 'fs://paxl_' + (+new Date()) + '.amr';
api.startRecord({
path: savePath }); }})// api.notification();
},
startPlay(index, voicePath) {
vm.messagesList.forEach(function (ele) {
if (ele.start) {
Vue.set(ele, 'start'.false)
}
})
api.stopPlay()
vm.messagesList[index].start = true
Vue.set(vm.messagesList, index, vm.messagesList[index])
api.startPlay({
path: voicePath
}, function (ret, err) {
if (ret) {
vm.messagesList[index].start = false
Vue.set(vm.messagesList, index, vm.messagesList[index])
} else {
mineAlert("Playback failed")}}); },sendRecord: function (ret, err) {
if (ret.duration <= 1) {
mineAlert("Keystroke time is too short")
return false
}
vm.sendVoiceMessage({ duration: ret.duration, voicePath: ret.path })
return false
},
stopRecord: function (callback) {
vm.recordingStatus = false
api.stopRecord(callback);
},
touchmove: function () {
// event.preventDefault()
event.stopPropagation()
// console.log(event.target)
// chat.style.overflow="hidden"
// event.cancelBubble()
},
insertText: function (val) {
var textarea = this.$refs.textarea
var str = val;
var startPos;
var endPos;
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof textarea.selectionStart === 'number' && typeof textarea.selectionEnd === 'number') {
startPos = textarea.selectionStart;
endPos = textarea.selectionEnd;
var tmpStr = textarea.value;
textarea.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
} else {
textarea.value += str;
}
textarea.focus();
this.content = textarea.value
if(api.systemType ! ="ios") { textarea.focus(); textarea.selectionStart = startPos + str.length; textarea.selectionEnd = endPos + str.length; textarea.blur(); }},onChange(index) {
this.current = index;
},
offsetLeft: function () {
let offsetLeft = 0
if (this.emojiconfig.length / 2 + 1> =this.current) {
offsetLeft = $('.tab' + this.current)[0].offsetLeft - $('.tab1') [0].offsetLeft * 1.25
} else {
offsetLeft = $('.tab' + this.current)[0].offsetLeft
}
$('#myTab').animate({ scrollLeft: (offsetLeft) }, 200);
},
stop: function (e) {
if(api.systemType ! ="ios") {
let target = e.target ? e.target : e.srcElement
let value = target.getAttribute('value')
value && vm.insertText(value)
}
},
focus: function () {
vm.countKeyboardHeight()
vm.$nextTick(function () {
vm.focusStatus = true
vm.addShow = false
vm.recordStatus = false
if (window.scrollY + innerHeight < chat.offsetHeight) {
// window.scrollTo(0, window.scrollY + vm.keyboardHeight + vm.footHeight)}})},blur: function () {
vm.$nextTick(function () {
this.$refs.textarea.blur()
vm.focusStatus = false
if (window.scrollY + innerHeight < chat.offsetHeight) {
// window.scrollTo(0, window.scrollY - (vm.keyboardHeight + vm.footHeight))}})},toBottom() {
setTimeout(function () {
vm.$nextTick(function () {
chatBox.scrollTo(0, chat1.offsetHeight)
})
}, 300)},countKeyboardHeight: function () {
vm.$nextTick(function () {
if (api.systemType == "ios") {
vm.$refs.emojiBox.addTapEvent(function (e) {
// console.log(event)
let target = e.target ? e.target : e.srcElement
let value = target.getAttribute('value')
value && vm.insertText(value)
})
vm.touchable = false
var textBoxRect = textBox.getBoundingClientRect()
if (vm.textBoxRect.y - textBoxRect.y > 0) {
vm.keyboardHeight = vm.textBoxRect.y - textBoxRect.y
}
}
})
},
init: function () {
var fontSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html') [0]).fontSize)
fontSize = (isNaN(fontSize) ? 20 : fontSize);
vm.fontSize = fontSize
autoTextarea(textarea, 0, fontSize * 3.function (height) {
vm.footHeight = height
})
vm.getHistoryMessages(function () {
vm.$nextTick(function () {
vm.toBottom()
if(api.systemType ! ="ios") {
const h = api.winHeight
window.onresize = function () { // If the current window is smaller than the height originally recorded, make the current window equal to the height originally recorded
var keyboardHeight = h - api.winHeight
if (keyboardHeight > 0) {
setTimeout(function () {
vm.keyboardHeight = keyboardHeight
}, 0)}}}else {
vm.textBoxRect = textBox.getBoundingClientRect()
}
})
})
chatBox.onscroll = function () {
var windowH = document.documentElement.clientHeight;
var documentH = chat1.offsetHeight;
var scrollH = chatBox.scrollTop;
console.log(windowH, documentH, scrollH)
if (windowH + scrollH >= documentH - 20) {
//do something
vm.translateStatus = false
} else {
vm.translateStatus = true
}
}
vm.clearMessagesUnreadStatus()
// vm.getUnreadCount()
},
getUnreadCount() {
// Count all unread messages of the current chat object
var obj = {
targetId: vm.targetId,
}
vm.rong.getUnreadCount(obj, function (ret) {
// alert(JSON.stringify(ret))})},clearMessagesUnreadStatus() {
// Clears all unread messages for the current chat object
var obj = {
targetId: vm.targetId,
}
vm.rong.clearMessagesUnreadStatus(obj, function (ret) {
// alert(JSON.stringify(ret))})},startCall() {
return false
var params = {
targetId: vm.targetId + ' '.mediaType: 'video'.conversationType: 'PRIVATE'.userIdList: [vm.targetId + ' ']
}
vm.rong.startCall(params, function (ret) {
vm.sendTextMessage(1."Made a video call.", { type: 'call' })
apiSendEvent('startVideo')
newOpenWindow(pageUrl.showVideo, { uid: vm.targetId, callId: ret.callSession.callId, callStatus: 1.mediaType: params.mediaType })
})
},
getHistoryMessages(callback) {
var obj = {
targetId: vm.targetId,
oldestMessageId: vm.messagesList.length > 0 ? vm.messagesList[0].messageId : -1.count: vm.count,
}
vm.rong.getHistoryMessages(obj, function (ret) {
if (ret.result) {
ret.result.reverse()
vm.messagesList = [].concat(ret.result, vm.messagesList)
console.log(JSON.stringify(vm.messagesList))
} else {
vm.showTop = true
}
if(!!!!! callback) { callback(ret) } }) },sendImage(ret) {
if (typeof ret == "string") {
vm.sendImageMessage(ret)
} else {
ret.forEach(function (element) { vm.sendImageMessage(element) }); }},sendVoiceMessage(params) {
var obj = {
targetId: vm.targetId,
voicePath: params.voicePath,
duration: params.duration,
extra: {}}var length = 0
vm.rong.sendVoiceMessage(obj, function (ret) {
// alert(JSON.stringify(ret.result))
var data = ret
switch (ret.status) {
case 'prepare':
data.result.message.loading = 1
vm.messagesList.push(data.result.message)
length = vm.messagesList.length
vm.toBottom()
break;
case 'progress':
vm.messagesList[length - 1].progress = ret.result.progress
break;
case 'success':
vm.messagesList[length - 1].loading = 0
break;
case 'error':
vm.messagesList[length - 1].fail = 1
vm.messagesList[length - 1].loading = 0
mineAlert("Send failed")
break;
}
// alert(JSON.stringify(ret))})},sendImageMessage(imagePath) {
var obj = {
targetId: vm.targetId,
imagePath: imagePath,
extra: {}}var length = 0
vm.rong.sendImageMessage(obj, function (ret) {
// alert(JSON.stringify(ret.result))
var data = ret
switch (ret.status) {
case 'prepare':
data.result.message.loading = 1
vm.messagesList.push(data.result.message)
length = vm.messagesList.length
vm.toBottom()
break;
case 'progress':
vm.messagesList[length - 1].progress = ret.result.progress
break;
case 'success':
vm.messagesList[length - 1].loading = 0
break;
case 'error':
vm.messagesList[length - 1].fail = 1
vm.messagesList[length - 1].loading = 0
mineAlert("Send failed")
break;
}
// alert(JSON.stringify(ret))})},sendTextMessage(a, text, params) {
var obj = {
targetId: vm.targetId,
text: a == 1 ? text : vm.content,
extra: {
...params,
}
}
var length = 0
vm.rong.sendTextMessage(obj, function (ret) {
// alert(JSON.stringify(ret.status))
// alert(JSON.stringify(ret.result))
var data = ret
switch (ret.status) {
case 'prepare':
data.result.message.loading = 1
vm.content = ""
if (vm.fontSize) {
textarea.style.height = vm.fontSize + 'px'
}
vm.messagesList.push(data.result.message)
length = vm.messagesList.length
vm.toBottom()
break;
case 'success':
vm.messagesList[length - 1].loading = 0
break;
case 'error':
vm.messagesList[length - 1].fail = 1
vm.messagesList[length - 1].loading = 0
mineAlert("Send failed")
break;
}
// alert(JSON.stringify(ret))})},onRefresh: function () {
vm.getHistoryMessages(function () {
vm.isLoading = false
})
}
}
})
apiready = function () {
getLoginInfo(function (res) {
vm.userInfo = res
})
apiAddEventListener('upDateUserInfo'.function () {
getLoginInfo(function (res) {
vm.userInfo = res
})
})
vm.targetId = api.pageParam.targetId
getAccount(vm.targetId,function(res){
vm.otherInfo = res
})
vm.rong = new RongCloud()
apiSendEvent('setNowTargetId', { targetId: vm.targetId });
vm.rong.getConnectionStatus(function (ret) {
// alert(JSON.stringify(ret))
// alert(statusDesc[ret.result.connectionStatus])
if (ret.result.connectionStatus == 'CONNECTED') {}else {
mineAlert("Chat initialization failed. Please log in again.")
}
})
apiAddEventListener('didDisconnect'.function (ret) {
vm.messagesList.push(ret.value)
vm.toBottom()
});
apiAddEventListener('receiveMessage'.function (ret) {
if (ret.value.message.senderUserId == vm.targetId) {
vm.messagesList.push(ret.value.message)
vm.toBottom()
}
});
vm.init();
// api.setRefreshHeaderInfo({
// bgColor: '#ccc',
// textColor: '#fff',
// textDown: 'Drop down to load more... ',
// textUp: 'Release load... ',
// textLoading: "加载中..."
// }, function (ret, err) {
// // loads the data from the server here and calls methods to restore the component to its default state when the load is complete
// //
// });
}
</script>
</html>
Copy the code
Video Call interface
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="Maximum-scale =1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src=".. /.. /script/api.js"></script>
<script type="text/javascript" src=".. /.. /script/vue.js"></script>
<script type="text/javascript" src=".. /.. /script/common.js"></script>
<script type="text/javascript" src=".. /.. /script/vant.min.js"></script>
<script type="text/javascript" src=".. /.. /script/rongcloud.js"></script>
<script>
// Initialize vue
var vm = new Vue({
el: '#app'.data: function () {
return {
uid: ' '.callId: ' '.mediaType:""}},methods: {
// Open the video
showVideo: function (uid1, uid2) { //uid Indicates your own ID, uid2 indicates someone else's ID
rong.setVideoView({
rect: {
x: 0.y: 0.w: api.winWidth,
h: api.winHeight
},
userId: uid2,
bg: '#ff0000'.renderModel: 'hidden'.fixed: true
});
// Open your own video
rong.setVideoView({
rect: {
x: api.winWidth - 130.y: api.safeArea.top + 20.w: 110.h: 180
},
userId: uid1,
bg: '#ff0000'.renderModel: 'hidden'.fixed: true
});
},
// Re-open the video
resetVideoView: function (uid) {
var rong = api.require('rongCloud2');
rong.resetVideoView({
userId: uid }); }},// mounted: function () {
// setTimeout(function () {
// openFram();
/ /}, 500)
// }
});
apiready = function () {
vm.callStatus = api.pageParam.callStatus
vm.callId = api.pageParam.callId
vm.mediaType = api.pageParam.mediaType
vm.uid = api.pageParam.uid
open_frame(api.pageParam.url, api.pageParam.name, false, {callId:api.pageParam.callId,callStatus:api.pageParam.callStatus,mediaType:api.pageParam.callStatus,uid:vm.uid});
api.addEventListener({
name: 'keyback'
}, function (ret, err) {
api.execScript({
frameName: api.pageParam.name,
script: 'window.vm.hangup(); '
});
});
}
</script>
</html>
Copy the codeAction buttons that hover over the call screen distinguish between calling and being called
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="Maximum-scale =1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title></title>
<link rel="stylesheet" type="text/css" href=".. /.. /css/aui.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /css/common.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href=".. /.. /script/index.css" />
<style>
html {
background-color: rgba(0.0.0.0.49)}body {
background: transparent;
height: 100vh;
}
</style>
</head>
<body>
<! CallStatus ===3. When answering a call, the profile picture of the person who dialed the call should be displayed -->
<div id="app" style="height: 100%;" class="aui-flex-row aui-flex-between" v-cloak>
<div class="aui-clearfix ">
<div style="Margin - top: 13.6 the vh;" class="aui-flex-row aui-flex-center aui-flex-middle">
<van-image fit='cover' style="Border - the radius: 0.24 rem. overflow: hidden" width='4.71 rem' height='4.71 rem'
:src="headPortrait">
</van-image>
<div class="aui-margin-t-10 aui-text-center color_fff aui-font-size-18 aui-font-weight">
{{name}}
</div>
</div>
</div>
<div style="padding-bottom: 5vh;" class="nor_box color_fff aui-font-size-13">
<template v-if="start">
<div class="aui-padded-l-15 aui-padded-r-15 aui-flex-col aui-flex-between">
<div @click='muted = ! muted' class="aui-text-center ">
<img style="Width: 3.3 rem;"
:src="muted ? '.. /.. /image/chat/call3-close.png' : '.. /.. /image/chat/call3-on.png'" />
<div class="aui-margin-t-5">mute</div>
</div>
<div @click="hangup" class="aui-text-center ">
<img style="Width: 3.3 rem;" src=".. /.. /image/chat/call2.png" />
<div class="aui-margin-t-5">Hang up</div>
</div>
<div @click='speakerEnabled = ! speakerEnabled' class="aui-text-center ">
<img style="Width: 3.3 rem;"
:src="speakerEnabled ? '.. /.. /image/chat/call1-on.png' :'.. /.. /image/chat/call1-close.png'" />
<div class="aui-margin-t-5">hands-free</div>
</div>
</div>
</template>
<template v-else>
<template v-if="callStatus == 1">
<div class="aui-padded-l-15 aui-padded-r-15 aui-flex-col aui-flex-center">
<div @click="hangup" class="aui-text-center ">
<img style="Width: 3.3 rem;" src=".. /.. /image/chat/call2.png" />
<div class="aui-margin-t-5">Hang up</div>
</div>
</div>
</template>
<template v-else>
<div class="aui-padded-l-15 aui-padded-r-15 aui-flex-col aui-flex-between">
<div @click="hangup" class="aui-text-center ">
<img style="Width: 3.3 rem;" src=".. /.. /image/chat/call2.png" />
<div class="aui-margin-t-5">Hang up</div>
</div>
<div @click="accept" class="aui-text-center ">
<img style="Width: 3.3 rem;" src=".. /.. /image/chat/call4.png" />
<div class="aui-margin-t-5">answer</div>
</div>
</div>
</template>
</template>
</div>
</div>
</body>
<script type="text/javascript" src=".. /.. /script/api.js"></script>
<script type="text/javascript" src=".. /.. /script/vue.js"></script>
<script type="text/javascript" src=".. /.. /script/common.js"></script>
<script type="text/javascript" src=".. /.. /script/vant.min.js"></script>
<script type="text/javascript" src=".. /.. /script/rongcloud.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app'.data: function () {
return {
rong: null.mediaType: "".callId: "".callStatus: "1".muted: false.speakerEnabled: false.start: false.uid:"".headPortrait: "".name: ""}},watch: {
muted: function (newValue) {
vm.rong.setMuted(newValue, function () {})},speakerEnabled: function (newValue) {
vm.rong.setSpeakerEnabled(newValue, function () {})}},methods: {
init: function () {},accept: function () {
vm.rong.accept({ mediaType: vm.mediaType, callId: vm.callId })
},
hangup() {
vm.rong.hangup()
apiSendEvent('stopVideo'); api.closeWin(); }}}); apiready =function () {
vm.callStatus = api.pageParam.callStatus
vm.callId = api.pageParam.callId
vm.mediaType = api.pageParam.mediaType
vm.rong = new RongCloud()
vm.uid = api.pageParam.uid
getAccount(vm.uid, function (res) {
if (res) {
vm.name = res.nickName
vm.headPortrait = res.headPortrait
}
})
vm.init()
apiAddEventListener('myRemoteUserDidJoin'.function (ret) {
vm.start = true
vm.rong.setVideoView({
userId: ret.value.targetId,
});
// Open your own video
vm.rong.setVideoView({
rect: {
x: api.winWidth - 130.y: api.safeArea.top + 20.w: 110.h: 180
},
userId: ret.value.selfUserId,
});
myOpenFrame('callphone_frm',api.pageParam)
});
}
</script>
</html>
Copy the code