npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anyrtc/whiteboard-with-ui

v0.0.1

Published

This is an white board SDK include ui, simple ot use, you can visit anyrtc.io get app token.

Downloads

1

Readme

anyrtc-whiteboard

anyRTC平台画板SDK是一款跨平台轻量级的白板SDK,易用、实时。

DEMO

前往体验

Installation

Using npm:

#  更新npm
$  npm i -g npm
#  安装SDK
$  npm i -S anyrtc-whiteboard socket.io-client

In Node.js:

import { Board } from 'anyrtc-whiteboard';

Useage

获取开发者信息

创建Canvas

<canvas id="myCanvas" width="640" height="480"></canvas>

初始化实例

import Board from 'anyrtc-whiteboard';

var board = new Board(document.getElementById("myCanvas"));

initEngineWithAnyRTCInfo - 连接画板服务

//前往anyrtc平台获取
var DEV_ID = "";//开发者Id
var APP_ID = "";//应用的appId
var APP_KEY = "" ;//应用的appKey
var APP_TOKEN = "";//应用的appToken
var APP_DOMAIN = "";//网站域名-(上线必填,开发可以为空)

//初始化anyRTC引擎
board.initEngineWithAnyRTCInfo(DEV_ID, APP_ID, APP_KEY, APP_TOKEN, APP_DOMAIN).then(res => {
	if (res.code === 0) {//初始化成功
		//Do something
	} else {
		//连接不成功
	}
}).catch(err => {

});

initWithRoomID - 初始化画板

initEngineWithAnyRTCInfo成功之后,初始化画板

//前往
var fileId = "";//文件ID(保证唯一)
var anyRTCId = "";//房间号(保证唯一)
var userId = "";//用户id(保证唯一)
var backgroundList= [] ;//背景图片
//连接服务
board.initWithRoomID(fileId, anyRTCId, userId, backgroundList).then(res => {
	if (res.code === 0) {
		//连接成功
	} else {
		//连接不成功
	}
});

监听回调

//监听画板变化
board.on("onBoardPageChange", (currentPage, totalPage, backgroundUrl, backgroundList) => {
  console.log("当前画板页数", currentPage);
  console.log("画板总页数Index", totalPage);
  console.log("当前画板背景URL", backgroundUrl);
  console.log("所有画板背景列表", backgroundList);
});

//画板被销毁
board.on("onBoardDestroy", () => {
  
});

//监听画板错误
board.on("onBoardError", code => {
  //详情请参考错误码
});

错误码

|code | Desciption | |----------|:-------------:| |AnyRTCBoardCodeParameterError |参数为空或者参数错误| |AnyRTCBoardCodeNoNet | 当前无网络| |AnyRTCBoardCodeSessionPastDue | Session已过期| |AnyRTCBoardCodeDeveloperInfoError | 开发者信息错误| |AnyRTCBoardCodeDeveloperArrearage | 账号欠费| |AnyRTCBoardCodeDeveloperNotOpen | 该功能未开通| |AnyRTCBoardCodeDatabaseError | 数据库异常| |AnyRTCBoardCodeBackgroundListIsNull | 背景图片队列为空 |

技术支持

加QQ技术咨询群:580477436 (一群) 554714720 (二群)
欢迎加入anyRTC社区 和我们一起探讨WebRTC技术以及解决集成问题。