function hex(buffer) {
const hexCodes = [];
const view = new DataView(buffer);
for (let i = 0; i < view.byteLength; i += 4) {
const value = view.getUint32(i);
const stringValue = value.toString(16);
const padding = '00000000';
const paddedValue = (padding + stringValue).slice(-padding.length);
hexCodes.push(paddedValue);
}
return hexCodes.join('');
}
async function generateToken(appId, appKey, channelId, userId, timestamp) {
const encoder = new TextEncoder();
const data = encoder.encode(`${appId}${appKey}${channelId}${userId}${timestamp}`);
const hash = await crypto.subtle.digest('SHA-256', data);
return hex(hash);
}
function showToast(baseId, message) {
$(`#${baseId}Body`).text(message);
const toast = new bootstrap.Toast($(`#${baseId}`));
toast.show();
}
// 填入您的應用ID 和 AppKey
const appId = '';
const appKey = '';
AliRtcEngine.setLogLevel(0);
let aliRtcEngine;
const remoteVideoElMap = {};
const remoteVideoContainer = document.querySelector('#remoteVideoContainer');
function removeRemoteVideo(userId, type = 'camera') {
const vid = `${type}_${userId}`;
const el = remoteVideoElMap[vid];
if (el) {
aliRtcEngine.setRemoteViewConfig(null, userId, type === 'camera' ? 1: 2);
el.pause();
remoteVideoContainer.removeChild(el);
delete remoteVideoElMap[vid];
}
}
function listenEvents() {
if (!aliRtcEngine) {
return;
}
// 監聽遠端使用者上線
aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => {
console.log(`使用者 ${userId} 加入頻道，耗時 ${elapsed} 秒`);
// 這裡處理您的商務邏輯，如展示這個使用者的模組
showToast('onlineToast', `使用者 ${userId} 上線`);
});
// 監聽遠端使用者下線
aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
// reason 為原因碼，具體含義請查看 API 文檔
console.log(`使用者 ${userId} 離開頻道，原因碼: ${reason}`);
// 這裡處理您的商務邏輯，如銷毀這個使用者的模組
showToast('offlineToast', `使用者 ${userId} 下線`);
removeRemoteVideo(userId, 'camera');
removeRemoteVideo(userId, 'screen');
});
aliRtcEngine.on('bye', code => {
// code 為原因碼，具體含義請查看 API 文檔
console.log(`bye, code=${code}`);
// 這裡做您的處理業務，如退出通話頁面等
showToast('loginToast', `您已離開頻道，原因碼: ${code}`);
});
aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
// oldState、newState 類型均為AliRtcSubscribeState，值包含 0（初始化）、1（未訂閱）、2（訂閱中）、3（已訂閱）
// interval 為兩個狀態之間的變化時間間隔，單位毫秒
console.log(`頻道 ${channelId} 遠端使用者 ${userId} 訂閱狀態由 ${oldState} 變為 ${newState}`);
const vid = `camera_${userId}`;
// 處理樣本
if (newState === 3) {
const video = document.createElement('video');
video.autoplay = true;
// video.setAttribute(
// 'style',
// 'display: inline-block;width: 320px;height: 180px;background-color: black;margin-right: 8px;margin-bottom: 8px;'
// );
video.className = 'video';
remoteVideoElMap[vid] = video;
remoteVideoContainer.appendChild(video);
// 第一個參數傳入 HTMLVideoElement
// 第二個參數傳入遠端使用者識別碼
// 第三個參數支援傳入 1 （預覽相機流）、2（預覽螢幕畫面分享流）
aliRtcEngine.setRemoteViewConfig(video, userId, 1);
} else if (newState === 1) {
removeRemoteVideo(userId, 'camera');
}
});
aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
// oldState、newState 類型均為AliRtcSubscribeState，值包含 0（初始化）、1（未訂閱）、2（訂閱中）、3（已訂閱）
// interval 為兩個狀態之間的變化時間間隔，單位毫秒
console.log(`頻道 ${channelId} 遠端使用者 ${userId} 螢幕流的訂閱狀態由 ${oldState} 變為 ${newState}`);
const vid = `screen_${userId}`;
// 處理樣本
if (newState === 3) {
const video = document.createElement('video');
video.autoplay = true;
video.className = 'video';
remoteVideoElMap[vid] = video;
remoteVideoContainer.appendChild(video);
// 第一個參數傳入 HTMLVideoElement
// 第二個參數傳入遠端使用者識別碼
// 第三個參數支援傳入 1 （預覽相機流）、2（預覽螢幕畫面分享流）
aliRtcEngine.setRemoteViewConfig(video, userId, 2);
} else if (newState === 1) {
removeRemoteVideo(userId, 'screen');
}
});
// 推螢幕流狀態變化
aliRtcEngine.on('screenSharePublishStateChanged', (oldState, newState, interval, channelId) => {
// oldState、newState 類型均為AliRtcSubscribeState，值包含 0（初始化）、1（未發布）、2（發布中）、3（發行）
// interval 為兩個狀態之間的變化時間間隔，單位毫秒
console.log(`頻道 ${channelId} 本地螢幕流的推流狀態由 ${oldState} 變為 ${newState}`);
if (oldState === 3 && newState === 1) {
showToast('screenToast', '已停推螢幕流');
}
});
}
$('#loginForm').submit(async e => {
// 防止表單預設提交動作
e.preventDefault();
const channelId = $('#channelId').val();
const userId = $('#userId').val();
const timestamp = Math.floor(Date.now() / 1000) + 3600 * 3;
if (!channelId || !userId) {
showToast('loginToast', '資料不完整');
return;
}
aliRtcEngine = AliRtcEngine.getInstance();
listenEvents();
try {
const token = await generateToken(appId, appKey, channelId, userId, timestamp);
// 設定頻道模式，支援傳入字串 communication（通話模式）、interactive_live（互動模式）
aliRtcEngine.setChannelProfile('communication');
// 設定角色，互動模式時調用才生效
// 支援傳入字串 interactive（互動角色，允許推拉流）、live（觀眾角色，僅允許拉流）
// aliRtcEngine.setClientRole('interactive');
// 加入頻道，參數 token、nonce 等一般有服務端返回
await aliRtcEngine.joinChannel(
{
channelId,
userId,
appId,
token,
timestamp,
},
userId
);
showToast('loginToast', '加入頻道成功');
$('#joinBtn').prop('disabled', true);
$('#leaveBtn').prop('disabled', false);
$('#boardBtn').prop('disabled', false);
$('#screenBtn').prop('disabled', false);
// 預覽
aliRtcEngine.setLocalViewConfig('localPreviewer', 1);
} catch (error) {
console.log('加入頻道失敗', error);
showToast('loginToast', '加入頻道失敗');
}
});
$('#leaveBtn').click(async () => {
Object.keys(remoteVideoElMap).forEach(vid => {
const arr = vid.split('_');
removeRemoteVideo(arr[1], arr[0]);
});
// 停止本地預覽
await aliRtcEngine.stopPreview();
// 離開頻道
await aliRtcEngine.leaveChannel();
// 銷毀執行個體
aliRtcEngine.destroy();
aliRtcEngine = undefined;
$('#joinBtn').prop('disabled', false);
$('#leaveBtn').prop('disabled', true);
$('#boardBtn').prop('disabled', true);
$('#screenBtn').prop('disabled', true);
showToast('loginToast', '已離開頻道');
});
// 這裡填入您的網易雲信白板的 AppKey 和 AppSecret
// 僅限本地開發體驗，線上環境請勿露出 AppSecret
const boradAppKey = '';
const boradAppSecret = '';
const boradUid = Date.now(); // 易雲信白板要求是數字uid
const boradNickname = boradUid.toString();
const boradChannel = '821937123';
async function sha1(data) {
// 將字串轉換為ArrayBuffer
const buffer = new TextEncoder().encode(data);
// 使用Crypto API計算雜湊值
const digest = await crypto.subtle.digest('SHA-1', buffer);
// 將ArrayBuffer轉換為十六進位字串
const hashArray = Array.from(new Uint8Array(digest));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
async function getAuthInfo() {
const Nonce = 'xxxx'; //任意長度小於128位的隨機字串
const curTime = Math.round((Date.now() / 1000)); //當前UTC時間戳記，從1970年1月1日0點0分0秒開始到現在的秒數
const checksum = await sha1(boradAppSecret + Nonce + curTime);
return {
nonce: Nonce,
checksum: checksum,
curTime: curTime
};
}
// 建立白板執行個體
const boardIns = WhiteBoardSDK.getInstance({
appKey: boradAppKey,
nickname: boradNickname, //非必須
uid: boradUid,
container: document.getElementById('whiteboard'),
platform: 'web',
record: false, //是否開啟錄製
getAuthInfo: getAuthInfo
});
let drawPluginIns;
// 登入白板房間
boardIns.joinRoom({
channel: boradChannel,
createRoom: true
})
.then((drawPlugin) => {
drawPluginIns = drawPlugin;
// 允許編輯
drawPlugin.enableDraw(true);
// 設定畫筆顏色
drawPlugin.setColor('rgb(243,0,0)');
// 初始化工具列
const toolCollection = ToolCollection.getInstance({
container: document.getElementById('whiteboard'),
handler: drawPlugin,
options: {
platform: 'web'
}
});
toolCollection.addOrSetTool({
position: 'left',
insertAfterTool: 'pan',
item: {
tool: 'uploadCenter',
hint: '上傳文檔',
supportPptToH5: true,
supportDocToPic: true,
supportUploadMedia: false, // 關閉上傳多媒體檔案
supportTransMedia: false, // 關閉轉碼多媒體檔案
},
});
toolCollection.removeTool({ name: 'image' });
// 顯示工具列
toolCollection.show();
// 監聽文檔事件
toolCollection.on('docAdd', (newDocs, allDocs) => {
console.log('add allDocs->', newDocs, allDocs);
// 您可以在 docAdd 事件回調中將文檔資料上傳至您的服務端
// 建議：服務端通過白板 channel 維度去儲存
});
toolCollection.on('docDelete', (newDocs, allDocs) => {
console.log('delete allDocs->', newDocs, allDocs);
// 您可以在 docDelete 事件回調中將文檔資料上傳至您的服務端
// 建議：服務端通過白板 channel 維度去儲存
});
// 初始化後從服務端中擷取該 channel 的檔案清單，並更新至白板SDK中
// fetch('/docList', (list) => {
// toolCollection.setDefaultDocList(list);
// });
});
$('#screenBtn').click(async() => {
if (!aliRtcEngine) {
showToast('screenToast', 'sdk 未準備好');
return;
}
try {
await aliRtcEngine.startScreenShare();
showToast('screenToast', '推螢幕成功');
} catch (error) {
showToast('screenToast', '推螢幕失敗');
}
});
$('#boardBtn').click(async() => {
if (!aliRtcEngine || !drawPluginIns) {
showToast('screenToast', 'sdk 未準備好');
return;
}
const mediaStream = drawPluginIns.getStream({
width: 720,
frameRate: 15,
});
const videoTrack = mediaStream.getVideoTracks()[0];
if (videoTrack) {
try {
await aliRtcEngine.startScreenShare({
videoTrack,
});
showToast('screenToast', '推白板成功');
} catch (error) {
showToast('screenToast', '推白板失敗');
}
} else {
showToast('screenToast', '無白板 videoTrack');
}
});