Skip to content

[Add]White board sharing #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JeongYeonUk merged 1 commit into from
Nov 12, 2020
Merged

[Add]White board sharing #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions dist/canvas-designer/canvas-designer-widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ function CanvasDesigner() {
var selectedIcon = 'pencil';

function syncData(data) {
console.log("designer에서 받음 ",data)
console.log("designer return되는가 ",!designer.iframe)
//console.log("designer에서 받음 ",data)
//console.log("designer return되는가 ",!designer.iframe)
if (!designer.iframe) return;

designer.postMessage({
Expand Down Expand Up @@ -93,7 +93,7 @@ function CanvasDesigner() {

if (!!event.data.canvasDesignerSyncData) {
designer.pointsLength = event.data.canvasDesignerSyncData.points.length;
console.log("그림그릴때 ",event.data.canvasDesignerSyncData);
// console.log("그림그릴때 ",event.data.canvasDesignerSyncData);
syncDataListener(event.data.canvasDesignerSyncData);
return;
}
Expand Down Expand Up @@ -195,10 +195,10 @@ function CanvasDesigner() {

designer.postMessage = function(message) {
if (!designer.iframe) return;
console.log("desinger.postmessage ",message)
//console.log("desinger.postmessage ",message)
message.uid = designer.uid;
designer.iframe.contentWindow.postMessage(message, '*');
console.log("message.uid designer.uid ",message.uid)
//console.log("message.uid designer.uid ",message.uid)
};

designer.captureStream = function(callback) {
Expand Down Expand Up @@ -226,12 +226,20 @@ function CanvasDesigner() {
});
};
// 추가한 코드
designer.backgroundVideo = function(idData){
designer.backgroundVideo = function(srcObj){
console.log("srcObj : ", srcObj)
if (!designer.iframe) return;
console.log("canvas-designer-widget param!! : ",idData)
//console.log("canvas-designer-widget param!! : ",idData)
// console.log("canvas-widget.js첨부된 비디오",video);
designer.postMessage({
backgroundVideo: true
backgroundVideo: true,
srcObj : srcObj,
});
}
designer.backgroundWhite = function(){
if(!designer.iframe) return;
designer.postMessage({
backgroundWhite: true
});
}
designer.removeMainVideo = function(){
Expand Down
4 changes: 3 additions & 1 deletion dist/canvas-designer/widget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@

<style>
/* Muaz Khan (@muazkh/@WebRTCWeb) */

#main-canvas{
background-color: white;
}
textarea::-webkit-scrollbar {
width: 0;
height: 0;
Expand Down
43 changes: 31 additions & 12 deletions dist/canvas-designer/widget_mod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ function getRecordVideoFormData() {
var chunks = [];
let clearFlag = false;
mediaRecorder.ondataavailable = function (e) {
console.log("무슨타입이야? ",e)
chunks.push(e.data);
};
mediaRecorder.onstop = function (e) {
Expand Down Expand Up @@ -401,6 +400,7 @@ function getRecordVideoFormData() {
points = [],
// video="", // 추가
isVideoBackGround = false, // 추가
isWhiteBoard = false, // 추가
textarea = find("code-text"),
lineWidth = 2,
strokeStyle = "#6c96c8",
Expand Down Expand Up @@ -953,11 +953,19 @@ function getRecordVideoFormData() {
drawHelper = {
redraw: function () {
// 추가 삭제...
if (!isVideoBackGround) {
if (!isVideoBackGround) { // 비디오 아닐때일때
// 여기 내생각에 없어도 될꺼같은데 왜 없으면 안되는건지 생각해보자..
tempContext.clearRect(0, 0, innerWidth, innerHeight),
context.clearRect(0, 0, innerWidth, innerHeight);
} else if (clearFlag) {
if(isWhiteBoard){
tempContext.fillStyle = "white"
context.fillStyle = "white"
tempContext.fillRect(0, 0, innerWidth, innerHeight),
context.fillRect(0, 0, innerWidth, innerHeight);
isWhiteBoard = false;
}else{
tempContext.clearRect(0, 0, innerWidth, innerHeight),
context.clearRect(0, 0, innerWidth, innerHeight);
}
} else if (clearFlag) { // 그냥 지우는애 (비디오때는 clearRect가 실행되면 안됨)
clearFlag = false;
tempContext.clearRect(0, 0, innerWidth, innerHeight),
context.clearRect(0, 0, innerWidth, innerHeight);
Expand Down Expand Up @@ -3705,10 +3713,12 @@ function getRecordVideoFormData() {
//추가
var test = {
findParentDocument: function (id) {
console.log("제발되라.. ", id);
//console.log("제발되라.. ", id);
},
drawVideoToCanvas: function (video, context, width, height) {
console.log("TEST CONTEXT", context.canvas.width)
// fillRect되있는 색 지우고 시작하자
tempContext.clearRect(0, 0, innerWidth, innerHeight);
context.clearRect(0, 0, innerWidth, innerHeight);
test.loadVideo(video, context, width, height);
},
loadVideo: function (video, context, width, height) {
Expand All @@ -3735,13 +3745,23 @@ function getRecordVideoFormData() {
(sdp.uid = uid), window.parent.postMessage(sdp, "*");
});
// 추가
if(event.data.backgroundWhite){
isVideoBackGround = false;
isWhiteBoard = true;
// 적어람뫄
drawHelper.redraw();
}
if (event.data.backgroundVideo) {
isVideoBackGround = true;
console.log("widget.html에서 받았다...");
test.findParentDocument(event.data.id);
let video = window.parent.document.getElementById("main-video");
console.log("widget video stream id ", event.data.streamId)
if(!event.data.srcObj){
test.findParentDocument(event.data.id);
let video = window.parent.document.getElementById("main-video");
console.log("video 가져올수있나?",video)
test.drawVideoToCanvas(video, context, context.canvas.width, context.canvas.height);
}else{

test.drawVideoToCanvas(video, context, context.canvas.width, context.canvas.height);
}
}
if (event.data.removeMainVideo) {
if (!isVideoBackGround) return;
Expand All @@ -3756,7 +3776,6 @@ function getRecordVideoFormData() {
}
}
if (event.data.clearFlag) {
console.log("넘어왔잔아");
clearFlag = true;
points = [];
drawHelper.redraw();
Expand Down
Loading