web端實時音視頻功能開發指南

yun2win官網：www.yun2win.com

SDK下載地址：http://www.yun2win.com/h-col-107.html

 

簡介

yun2win-sdk-web提供web端實時音視頻功能完整解決方案，方便客戶快速集成音視頻功能. SDK 提供整套解決方案

 

yun2win官網：www.yun2win.com

SDK下載地址：http://www.yun2win.com/h-col-107.html

 

開發准備

1、准備Chrome瀏覽器版本49及以上

2、給網站配置CA證書

3、導入y2wVideo.js文件並添加到main.html

復制

 <script src="js/core/y2wVideo.js?v=0.1"></script>

4、添加自定義界面videoAudio.html

提醒

本地開發，需要生成CA證書,用https訪問，並點擊盾牌，選擇加載不安全的腳本

創建聊天房間

調用以下代碼創建房間：

復制

 var y2wVideo = new RTCManager(); //currentUser.id 當前用戶ID currentUser.imToken 當前用戶的ImToken y2wVideo.createVideo(currentUser.id, currentUser.imToken, function (error, channelId) { if (error) { return; } //發送通知通知其他人，具體看下面 y2w.sendVideoMessage(scene, receiverIds, mode, channelId); //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + mode, "_blank"); });

群聊視頻發起與加入

發起方：

復制

 //發送通知通知其他人 var receiverIds=[];//已經選擇群聊的群成員用戶ID for (var i = 0; i < obj.selected.length; i++) { receiverIds[receiverIds.length] = obj.selected[i].id; } y2w.sendVideoMessage('group', receiverIds, 'video', channelId);//channelId 房間ID //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + 'video', "_blank");

接收方:

復制

 if (syncObj.type == "groupavcall") { var receiversIds = syncObj.content.participants.receiversIds; if (receiversIds) { for (var j = 0; j < receiversIds.length; j++) { if (receiversIds[j] == currentUser.id) { y2w.receive_AV_Mesage(syncObj); break; } } } break; }

群聊音頻發起與加入

發起方：

復制

 var receiverIds=[];//已經選擇群聊的群成員用戶ID for (var i = 0; i < obj.selected.length; i++) { receiverIds[receiverIds.length] = obj.selected[i].id; } //發送通知通知其他人 y2w.sendVideoMessage('group', receiverIds, 'audio', channelId);//channelId 房間ID //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + 'audio', "_blank");

接收方:

復制

 if (syncObj.type == "groupavcall") { var receiversIds = syncObj.content.participants.receiversIds; if (receiversIds) { for (var j = 0; j < receiversIds.length; j++) { if (receiversIds[j] == currentUser.id) { y2w.receive_AV_Mesage(syncObj); break; } } } break; }

一對一視頻發起與加入

發起方：

復制

 var receiverIds=[]; receiverIds[receiverIds.length] = obj;//obj 對方用戶ID //發送通知通知其他人 y2w.sendVideoMessage('p2p', receiverIds, 'video', channelId);//channelId 房間ID //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + 'video', "_blank");

接收方:

復制

 if (syncObj.type == "singleavcall") { var receiversIds = syncObj.content.participants.receiversIds; if (receiversIds) { for (var j = 0; j < receiversIds.length; j++) { if (receiversIds[j] == currentUser.id) { y2w.receive_AV_Mesage(syncObj); break; } } } break; }

一對一音頻發起與加入

發起方：

復制

 var receiverIds=[]; receiverIds[receiverIds.length] = obj;//obj 對方用戶ID //發送通知通知其他人 y2w.sendVideoMessage('p2p', receiverIds, 'audio', channelId);//channelId 房間ID //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + 'audio', "_blank");

接收方:

復制

 if (syncObj.type == "singleavcall") { var receiversIds = syncObj.content.participants.receiversIds; if (receiversIds) { for (var j = 0; j < receiversIds.length; j++) { if (receiversIds[j] == currentUser.id) { y2w.receive_AV_Mesage(syncObj); break; } } } break; }

桌面共享

發起方：

復制

 var receiverIds=[]; receiverIds[receiverIds.length] = obj;//obj 對方用戶ID //發送通知通知其他人 y2w.sendVideoMessage('sharescreen', receiverIds, 'audio', channelId);//channelId 房間ID //發起方打開視頻語音聊天界面 window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + 'audio', "_blank");

接收方:

復制

 if (syncObj.type == "sharescreen") { var receiversIds = syncObj.content.participants.receiversIds; if (receiversIds) { for (var j = 0; j < receiversIds.length; j++) { if (receiversIds[j] == currentUser.id) { y2w.receive_AV_Mesage(syncObj); break; } } } break; }

組裝地址前准備

1、判斷是否已經登錄

復制

 var currentUserid = localStorage.getItem('y2wIMCurrentUserId'); var currentuserinfo = JSON.parse(localStorage.getItem(currentUserid)); if (currentuserinfo == null) { if (window.confirm("您還沒有登錄，請先登錄")) { window.location.href = '../yun2win/index.html'; } return; //重新登錄 }

2、檢測瀏覽器版本

復制

 var sUserAgent = navigator.userAgent; //parseFloat 運行時逐個讀取字符串中的字符，當他發現第一個非數字符是就停止  var appVersion = navigator.appVersion; var index = appVersion.indexOf('Chrome/'); var sub = appVersion.substring(index+7); var fAppVersion = parseFloat(sub); if (fAppVersion < 49) { alert('您的瀏覽器版本太低！為了不影響您的視頻聊天，請升級到最新版本'); }

提醒

請記住使用chrome瀏覽器49版本及以上

3、通過登錄token獲取access_token

復制

 var params = { grant_type: 'client_credentials', client_id: currentuserinfo.key,//用戶的app Key client_secret: currentuserinfo.secret //密鑰 }; var token = currentuserinfo.token;//登錄token $.ajax({ url: config.y2wAutorizeUrl + 'oauth/token', type: 'POST', data: params, dataType: 'json', contentType: 'application/x-www-form-urlencoded', beforeSend: function (req) { if (token) req.setRequestHeader('Authorization', 'Bearer ' + token); }, success: function (data) { var token = data.access_token;//獲取access_token //組裝的地址  //document.getElementById("iframe_videoaudio").src = "https://av-api.liyueyun.com/media/?userid=" +  memberId + "&channelId=" + channelId + "&type=" + initype + "&token=" + token + "&avatarUrl=" + avatarUrl + "&name=" + name; }, error: function (e) {//驗證失敗，重新登陸 if (e.status ==400){ if (window.confirm("驗證失敗，請重新登錄")) { window.location.href = '../yun2win/index.html'; } } } });

組裝地址

復制

 //memberId 當前用戶ID channelId 房間ID  //initype默認開啟類型 (video/audio) token access_token avatarUrl 用戶頭像地址 name用戶名字 document.getElementById("iframe_videoaudio").src = "https://av-api.liyueyun.com/media/?userid=" + memberId + "&channelId=" + channelId + "&type=" + initype + "&token=" + token + "&avatarUrl=" + avatarUrl + "&name=" + name;