这篇翻译不完整。请帮忙从英语翻译这篇文章。
本文介绍如何使用WebRTC在支持WebRTC的计算机或手机上访问摄像机，并与其一起拍照。 尝试这个Try this sample,样本，然后阅读，了解它的工作原理。
如果你喜欢，你也可以直接跳转到Github的代码code on Github 。
HTML标记
Our HTML interface我们的HTML界面有两个主要的操作部分：流和捕获面板和演示面板。 它们中的每一个都以其自己的<div>并排呈现，以便于造型和控制。
左边的第一个面板包含两个组件：一个<video>元素，它将接收来自WebRTC的流，以及用户点击捕获视频帧的<button>。
<div class="camera"> <video id="video">Video stream not available.</video> <button id="startbutton">Take photo</button> </div>
这很简单，当我们进入JavaScript代码时，我们将看到它如何联系在一起。
接下来，我们有一个<canvas>元素，捕获的帧被存储到其中，可能以某种方式进行操作，然后转换为输出图像文件。 通过使用display：none设置画布来保持画布的隐藏，以避免画面的混乱 - 用户不需要看到这个中间阶段。
我们还有一个<img>元素，我们将绘制图像 - 这是向用户显示的最终显示。
<canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="The screen capture will appear in this box."> </div>
这是所有相关的HTML。 其余的只是一些页面布局和一些文本提供一个链接回到这个页面。
The JavaScript code
现在来看看JavaScript代码。 我们将把它分解成几个小尺寸的碎片，使其更容易解释。
初始化
我们首先将整个脚本包装在匿名函数中，以避免使用全局变量，然后设置我们将要使用的各种变量。
(function() {
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
那些变量是：
宽度
无论输入视频的尺寸如何，我们将把所得到的图像缩放到320像素宽。
高度
给定流的宽度和宽高比，计算出图像的输出高度。
流媒体
指示当前是否有活动的视频流正在运行。
视频
这将是页面加载完成后对<video>元素的引用。
画布
这将是页面加载完成后对<canvas>元素的引用。
照片
这将在页面加载完成后引用<img>元素。
开始按钮
这将引用用于触发捕获的<button>元素。 我们会在页面加载完成之后得到。
startup( )函数
当页面加载完成时，startup( )函数运行，由window.addEventListener( )提供。 此功能的作用是请求访问用户的网络摄像头，将输出<img>初始化为默认状态，并建立从相机接收每帧视频所需的事件侦听器，并在点击按钮捕获图像时作出反应 。
获取元素引用
首先，我们参考我们需要访问的主要内容。
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
获取媒体流
接下来的任务是获取媒体流：
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occured! " + err);
});
在这里，我们正在调用MediaDevices.getUserMedia（）并请求视频流（无音频）。 它返回一个承诺，我们附加成功和失败的回调。
成功回调接收流对象作为输入。 它是新视频的<video>元素的源。
一旦流被链接到<video>元素，我们通过调用HTMLMediaElement.play（）开始播放。
如果打开流不起作用，调用错误回调函数。 如果没有连接兼容的相机，或者用户拒绝访问，则会发生这种情况。
监听视频开始播放
在<video>上调用HTMLMediaElement.play（）之后，在视频流开始流动之前，有一段（希望简短）的时间段过去了。 为了避免阻塞，直到发生这种情况，我们为视频播放，即视频播放实际开始时传送的视频添加事件侦听器。 此时，视频对象中的所有属性都已基于流的格式进行配置。
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
这个回调什么都不做，除非它是第一次被调用; 这是通过查看我们的流变量的值进行测试，这是第一次运行此方法时为false。
如果这是第一次运行，我们会根据视频的实际大小，video.videoWidth和要渲染视频宽度的宽度之间的大小差异来设置视频的高度。
最后，通过在每个元素的两个属性的每一个上调用Element.setAttribute（）来设置视频和画布的宽度和高度，并根据需要设置宽度和高度。 最后，我们将流变量设置为true，以防止我们再次无意中运行此设置代码。
处理按钮上的点击
为了在每次用户单击启动按钮时捕获静态照片，我们需要向按钮添加一个事件侦听器，以便在发出点击事件时被调用：
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
这个方法很简单：它只是调用我们的takepicture（）函数，在从流中捕获一个帧的部分中定义，然后在接收的事件上调用Event.preventDefault（），以防止点击被多次处理。
包装startup（）方法
startup（）方法中只有两行代码：
clearphoto(); }
这就是我们在Clearflow（）方法中，我们将在下面的清理照片框中进行描述。
清除照片框
清除照片框包括创建一个图像，然后将其转换为可以显示最近捕获的帧的<img>元素使用的格式。 该代码如下所示：
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
我们首先得到对我们用于屏幕外渲染的隐藏的<canvas>元素的引用。 接下来，我们将fillStyle设置为#AAA（相当浅灰色），并通过调用fillRect（）来填充整个画布。
最后在此功能中，我们将画布转换为PNG图像，并调用photo.setAttribute（）以使我们捕获的静止框显示图像。
从流中捕获帧
最后一个定义的功能是整个练习的重点：takepicture（）函数，其捕获当前显示的视频帧的作业将其转换为PNG文件，并将其显示在捕获的帧框中。 代码如下所示：
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
正如我们需要处理画布内容的情况一样，我们首先得到隐藏画布的2D绘图上下文。
然后，如果宽度和高度都是非零（意味着至少有潜在有效的图像数据），我们将画布的宽度和高度设置为与捕获帧的宽度和高度相匹配，然后调用drawImage（）来绘制当前的 将视频帧放入上下文中，用帧图像填充整个画布。
注意：这可以利用HTMLVideoElement接口看起来像任何接受HTMLImageElement作为参数的API的HTMLImageElement，将视频的当前帧呈现为图像的内容。
一旦画布包含捕获的图像，我们通过调用它的HTMLCanvasElement.toDataURL（）将它转换为PNG格式; 最后，我们调用photo.setAttribute（）来使我们捕获的静态框显示图像。
如果没有可用的有效图像（即宽度和高度均为0），则通过调用clearphoto（）清除捕获帧框的内容。
带有过滤器的乐趣
由于我们通过从<video>元素中抓取帧来捕获用户网络摄像头的图像，因此我们可以非常轻松地将过滤器和有趣的效果应用于视频。 事实证明，使用过滤器属性应用于元素的任何CSS过滤器都会影响捕获的照片。 这些过滤器可以从简单（使图像黑白）到极限（高斯模糊和色调旋转）。
您可以使用例如Firefox开发人员工具的风格编辑器来播放此效果; 有关如何执行此操作的详细信息，请参阅编辑CSS过滤器。