Skip to content

Commit

Permalink
Canvas-Designer, MediaStreamRecorder, DataChannel, RecordRTC, RTCMult…
Browse files Browse the repository at this point in the history 
…iConnection, Reliable-Signaler, and screen.js updated.
  • Loading branch information
@muaz-khan
muaz-khan committed Jan 27, 2015
1 parent 332e1e8 commit 8388987
Show file tree
Hide file tree
Showing 101 changed files with 12,127 additions and 10,960 deletions.
84 changes: 60 additions & 24 deletions Canvas-Designer/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,75 @@
## [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) / [Demo](https://www.webrtc-experiment.com/Canvas-Designer/)
# [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) / [Demo](https://www.webrtc-experiment.com/Canvas-Designer/)

Note: Original Canvas-Drawing tool is hosted here: https://canvas-designer.appspot.com/

"Collaborative" [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) i.e. Canvas-Drawing tool allows you draw bezier/quadratic curves, rectangles, circles and lines. You can also set strokes, back/forth colors and much more.
"Collaborative" [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) i.e. Canvas-Drawing tool allows you draw bezier/quadratic curves, rectangles, circles and lines. You can also set strokes, back/forth colors and much more. You can draw using pencils, erase drawing, type texts etc.

This speciality of this drawing-tool is that, it generates Canvas2D code for you; so simply draw and get the code!

Also, you can collaborate your drawing with up to 15 users; and everything is synced from all users. So, if you draw a line and your friend-A draws quadratic curve and friend-B draws rectangle then everythign will be synced among all users!
Also, you can collaborate your drawing with up to 15 users; and everything is synced from all users. So, if you draw a line and your friend-A draws quadratic curve and friend-B draws rectangle then everything will be synced among all users!

# [Click to view Gif Presentation](https://cdn.webrtc-experiment.com/images/Canvas-Designer.gif)

<img src="https://i.imgur.com/uDbfy1F.png" />

# How to Use

<ol>
<li>Take all code from <a href="https://github.com/muaz-khan/Canvas-Designer">this link</a> and upload somewhere on your site.</li>
<li>Target directly will be having this file: <a href="https://github.com/muaz-khan/Canvas-Designer/blob/master/canvas-designer-widget.js">canvas-designer-widget.js</a>. Link this file in your HTML/PHP page.</li>
<li>
Use this command to append widget in your HTML page:<br>
<code>CanvasDesigner.appendTo(document.documentElement);</code>
</li>
</ol>

# Complete Usage

```javascript
websocket.onmessage = function(event) {
CanvasDesigner.syncData( JSON.parse(event.data) );
};

CanvasDesigner.addSyncListener(function(data) {
websocket.send(JSON.stringify(data));
});

CanvasDesigner.setSelected('pencil');

## [Click to view Gif Presentation](https://cdn.webrtc-experiment.com/images/Canvas-Designer.gif)
CanvasDesigner.setTools({
pencil: true,
text: true
});

## WebRTC?
CanvasDesigner.appendTo(document.documentElement);
```

[Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) is using [RTCMultiConnection.js](http://www.RTCMultiConnection.org/) to setup realtime data connection. This allows adding realtime media connection features in less than 2-minutes!
It is having `CanvasDesigner.destroy()` method as well.

E.g.
# Use [WebRTC](http://www.rtcmulticonnection.org/docs/)!

```javascript
// whilst doing collaboration, you can add any kind of media stream
// single or multiple, it doesn't matters who shares and how!!!
connection.addStream({ audio: true, video: true });
webrtc.onmessage = function(event) {
CanvasDesigner.syncData( event.data );
};

CanvasDesigner.addSyncListener(function(data) {
webrtc.send(data);
});
```

Read more here: http://www.rtcmulticonnection.org/docs/
# Use Socket.io

```javascript
socket.on('message', function(data) {
CanvasDesigner.syncData( data );
});

CanvasDesigner.addSyncListener(function(data) {
socket.emit('message', data);
});
```

## Links
# Links

1. https://www.webrtc-experiment.com/Canvas-Designer/
2. https://github.com/muaz-khan/Canvas-Designer
Expand All @@ -36,15 +81,6 @@ There is a similar "tinny" tool, however it isn't yet supporting collaboration:

And WebRTC-Experiments! https://github.com/muaz-khan/WebRTC-Experiment

## How to use my own library or code?

Do two things:

1. Edit `share-drawings.js` to add your own WebRTC code.
2. Open `decorator.js` and scroll to line 338. This line is using `connection.send`. You simply need to replace it with your own code e.g. `webrtc_connection.sendData(..)`.

Now the tool is using your own WebRTC implementation!

## License
# License

[Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
167 changes: 7 additions & 160 deletions Canvas-Designer/Style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ textarea::-webkit-scrollbar-corner {
text-shadow: none;
}
/*-------------------------------------------------------------*/
html, body, footer, input, textarea, h1, h2 {
html, body, input, textarea, h1, h2 {
margin: 0;
padding: 0;

Expand All @@ -60,27 +60,9 @@ html, body {
height:100%;
cursor: default;
color: Gray;
overflow: hidden;
}
/*-------------------------------------------------------------*/
footer
{
border-top: 1px solid #E5E5E5;
text-align: center;
}
/*-------------------------------------------------------------*/
h1
{
border-bottom: 1px solid #E5E5E5;
text-align: center;
text-shadow: 1px 1px #E5E5E5, 2px 2px white, 3px 3px #E5E5E5;
color: #6c96c8;
font-size: 400%;
font-weight: normal;
padding-bottom: 10px;

overflow:hidden;
height: 62px;
}

h1, .line-width-done, .colors-done, .additional-close
{
Expand Down Expand Up @@ -120,7 +102,7 @@ a:hover {
{
border-right: 1px solid #E5E5E5;
position: absolute;
top: 73px;
top: 0;
width: 40px;
background-color: #FBFBFB;
overflow: hidden;
Expand All @@ -146,11 +128,11 @@ a:hover {
position: absolute;
right: 10px;
background-color: #FBFBFB;
bottom: 0;
}
.preview-panel div
{
border: 1px solid #E5E5E5;
border-top: 0;
display: inline-block;
padding: 5px 10px;
}
Expand All @@ -161,16 +143,12 @@ a:hover {
.preview-panel div
{
border: 1px solid #E5E5E5;
border-top-color: white;
}
.preview-panel div:not(.preview-selected)
{
border-top: 1px solid #E5E5E5;
.preview-panel div:not(.preview-selected) {
}
.preview-panel div
{
border: 1px solid rgb(9, 159, 243);
border-top-color: #fff;
}

.preview-selected {
Expand Down Expand Up @@ -228,7 +206,7 @@ input:focus {
.code-container
{
position: absolute;
top: 72px;
top: 0;
width: 100%;
display: none;
}
Expand All @@ -248,7 +226,7 @@ input:focus {
.options-container
{
position: absolute;
top: 72px;
top: 0;
left: 0;
border: 1px solid #E5E5E5;
border-left: 0;
Expand Down Expand Up @@ -325,134 +303,3 @@ input:focus {
.additional-container select {
width: 120px;
}



/*-------------------------------------------------------------*/

#share-drawing {
background-repeat: no-repeat;
background-position: center center;
background-image: url('share.png');
position: fixed;
top: 0;
right: 0;
width: 203px;
height: 64px;
background-color: transparent;
border-radius: 4px;
margin: 3px;
cursor: pointer;
}

#fade {
display: none;
position: absolute;
left: 0%;
top: 0%;
background-color: black;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 1;
}

.alert-box {
position:absolute;
top:30%;
left: 30%;
right: 30%;
border: 1px solid black;
z-index:10;
background-color:white;
box-shadow: 0 0 6px black, 0 0 49px;
border-radius: 5px;
visibility: hidden;
opacity:0;
z-index: 1;
zoom: 70%;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;

-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.alert-box-header {
background-color: rgb(135, 240, 135);
border-bottom: 3px solid black;
}

.alert-box-header h2 {
margin: 0;
padding: inherit;
font-size: 3em;
overflow: hidden;
padding-left: 12px;
color: black;
}

.alert-box-content {
padding: .8em;
font-size:1.2em;
}

.alert-box-content h2 {
color: rgb(14, 86, 134);
border-bottom: 1px solid rgb(14, 86, 134);
display: inline;
padding-bottom: 5px;
line-height: 2;
font-weight: normal;
}

.alert-box-content #unique-roomid {
color: red;
border-bottom: 1px solid red;
padding-bottom: 5px;
line-height: 2;
vertical-align: middle;
}

.alert-box-content {
font-size: 18px;
color: black;
}

.alert-box-content input {
font-size: 18px;
color: black;
border: 1px solid black;
width:100%
}

.alert-box hr {
border-width:1px;
border-color:black;
margin:0 -15px;
margin-bottom:1em;
}

.alert-box h2 {
font-size: 36px;
height: 45px;
overflow: hidden;
}

.alert-box-close-button {
background: red;
position: absolute;
right: 0;
width: 42px;
height: 46px;
font-size: 34px;
padding-left: 20px;
color: white;
border-left: 3px solid black;
cursor: pointer;
}

.alert-box-close-button:hover {
background: rgb(172, 10, 10);
}
Loading

0 comments on commit 8388987

Please sign in to comment.