Skip to content

Commit

Permalink
https://webrtc-experiment.appspot.com/
Browse files Browse the repository at this point in the history 
Share screen and audio/video from single peer connection!

https://webrtc-experiment.appspot.com/demos/screen-and-video-from-single-peer.html

A few experiments are re-ordered and updated. Documentations are also
updated.
  • Loading branch information
@muaz-khan
muaz-khan committed Jul 4, 2013
1 parent 7538c3a commit ff150f3
Show file tree
Hide file tree
Showing 73 changed files with 5,031 additions and 6,717 deletions.
178 changes: 15 additions & 163 deletions Pluginfree-Screen-Sharing/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 1,14 @@
#### WebRTC Screen-Sharing / [Demo](https://webrtc-experiment.appspot.com/screen-sharing/)
#### WebRTC plugin free screen sharing / [Demo](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/)

Ad-ons free; plugin-free; extension free; direct browser-to-browser screen sharing.
Share entire screen directly without any single installation!

#### Enable screen capture support in getUserMedia()

You must enable this flag via `chrome://flags`.
1. Open `chrome://flags` in the latest chrome (canary/beta).
2. Scroll to the bottom of the page.
3. Enable flag `Enable screen capture support in getUserMedia()`

That flag allows web pages to request access to the screen contents via the getUserMedia() API
That flag allows web pages to request access to the screen contents via the `getUserMedia() API`.

```javascript
var video_constraints = {
Expand All @@ -16,177 18,27 @@ var video_constraints = {
navigator.webkitGetUserMedia({
audio: false,
video: video_constraints
}, onsuccess, onfailure);
}, onstreaming, onfailure);
```

----
There is another experiment: [WebRTC Tab Sharing using experimental tabCapture APIs](https://webrtc-experiment.appspot.com/screen-broadcast/)

#### Desktop Sharing?
#### What about Desktop Sharing?

Obviously, it is one of the most requested features; however not supported yet. Chrome WebRTC team is planning to support it in near future.
It is a big wish to share desktop using RTCWeb peer connection APIs but unfortunately currently it is not possible.

These screen sharing APIs (i.e. `{ chromeMediaSource: 'screen' }`) allows only state-less (non-interactive) screen sharing.

----

#### To use code in your own site, you must understand following limitations:

Chrome canary denies **screen capturing** request automatically if:

1. You've not used `chromeMediaSource` constraint: `mandatory: {chromeMediaSource: 'screen'}`
2. You requested audio-stream alongwith `chromeMediaSource` – it is not permitted in a **single** `getUserMedia` request.
3. You've not installed SSL certificate (i.e. testing on non-HTTPS domain)
4. **screen capturing** is requested multiple times per tab. Maximum one request is permitted per page!

----

#### Why recursive cascade images or blurred screen?

Remember, recursive cascade images or blurred screen is chrome's implementation issue. It will be solved soon.

`mandatory: {chromeMediaSource: 'tab'}` can only be useful in chrome extensions. See [Tab sharing using tabCapture APIs](https://webrtc-experiment.appspot.com/screen-broadcast/).

----

#### First Step: Link the library

```html
<script src="https://webrtc-experiment.appspot.com/screen-sharing/screen.js"></script>
```

----

#### Last Step: Start using it!

```javascript
var screen = new Screen('screen-unique-id');

// on getting local or remote streams
screen.onaddstream = function(e) {
document.body.appendChild(e.video);
};

// check pre-shared screens
// it is useful to auto-view
// or search pre-shared screens
screen.check();

document.getElementById('share-screen').onclick = function() {
screen.share('screen-name');
};
```

----

#### Custom user-ids?

```javascript
screen.userid = 'username';
```

----

#### Custom signaling channel?

You can use each and every signaling channel:

1. SIP-over-WebSockets
2. WebSocket over Node.js/PHP/etc.
3. Socket.io over Node.js/etc.
4. XMPP/etc.
5. XHR-POST-ing

```javascript
screen.openSignalingChannel = function(callback) {
return io.connect().on('message', callback);
};
```

If you want to write `socket.io over node.js`; here is the server code:

```javascript
io.sockets.on('connection', function (socket) {
socket.on('message', function (data) {
socket.broadcast.emit('message', data);
});
});
```

That's it! Isn't it easiest method ever!

Want to use `Firebase` for signaling?

```javascript
// "chat" is your firebase id
screen.firebase = 'chat';
```

----

#### Want to manually join rooms?

```javascript
screen.onscreen = function(_screen) {
var li = document.createElement('li');
li.setAttribute('user-id', _screen.userid);
li.setAttribute('room-id', _screen.roomid);
li.onclick = function() {
var _screen = {
userid: this.getAttribute('user-id'),
roomid: this.getAttribute('room-id')
};
screen.view(_screen);
};
};
```

`onscreen` is called for each new screen; and `view` method allows you manually view shared screens.

----

#### If someone leaves...

Participants' presence can be detected using `onuserleft`:

```javascript
// if someone leaves; just remove his video
screen.onuserleft = function(userid) {
var video = document.getElementById(userid);
if(video) video.parentNode.removeChild(video);
};
```

----

#### `onaddstream`

It is called both for `local` and `remote` media streams. It returns:

1. `video`: i.e. `HTMLVideoElement` object
2. `stream`: i.e. `MediaStream` object
3. `userid`: i.e. id of the user stream coming from
4. `type`: i.e. type of the stream e.g. `local` or `remote`

```javascript
screen.onaddstream = function(e) {
document.body.appendChild(e.video);
};
```

----
Current experiment is using chrome screen sharing APIs which is allows end-users just **view the screen**....nothing else!

#### Browser Support

This [WebRTC Screen Sharing](https://webrtc-experiment.appspot.com/screen-sharing/) experiment works fine on following web-browsers:
[WebRTC plugin free screen sharing](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) experiment works fine on following web-browsers:

| Browser | Support |
| ------------- |-------------|
| ------------- |:-------------|
| Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) |
| Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) |
| Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) |

----
| Internet Explorer / IE | [Chrome Frame](http://www.google.com/chromeframe) |

#### License

[WebRTC Screen Sharing](https://webrtc-experiment.appspot.com/screen-sharing/) is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503).
[WebRTC plugin free screen sharing](https://webrtc-experiment.appspot.com/Pluginfree-Screen-Sharing/) experiment is released under [MIT licence](https://webrtc-experiment.appspot.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://plus.google.com/100325991024054712503).
0 ...luginfree-Screen-Sharing/conference-ui.js → Pluginfree-Screen-Sharing/conference-ui.js
View file
File renamed without changes.
0 ...d-Pluginfree-Screen-Sharing/conference.js → Pluginfree-Screen-Sharing/conference.js
View file
File renamed without changes.
Loading

0 comments on commit ff150f3

Please sign in to comment.