白板功能的实现

最新推荐文章于 2024-11-20 17:11:47 发布

红豆O(∩_∩)O

最新推荐文章于 2024-11-20 17:11:47 发布

阅读量1.1k

点赞数

分类专栏：经验文章标签： javascript

本文链接：https://blog.youkuaiyun.com/i96249264_bo/article/details/115820573

版权

经验专栏收录该内容

17 篇文章

订阅专栏

前端页面布局


		<div id="whiteboard" style="width: 400px; height: 300px;">111</div>
		<!-- 新加入代码开始 -->
		Room UUID: <input id="room_uuid" type="text" size="32"></input>
		Room Token: <input id="room_token" type="text" size="32"></input>
		<button id="join_room" class="btn btn-primary" >Join Whiteborad</button>
		<!-- 新加入代码结束 -->
		<script type="text/javascript" src="./js/indexbaiban.js">
		<script type="text/javascript" src="https://sdk.netless.link/white-web-sdk/2.12.11.js"></script>

注:
1、indexbaiban.js是自己定义的js文件，用于写关于白板功能的逻辑的js代码
2、是引用netless文档中的white-web-sdk来实现白板

js部分：

"use strict"

//我这里使用的是nettless文档，所以注册一个nettless账户，从中可以获取sdkToken和appIdentifier
var sdkToken = ‘自己的sdkToken';
var appIdentifier = "自己的appidentifler";


//'https://cloudcapiv4.herewhite.com/room  这里的地址是别人封装好的
var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
var requestInit = {
    method: "POST",
    headers: {
        "content-type": "application/json",
        // "token": sdkToken, // 签发的 SDK Token，需提前准备
    },
	body:JSON.stringify({
		name:'none',
		limit:100,
	})
	
};
fetch(url,requestInit).then(function(response){
	  return response.json();
})
.then(function(json){
	// console.log(json)
	 room_uuid.value = json.msg.room.uuid;
	 room_token.value = json.msg.roomToken;
	 
	 console.log("room uuid", json.msg.room.uuid, json.msg.roomToken);
	
});


var join_room = document.getElementById("join_room")
join_room.onclick = function(){

	
  document.getElementById("join_room").disabled = true;
  //注意这里new WhiteWebSdk({appIdentifier: appIdentifier,});要传入一个appIdentifier
  var whiteWebSdk = new WhiteWebSdk({appIdentifier: appIdentifier});
  	// console.log(whiteWebSdk.joinRoom())
	whiteWebSdk.joinRoom({
	    uuid: room_uuid.value,
	    roomToken: room_token.value,
		
	  }).then(function(room) {
		 console.log(111)
	    room.bindHtmlElement(document.getElementById('whiteboard'));
	
	});
  
	
}

参考文章：https://blog.youkuaiyun.com/agora_cloud/article/details/89405019
https://developer.herewhite.com/javascript-zh/home/js-native