공유 기능

화면 공유 시작

• 예시

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

• 응답 상세

  성공 시 true 실패 시false를 리턴합니다.

• 타겟 유저는 screen 이벤트 메시지 받아 사용

캔버스 기능 시작

• 예시

index.js

await knowledgetalk.whiteBoardStart(canvas);

• 타입

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

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

Parameter	Description	Example
canvas	캔버스 태그	HTMLcanvasElement

• 응답 상세

  성공 시 true 실패 시false를 리턴합니다.

• 타겟 유저는 whiteBoard 이벤트 메시지를 받아 사용

캔버스 초기 설정

• 예시

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'

• document 이벤트 메시지 받아 사용

자료 공유

• 예시

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'

• documentShare 이벤트 메시지 받아 사용

공유 기능 종료

• 예시

index.js

await knowledgetalk.shareStop();

• 타입

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

• 응답 상세

Parameter	Description	Example
code	응답 코드 바로가기	'200'

• shareStop 이벤트 메시지 받아 사용