Skip to content

Commit c3fda22

Browse files
samduttonKaptenJansson
samdutton
authored and
KaptenJansson
committed
Added canvas captureStream() to video element demo (webrtc#784)
* Updating adapter.js * Added files for canvas captureStream() * Working teapot * Temporarily removed incomplete demos and updated adapter.js * Removed incomplete demos * Added support note * Added Firefox note * Fixed canvas right margin * doh * Minor wording tweak * Changed to srcObject (thank you fippo) and corrected Firefox version reference * Added .eslintignore to ignore third_party Gruntfile.js * Removed ?redundant space-after-keywords (which has been replaced by keyword-spacing)
1 parent 91f03d7 commit c3fda22

20 files changed

+2316
-37
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/third_party/*.js

‎.eslintrc

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
2,
3535
"always"
3636
],
37-
"space-after-keywords": 2,
3837
"space-before-blocks": 2,
3938
"space-before-function-paren": [2, "never"],
4039
"spaced-comment": 2,

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ Head over to [test/README.md](https://github.com/webrtc/samples/blob/gh-pages/te
4040

4141
[Record stream](https://webrtc.github.io/samples/src/content/getusermedia/record/)
4242

43+
### Stream capture ###
44+
45+
<!-- [Stream from a video element to a peer connection](https://webrtc.github.io/samples/src/content/capture/video-pc/) -->
46+
47+
[Stream from a canvas element to a video element](https://webrtc.github.io/samples/src/content/capture/canvas-video/)
48+
49+
<!-- [Stream from a canvas element to a peer connection](https://webrtc.github.io/samples/src/content/capture/canvas-pc/) -->
50+
51+
<!-- [Record a stream from a canvas element](https://webrtc.github.io/samples/src/content/capture/canvas-record/) -->
52+
4353
### Devices ###
4454

4555
[Select camera, microphone and speaker](https://webrtc.github.io/samples/src/content/devices/input-output/)

‎index.html

+50-36
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,42 @@
99
<html>
1010
<head>
1111

12-
<meta charset="utf-8">
13-
<meta name="description" content="WebRTC Javascript code samples">
14-
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
15-
<meta itemprop="description" content="Client-side WebRTC code samples">
16-
<meta itemprop="image" content="src/images/webrtc-icon-192x192.png">
17-
<meta itemprop="name" content="WebRTC code samples">
18-
<meta name="mobile-web-app-capable" content="yes">
19-
<meta id="theme-color" name="theme-color" content="#ffffff">
20-
21-
<base target="_blank">
22-
23-
<title>WebRTC samples</title>
24-
25-
<link rel="icon" sizes="192x192" href="src/images/webrtc-icon-192x192.png">
26-
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
27-
<link rel="stylesheet" href="src/css/main.css" />
28-
29-
<style>
30-
h2 {
31-
font-size: 1.5em;
32-
font-weight: 500;
33-
}
34-
h3 {
35-
border-top: none;
36-
}
37-
section {
38-
border-bottom: 1px solid #eee;
39-
margin: 0 0 1.5em 0;
40-
padding: 0 0 1.5em 0;
41-
}
42-
section:last-child {
43-
border-bottom: none;
44-
margin: 0;
45-
padding: 0;
46-
}
47-
</style>
12+
<meta charset="utf-8">
13+
<meta name="description" content="WebRTC Javascript code samples">
14+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
15+
<meta itemprop="description" content="Client-side WebRTC code samples">
16+
<meta itemprop="image" content="src/images/webrtc-icon-192x192.png">
17+
<meta itemprop="name" content="WebRTC code samples">
18+
<meta name="mobile-web-app-capable" content="yes">
19+
<meta id="theme-color" name="theme-color" content="#ffffff">
20+
21+
<base target="_blank">
22+
23+
<title>WebRTC samples</title>
24+
25+
<link rel="icon" sizes="192x192" href="src/images/webrtc-icon-192x192.png">
26+
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
27+
<link rel="stylesheet" href="src/css/main.css" />
28+
29+
<style>
30+
h2 {
31+
font-size: 1.5em;
32+
font-weight: 500;
33+
}
34+
h3 {
35+
border-top: none;
36+
}
37+
section {
38+
border-bottom: 1px solid #eee;
39+
margin: 0 0 1.5em 0;
40+
padding: 0 0 1.5em 0;
41+
}
42+
section:last-child {
43+
border-bottom: none;
44+
margin: 0;
45+
padding: 0;
46+
}
47+
</style>
4848
</head>
4949

5050
<body>
@@ -74,6 +74,7 @@ <h1>WebRTC samples</h1>
7474

7575
<h2 id="the-demos">The demos</h2>
7676

77+
7778
<h3 id="getusermedia">getUserMedia</h3>
7879

7980
<p><a href="src/content/getusermedia/gum/">Basic getUserMedia demo</a></p>
@@ -84,6 +85,8 @@ <h3 id="getusermedia">getUserMedia</h3>
8485

8586
<p><a href="src/content/getusermedia/resolution/">Choose camera resolution</a></p>
8687

88+
<p><a href="https://webrtc.github.io/samples/src/content/getusermedia/audio/">Audio-only getUserMedia() output to local audio element</a></p>
89+
8790
<p><a href="src/content/getusermedia/audio/">Audio-only getUserMedia() output to local audio element</a></p>
8891

8992
<p><a href="src/content/getusermedia/volume/">Audio-only getUserMedia() displaying volume</a></p>
@@ -93,6 +96,17 @@ <h3 id="getusermedia">getUserMedia</h3>
9396
<p><a href="src/content/getusermedia/record/">Record stream</a></p>
9497

9598

99+
<h3 id="capture">Stream capture</h3>
100+
101+
<!-- <p><a href="https://webrtc.github.io/samples/src/content/capture/video-pc/">Stream from a video element to a peer connection</a></p> -->
102+
103+
<p><a href="https://webrtc.github.io/samples/src/content/capture/canvas-video/">Stream from a canvas element to a video element</a></p>
104+
105+
<!-- <p><a href="https://webrtc.github.io/samples/src/content/capture/canvas-pc/">Stream from a canvas element to a peer connection</a></p> -->
106+
107+
<!-- <p><a href="https://webrtc.github.io/samples/src/content/capture/canvas-record/">Record a stream from a canvas element</a></p> -->
108+
109+
96110
<h3 id="devices">Devices</h3>
97111

98112
<p><a href="src/content/devices/input-output/">Choose camera, microphone and speaker</a></p>

‎src/content/capture/canvas-video/css/main.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
3+
*
4+
* Use of this source code is governed by a BSD-style license
5+
* that can be found in the LICENSE file in the root of the source
6+
* tree.
7+
*/
8+
9+
button {
10+
margin: 0 20px 0 0;
11+
width: 83px;
12+
}
13+
14+
canvas {
15+
background-color: #666;
16+
height: 231px;
17+
margin: 0 20px 0 0;
18+
vertical-align: top;
19+
width: calc(50% - 12px);
20+
}
21+
22+
video {
23+
height: 231px;
24+
margin: 0 0 20px 0;
25+
width: calc(50% - 12px);
26+
}
27+
28+
@media screen and (max-width: 400px) {
29+
button {
30+
margin: 0 11px 10px 0;
31+
width: 83px;
32+
}
33+
canvas {
34+
margin: 0 10px 0 0;
35+
width: calc(50% - 7px);
36+
}
37+
video {
38+
margin: 0 0 20px 0;
39+
width: calc(50% - 7px);
40+
}
41+
}

‎src/content/capture/canvas-video/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<!--
3+
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by a BSD-style license
6+
* that can be found in the LICENSE file in the root of the source
7+
* tree.
8+
-->
9+
<html>
10+
<head>
11+
12+
<meta charset="utf-8">
13+
<meta name="description" content="WebRTC code samples">
14+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
15+
<meta itemprop="description" content="Client-side WebRTC code samples">
16+
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
17+
<meta itemprop="name" content="WebRTC code samples">
18+
<meta name="mobile-web-app-capable" content="yes">
19+
<meta id="theme-color" name="theme-color" content="#ffffff">
20+
21+
<base target="_blank">
22+
23+
<title>Canvas to video</title>
24+
25+
<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
26+
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
27+
<link rel="stylesheet" href="../../../css/main.css" />
28+
<link rel="stylesheet" href="css/main.css" />
29+
30+
</head>
31+
32+
<body>
33+
34+
<div id="container">
35+
36+
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Stream from a canvas to a video element</span></h1>
37+
38+
<canvas></canvas>
39+
40+
<video autoplay></video>
41+
42+
<p>Click and drag on the canvas (on the left) to move the teapot.</p>
43+
44+
<p>This demo requires Firefox 43 or above, Chrome 51 or above, or Chrome 50 with <strong>Experimental Web Platform features</strong> enabled.</p>
45+
46+
<p>The teapot is drawn on the canvas element using WebGL. A stream is captured from the canvas element using its <code>captureStream()</code> method and set as the <code>src</code> of the video element using <code>URL.createObjectURL()</code>.</p>
47+
48+
<p>The <code>canvas</code>, <code>video</code>, and <code>stream</code> objects are in global scope, so you can inspect them from the browser console.</p>
49+
50+
<p>For more demos and information about <code>captureStream()</code>, see <a href="https://docs.google.com/document/d/1JmWfOtUP6ZqsYJ--U8y0OtHkBt-VyjX4N-JqIjb1t78" title="Implementation overview doc">Media Capture from Canvas Implementation</a>.</p>
51+
52+
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-video" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
53+
54+
</div>
55+
56+
<!-- Teapot code -->
57+
<script src="js/third_party/webgl-utils.js"></script>
58+
<script src="js/third_party/webgl-debug.js"></script>
59+
<script src="js/third_party/matrix4x4.js"></script>
60+
<script src="js/third_party/cameracontroller.js"></script>
61+
<script src="js/third_party/teapot-streams.js"></script>
62+
<script src="js/third_party/demo.js"></script>
63+
64+
<script src="js/main.js"></script>
65+
66+
<script src="../../../js/lib/ga.js"></script>
67+
</body>
68+
</html>

‎src/content/capture/canvas-video/js/main.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
3+
*
4+
* Use of this source code is governed by a BSD-style license
5+
* that can be found in the LICENSE file in the root of the source
6+
* tree.
7+
*/
8+
9+
/* global main */
10+
11+
'use strict';
12+
13+
// Call main() in demo.js
14+
main();
15+
16+
var canvas = document.querySelector('canvas');
17+
var video = document.querySelector('video');
18+
19+
var stream = canvas.captureStream();
20+
video.srcObject = stream;

0 commit comments

Comments
 (0)