-
Notifications
You must be signed in to change notification settings - Fork 9
/
tutorial-capture-media.html
131 lines (117 loc) · 9.22 KB
/
tutorial-capture-media.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>rtc.io</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- responsive -->
<link rel="stylesheet" media="screen and (max-width: 960px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 710px)" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="fonts/source-sans/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/code.css">
</head>
<body>
<a class="scroll-point pt-top" name="top"></a>
<header>
<a href="https://github.com/rtc-io"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<a class="scroll-point pt-top" name="top"></a>
<div class="site">
<div class="mascot">
<img src="images/artsio.png">
</div>
<div class="logo" data-subtext="OpenSource WebRTC">
<a href="index.html">rtc.io</a>
</div>
<nav>
<ul>
<li><a href="index.html">About</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="modules.html">Modules</a></li>
</ul>
</nav>
</div>
<div class="shadow"></div>
</header>
<div class="main" role="content"><h1 id="webrtc-media-capture-tutorial">WebRTC Media Capture Tutorial</h1>
<p>This is a simple tutorial that looks at how to capture media from within
your browser using the <a href="http://www.w3.org/TR/mediacapture-streams/#dom-navigator-getusermedia">getUserMedia</a> API.</p>
<p>The first thing we will do is work around the browser prefixing that exists
at the moment, you can do this manually if you prefer but in this tutorial we will make use of the <a href="/module-rtc-core.html">rtc-core</a> helper module:</p>
<div class="highlight"><pre><span class="c1">// include the rtc-core detection helpers to assist with finding</span>
<span class="c1">// the correct browser variant of getUserMedia</span>
<span class="kd">var</span> <span class="nx">detect</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'rtc-core/detect'</span><span class="p">);</span>
<span class="c1">// go find the browser specific version of getUserMedia and patch into navigator</span>
<span class="nx">navigator</span><span class="p">.</span><span class="nx">getUserMedia</span> <span class="o">=</span> <span class="nx">detect</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">navigator</span><span class="p">,</span> <span class="s1">'getUserMedia'</span><span class="p">);</span>
<span class="c1">// patch window url for creating blob urls</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">URL</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span> <span class="o">||</span> <span class="nx">detect</span><span class="p">(</span><span class="s1">'URL'</span><span class="p">);</span>
</pre></div>
<p>Once we have everything ready to go, we can then make the request to capture the media:</p>
<div class="highlight"><pre><span class="c1">// initialise the constraints we will pass to the getUserMedia call</span>
<span class="kd">var</span> <span class="nx">constraints</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">video</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">mandatory</span><span class="o">:</span> <span class="p">{},</span> <span class="nx">optional</span><span class="o">:</span> <span class="p">[]</span>
<span class="p">},</span>
<span class="nx">audio</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">};</span>
<span class="c1">// make the getUserMedia request</span>
<span class="c1">// 1st arg constraints, 2nd success callback and 3rd failure callback</span>
<span class="nx">navigator</span><span class="p">.</span><span class="nx">getUserMedia</span><span class="p">(</span><span class="nx">constraints</span><span class="p">,</span> <span class="nx">renderMedia</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'could not capture media: '</span><span class="p">,</span> <span class="nx">err</span><span class="p">);</span>
<span class="p">});</span>
</pre></div>
<p>As outlined in the code comments, the <code>getUserMedia</code> function takes three arguments:</p>
<ol>
<li><p>A constraints object which tells the browser the kind of media we are interested in. This information can include specific requests such as video resolution.</p>
</li>
<li><p>A success callback that will be triggered if the request is successful.</p>
</li>
<li><p>A failure callback that is triggered if the request fails.</p>
</li>
</ol>
<p>In our case we want to handle the success callback in our <code>renderMedia</code> function:</p>
<div class="highlight"><pre><span class="kd">function</span> <span class="nx">renderMedia</span><span class="p">(</span><span class="nx">stream</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// create a video element</span>
<span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'video'</span><span class="p">);</span>
<span class="nx">video</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'autoplay'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">video</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'muted'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="c1">// if we have mozilla specific attributes, update the mozSrcObject</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">video</span><span class="p">.</span><span class="nx">mozSrcObject</span> <span class="o">!=</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">video</span><span class="p">.</span><span class="nx">mozSrcObject</span> <span class="o">=</span> <span class="nx">stream</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">video</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">stream</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// add the video element to the document</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">video</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
<p>In our sample above, the <code>renderMedia</code> function simply creates a new <code><video></code> element and marks it to <code>autoplay</code> and then adds it to the DOM. One point of note here is the different ways in which the browsers differ on how to associate the live stream with the video element.</p>
<p>Chrome uses a <a href="http://www.w3.org/TR/FileAPI/#url">blob URL</a> whereas Mozilla uses the <code>mozSrcObject</code> to feed the media stream directly into the video element.</p>
<p><a class="sample" data-sample="capture-media" href="#">Run Sample</a></p>
<p>As you can see it takes a bit of code to capture media, using the standard browser APIs (even with a bit of detection help from <code>rtc-core</code>). In our <a href="/tutorial-capture-rtc-media.html">next tutorial</a> we will look at using the <code>rtc-media</code> module to take care of this functionality for us.</p>
</div>
<footer>
<p>
<a href="http://nicta.com.au">
<img src="images/nicta-logo.gif" alt="NICTA logo">
</a>© NICTA 2013 - 2014
</p>
<p class="license">Project source code is licensed under the <a href="https://github.com/rtc-io/rtc/blob/master/LICENSE">Apache 2.0</a>.</p>
<a class="closing" href="#top"></a>
</footer>
</body>
<script src="js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-26567546-2', 'rtc.io');
ga('send', 'pageview');
</script>
</html>