공유 기능

화면 공유 시작

  • 예시

index.js
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });

await knowledgetalk.screenStart(stream, 'kpoint123', canvas);

  • 타입

screenStart(
    stream: MediaStream;
    target?: string;
    canvas?: HTMLCanvasElement;
): Promise<boolean>;

  • 요청 상세

    canvasInit() / drawingInit()가 포함되어 있으므로 따로 요청하지 않아도 됨

Parameter
Description
Example

stream

공유할영상 스트림

MediaStream

target

P2P 경우, 상대방의 userId

'kpoint123'

canvas

공유 화면 위의 캔버스 기능

HTMLcanvasElement

캔버스 기능 시작

  • 예시

index.js
await knowledgetalk.whiteBoardStart(canvas);

  • 타입

whiteBoardStart(
    canvas: HTMLcanvasElement;
): Promise<boolean>;

  • 요청 상세 canvasInit() / drawingInit() 가 포함되어 있으므로 따로 요청하지 않아도 됨

Parameter
Description
Example

canvas

캔버스 태그

HTMLcanvasElement

캔버스 초기 설정

  • 예시

index.js
knowledgetalk.canvasInit(canvas);

  • 타입

canvasInit(
    canvas: HTMLCanvasElement;
): void;

  • 요청 상세

Parameter
Description
Example

canvas

캔버스 태그

HTMLcanvasElement

캔버스 그리기 시작

mousedown, mouseup, mousemove, mouseout, touchstart, touchend, touchcancel, touchmove 이벤트를 추가합니다.

  • 예시

index.js
knowledgetalk.drawingInit();

  • 타입

drawingInit():boolean;

  • 응답 상세 성공 시 true 실패 시false를 리턴합니다.

캔버스 그리기 종료

mousedown, mouseup, mousemove, mouseout, touchstart, touchend, touchcancel, touchmove 이벤트를 제거합니다.

  • 예시

index.js
knowledgetalk.drawingStop();

  • 타입

drawingStop(): boolean;

  • 응답 상세 성공 시 true 실패 시false를 리턴합니다.

캔버스 동기화 요청

입장 시, 판서 중인 경우 판서 중인 상대에게 판서 정보 요청해서 동기화 진행(canvasInit 완료 후 요청)

  • 예시

index.js
await knowledgetalk.reqCanvasImage(target);

  • 타입

reqCanvasImage(
    target: string;
): Promise<{
    code: ResponseCode
}>

  • 요청 상세

Parameter
Description
Example

target

해당 userId에게 메시지 전송

'kpoint123'

  • 응답 상세

Parameter
Description
Example

code

응답 코드 바로가기

'200'

그리기 도구 설정

  • 예시

index.js
knowledgetalk.setTool('pen', 'black', 1);

  • 타입

setTool(
    tool: 'pen' | 'eraser' | 'shape' | 'pointer' | 'textbox';
    color?: string;
    strokeWidth: number;
    type?: ShapeType | 'highlight';
): void;
type ShapeType = "arrow" | "circle" | "hand" | "heart" | "line" | "square" | "star" | "triangle" | "important" | "check";

  • 요청 상세

Parameter
Description
Example

tool

그리기 도구

'pen'

color

색깔

'black'

strokeWidth

그리기 도구 굵기

1

type

  • 형광펜: tool이 pen일 경우 highlight

  • 도형: tool이 shape일 경우 ShapeType

  • 그 외 생략

그림 지우기

  • 예시

index.js
knowledgetalk.canvasClear();

공유 기능 시작

  • 예시

index.js
await knowledgetalk.documentStart(canvas);

  • 타입

documentStart(
   canvas: HTMLCanvasElement;
): Promise<{
   code: ResponseCode;
}>

  • 요청 상세 canvasInit() / drawingInit() 가 포함되어 있으므로 따로 요청하지 않아도 됨

Parameter
Description
Example

canvas

공유화면 위의 캔버스 기능

HTMLcanvasElement

  • 응답 상세

Parameter
Description
Example

code

응답 코드 바로가기

'200'

자료 공유

  • 예시

index.js
await knowledgetalk.documentShare('https://imgURL');

  • 타입

documentShare(
    imgUrl: string;
): Promise<{
    code: ResponseCode;
}>

  • 요청 상세

Parameter
Description
Example

imgUrl

공유할 이미지 URL

'https://imgURL'

  • 응답

Parameter
Description
Example

code

응답 코드 바로가기

'200'

공유 기능 종료

  • 예시

index.js
await knowledgetalk.shareStop();

  • 타입

shareStop(): Promise<{
    code: ResponseCode;
}>

  • 응답 상세

Parameter
Description
Example

code

응답 코드 바로가기

'200'

Previous채팅 기능Next분반 기능

Last updated