記得插攝像頭 記得插攝像頭 記得插攝像頭
html
<div>
<div class="webim-rtc-video">
<video id="video" class="full" autoplay>
</video>
<video id="localVideo" class="corner" autoplay>
</video>
</div>
<botton class="cancel" onclick="call()">呼叫</botton>
<botton class="cancel" onclick="endCall()">掛斷</botton>
<botton class="cancel" onclick="acceptCall()">接受</botton>
</div>js
var conn = {};
conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval
});
// listern，添加回調函數
conn.listen({
onOpened: function (message) { //連接成功回調，連接成功後纔可以發送消息
//如果isAutoLogin設置爲false，那麼必須手動設置上線，否則無法收消息
// 手動上線指的是調用conn.setPresence(); 在本例中，conn初始化時已將isAutoLogin設置爲true
// 所以無需調用conn.setPresence();
console.log('success');
},
onTextMessage: function (message) {
// 在此接收和處理消息，根據message.type區分消息來源，私聊或羣組或聊天室
console.log(message.type);
console.log('Text');
}, //收到文本消息
onEmojiMessage: function (message) {
// 當爲WebIM添加了Emoji屬性後，若發送的消息含WebIM.Emoji裏特定的字符串，connection就會自動將
// 這些字符串和其它文字按順序組合成一個數組，每一個數組元素的結構爲{type: 'emoji(或者txt)', data:''}
// 當type='emoji'時，data表示表情圖像的路徑，當type='txt'時，data表示文本消息
console.log('Emoji');
var data = message.data;
for (var i = 0, l = data.length; i < l; i++) {
console.log(data[i]);
}
}, //收到表情消息
onPictureMessage: function (message) {
console.log('Picture');
var options = {url: message.url};
options.onFileDownloadComplete = function () {
// 圖片下載成功
console.log('Image download complete!');
};
options.onFileDownloadError = function () {
// 圖片下載失敗
console.log('Image download failed!');
};
WebIM.utils.download.call(conn, options); // 意義待查
}, //收到圖片消息
onCmdMessage: function (message) {
console.log('CMD');
}, //收到命令消息
onAudioMessage: function (message) {
console.log("Audio");
}, //收到音頻消息
onLocationMessage: function (message) {
console.log("Location");
},//收到位置消息
onFileMessage: function (message) {
console.log("File");
}, //收到文件消息
onVideoMessage: function (message) {
var node = document.getElementById('privateVideo');
var option = {
url: message.url,
headers: {
'Accept': 'audio/mp4'
},
onFileDownloadComplete: function (response) {
var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
node.src = objectURL;
},
onFileDownloadError: function () {
console.log('File down load error.')
}
};
WebIM.utils.download.call(conn, option);
}, //收到視頻消息
onPresence: function (message) {
switch (message.type) {
case 'subscribe': // 對方請求添加好友
// 同意對方添加好友
document.getElementById('agreeFriends').onclick = function (message) {
conn.subscribed({
to: 'asdfghj',
message: "[resp:true]"
});
// 需要反向添加對方好友
conn.subscribe({
to: message.from,
message: "[resp:true]"
});
};
// 拒絕對方添加好友
document.getElementById('rejectFriends').onclick = function (message) {
conn.unsubscribed({
to: message.from,
message: "rejectAddFriend" // 拒絕添加好友回覆信息
});
};
break;
case 'subscribed': // 對方同意添加好友，已方同意添加好友
break;
case 'unsubscribe': // 對方刪除好友
break;
case 'unsubscribed': // 被拒絕添加好友，或被對方刪除好友成功
break;
case 'joinChatRoomSuccess': // 成功加入聊天室
console.log('join chat room success');
break;
case 'joinChatRoomFaild': // 加入聊天室失敗
console.log('join chat room faild');
break;
case 'joinPublicGroupSuccess': // 意義待查
console.log('join public group success', message.from);
break;
}
}, //收到聯繫人訂閱請求（加好友）、處理羣組、聊天室被踢解散等消息
onRoster: function (message) {
console.log('Roster');
}, //處理好友申請
onInviteMessage: function (message) {
console.log('Invite');
}, //處理羣組邀請
onOnline: function () {
console.log('onLine');
}, //本機網絡連接成功
onOffline: function () {
console.log('offline');
}, //本機網絡掉線
onError: function (message) {
console.log('Error');
}, //失敗回調
onBlacklistUpdate: function (list) {
// 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息
console.log(list);
} // 黑名單變動
});
// 初始化WebRTC Call
var rtcCall = new WebIM.WebRTC.Call({
connection: conn,
mediaStreamConstaints: {
audio: true,
video: true
},
listener: {
onAcceptCall: function (from, options) {
console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
},
onGotRemoteStream: function (stream) { //自己的視頻流
console.log('onGotRemoteStream::', 'stream: ', stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
},
onGotLocalStream: function (stream) { //呼叫人接受後的視頻流
console.log('onGotLocalStream::', 'stream:', stream);
var video = document.getElementById('localVideo');
video.src = window.URL.createObjectURL(stream);
},
onRinging: function (caller) {
console.log('onRinging::', 'caller:', caller);
},
onTermCall: function (reason) {
console.log('onTermCall::', reason);
console.log('reason:', reason);
},
onIceConnectionStateChange: function (iceState) {
console.log('onIceConnectionStateChange::', 'iceState:', iceState);
},
onError: function (e) {
console.log(e);
}
}
});
首先先登錄
var options = {
apiUrl: WebIM.config.apiURL,
user: hxuser, //用戶名
pwd: hxpwd, //密碼
appKey: WebIM.config.appkey
};
conn.open(options);
呼叫、拒絕、接受按鈕 點擊事件
/*
* WebRTC
*/
// 視頻呼叫對方
var call = function () {
rtcCall.caller = user; //登錄用戶名
rtcCall.makeVideoCall(who); //呼叫人用戶名
};
// 關掉/拒絕視頻
var endCall = function () {
rtcCall.endCall();
}
// 接受對方呼叫
var acceptCall = function () {
rtcCall.acceptCall();
}