<commit_before># Start the Workshop!

## Overview

WebRTC enables real-time communication in the browser.

This tutorial explains how to build a simple video and text chat application.

For more information about WebRTC, see [Getting started with WebRTC](http://www.html5rocks.com/en/tutorials/webrtc/basics) on HTML5 Rocks.

You can submit feedback about the WebRTC APIs at [bit.ly/webrtcfeedback](http://bit.ly/webrtcfeedback).

## Prerequisites

Basic knowledge:

1. HTML, CSS and JavaScript
2. [git](http://git-scm.com/)
3. [Chrome DevTools](https://developers.google.com/chrome-developer-tools/)

Experience of [Node.js](http://nodejs.org/) and [socket.io](http://socket.io/) would also be useful.

Installed on your development machine:

1. Google Chrome or Firefox.
1. Code editor.
1. Webcam.
1. Git, in order to get the source code.
1. The [source code](https://github.com/LXJS/training-webrtc).
1. Node.js with socket.io and node-static. (Node.js hosting would also be an advantage -- see below for some options.)

*The instructions in this workshop assume you are using Mac OS, Linux or Windows. Unless you know what you're doing, it's probably easier not to attempt this workshop from a Chromebook!*

It would also be useful to have an Android device with Google Chrome installed in order to try out the examples on mobile. To run WebRTC APIs on Chrome for Android, you must enable WebRTC from the chrome://flags page.

## Running The Examples

To run any of the examples provided in the `examples` directory of this repo simply cd into the specific step directory you'd like to see locally and run

```
node server.js
```

Before you run the server, you'll need to run `npm install`.

That directory's demo will then be live [here](http://localhost:2014).

## Step 0: Get the code

Using git, clone the workshop repository onto your development computer. If you haven't used git before, there are several tutorials and reference guides available from the [git website](http://git-scm.com/).

```bash
git clone https://github.com/LXJS/training-webrtc.git
cd training-webrtc
```

## Step 1: Create a blank HTML5 document & simple server

1. Create a bare-bones HTML document called `index.html`.
1. Use [node-static](https://npmjs.org/package/node-static) to create a simple static file server that listens on port `2014` and serves index.html (and all files in the same folder).
1. Test it out by visiting [http://localhost:2014](http://localhost:2014).

### Solution

When you're done (or if you get stuck), check your solution against the solution in the `examples/step1` folder.

[examples/step1](https://github.com/LXJS/training-webrtc/tree/master/examples/step1)


## Step 2: Get video from your webcam

1. Add a video element to your page.
1. Use `navigator.getUserMedia` to capture the user's webcam.
1. Test it out [locally](http://localhost:2014) (see instructions above on running demos).

### Hints

To make `getUserMedia` work across browsers, you need to add the following code:

  ```js
  navigator.getUserMedia = navigator.getUserMedia
    || navigator.webkitGetUserMedia
    || navigator.mozGetUserMedia
    || navigator.msGetUserMedia;
  ```

`getUserMedia` is called like this:

  ```js
  navigator.getUserMedia(constraints, successCallback, errorCallback);
  ```

The constraints argument allows us to specify the media to get, in this case video only:

  ```js
  var constraints = { video: true }
  ```

If successful, the success callback is called with the video stream from the
webcam. You can then set it as the source of a video tag.

  ```js
  function successCallback (localMediaStream) {
    window.stream = localMediaStream; // stream available to console
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.play();
  }
  ```

If there was an error (like the user denied access to their webcam), then the error callback is called with an error object.

  ```js
  function errorCallback(error){
    console.error('navigator.getUserMedia error: ', error);
  }
  ```

### Solution

[examples/step2](https://github.com/LXJS/training-webrtc/tree/master/examples/step2)

### Bonus points

1. Inspect the stream object from the console.
2. Try calling `stream.stop()`.
3. What does `stream.getVideoTracks()` return?
4. Look at the constraints object: what happens when you change it to `{ audio: true, video: true }`?
5. What size is the video element?  How can you get the video's natural size from JavaScript? Use the Chrome Dev Tools to check. Use CSS to make the video full width. How would you ensure the video is no higher than the viewport?
6. Try adding CSS filters to the video element (more ideas [here](http://html5-demos.appspot.com/static/css/filters/index.html)).
7. Try changing constraints: see the sample at [simpl.info/getusermedia/constraints](https://simpl.info/getusermedia/constraints/).

For example:

  ```css
  video {
    filter: hue-rotate(180deg) saturate(200%);
    -moz-filter: hue-rotate(180deg) saturate(200%);
    -webkit-filter: hue-rotate(180deg) saturate(200%);
  }
  ```


## Step 3: Stream video with RTCPeerConnection

Complete example: [examples/step3](https://github.com/LXJS/training-webrtc/tree/master/examples/step3).

RTCPeerConnection is the WebRTC API for video and audio calling.

This example sets up a connection between two peers on the same page. Not much use, but good for understanding how RTCPeerConnection works!

1. Get rid of the JavaScript you've entered so far -- we're going to do something different!

2. Edit the HTML so there are two video elements and three buttons: Start, Call and Hang Up:


        <video id="localVideo" autoplay></video>
        <video id="remoteVideo" autoplay></video>

        <div><commit_msg>move filters to correct step<commit_after># Start the Workshop!

## Overview

WebRTC enables real-time communication in the browser.

This tutorial explains how to build a simple video and text chat application.

For more information about WebRTC, see [Getting started with WebRTC](http://www.html5rocks.com/en/tutorials/webrtc/basics) on HTML5 Rocks.

You can submit feedback about the WebRTC APIs at [bit.ly/webrtcfeedback](http://bit.ly/webrtcfeedback).

## Prerequisites

Basic knowledge:

1. HTML, CSS and JavaScript
2. [git](http://git-scm.com/)
3. [Chrome DevTools](https://developers.google.com/chrome-developer-tools/)

Experience of [Node.js](http://nodejs.org/) and [socket.io](http://socket.io/) would also be useful.

Installed on your development machine:

1. Google Chrome or Firefox.
1. Code editor.
1. Webcam.
1. Git, in order to get the source code.
1. The [source code](https://github.com/LXJS/training-webrtc).
1. Node.js with socket.io and node-static. (Node.js hosting would also be an advantage -- see below for some options.)

*The instructions in this workshop assume you are using Mac OS, Linux or Windows. Unless you know what you're doing, it's probably easier not to attempt this workshop from a Chromebook!*

It would also be useful to have an Android device with Google Chrome installed in order to try out the examples on mobile. To run WebRTC APIs on Chrome for Android, you must enable WebRTC from the chrome://flags page.

## Running The Examples

To run any of the examples provided in the `examples` directory of this repo simply cd into the specific step directory you'd like to see locally and run

```
node server.js
```

Before you run the server, you'll need to run `npm install`.

That directory's demo will then be live [here](http://localhost:2014).

## Step 0: Get the code

Using git, clone the workshop repository onto your development computer. If you haven't used git before, there are several tutorials and reference guides available from the [git website](http://git-scm.com/).

```bash
git clone https://github.com/LXJS/training-webrtc.git
cd training-webrtc
```

## Step 1: Create a blank HTML5 document & simple server

1. Create a bare-bones HTML document called `index.html`.
1. Use [node-static](https://npmjs.org/package/node-static) to create a simple static file server that listens on port `2014` and serves index.html (and all files in the same folder).
1. Test it out by visiting [http://localhost:2014](http://localhost:2014).

### Solution

When you're done (or if you get stuck), check your solution against the solution in the `examples/step1` folder.

[examples/step1](https://github.com/LXJS/training-webrtc/tree/master/examples/step1)


## Step 2: Get video from your webcam

1. Add a video element to your page.
1. Use `navigator.getUserMedia` to capture the user's webcam.
1. Test it out [locally](http://localhost:2014) (see instructions above on running demos).

### Hints

To make `getUserMedia` work across browsers, you need to add the following code:

  ```js
  navigator.getUserMedia = navigator.getUserMedia
    || navigator.webkitGetUserMedia
    || navigator.mozGetUserMedia
    || navigator.msGetUserMedia;
  ```

`getUserMedia` is called like this:

  ```js
  navigator.getUserMedia(constraints, successCallback, errorCallback);
  ```

The constraints argument allows us to specify the media to get, in this case video only:

  ```js
  var constraints = { video: true }
  ```

If successful, the success callback is called with the video stream from the
webcam. You can then set it as the source of a video tag.

  ```js
  function successCallback (localMediaStream) {
    window.stream = localMediaStream; // stream available to console
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.play();
  }
  ```

If there was an error (like the user denied access to their webcam), then the error callback is called with an error object.

  ```js
  function errorCallback (err) {
    console.error('navigator.getUserMedia error: ', err);
  }
  ```

### Solution

[examples/step2](https://github.com/LXJS/training-webrtc/tree/master/examples/step2)

### Bonus points

1. Inspect the stream object from the console.
2. Try calling `stream.stop()`.
3. What does `stream.getVideoTracks()` return?
4. Look at the constraints object: what happens when you change it to `{ audio: true, video: true }`?
5. What size is the video element?  How can you get the video's natural size from JavaScript? Use the Chrome Dev Tools to check. Use CSS to make the video full width. How would you ensure the video is no higher than the viewport?
6. Try adding CSS filters to the video element (more ideas [here](http://html5-demos.appspot.com/static/css/filters/index.html)). For example:

  ```css
  video {
    filter: hue-rotate(180deg) saturate(200%);
    -moz-filter: hue-rotate(180deg) saturate(200%);
    -webkit-filter: hue-rotate(180deg) saturate(200%);
  }
  ```

7. Try changing constraints: see the sample at [simpl.info/getusermedia/constraints](https://simpl.info/getusermedia/constraints/).


## Step 3: Stream video with RTCPeerConnection

Complete example: [examples/step3](https://github.com/LXJS/training-webrtc/tree/master/examples/step3).

RTCPeerConnection is the WebRTC API for video and audio calling.

This example sets up a connection between two peers on the same page. Not much use, but good for understanding how RTCPeerConnection works!

1. Get rid of the JavaScript you've entered so far -- we're going to do something different!

2. Edit the HTML so there are two video elements and three buttons: Start, Call and Hang Up:


        <video id="localVideo" autoplay></video>
        <video id="remoteVideo" autoplay></video>

        <div>
{'fraction_non_alphanumeric': 0.10047475183426845, 'fraction_numerical': 0.013293051359516616, 'mean_word_length': 4.079351161771153, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 16, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '557863', 'n_tokens_mistral': 3494, 'n_tokens_neox': 3275, 'n_words': 1404}