webrtc快速入门——使用 WebRTC 拍摄静止的照片

使用 getUserMedia() 拍摄静态照片

介绍了如何在 WebRTC 的支持下可以访问到电脑或者手机的摄像头并且使用它来拍摄照片。

本文介绍在支持 getUserMedia() 的计算机或手机上如何使用 navigator.mediaDevices.getUserMedia() 访问摄像机，并用其拍照。

HTML 标记

我们的 HTML 界面有两个主要的操作部分：流和捕获面板以及演示面板。它们俩都在它们自己的

• 1
• 2
• 3
• 4

这很简单，当我们进入 JavaScript 代码时，我们将看到它们是如何紧密联系在一起的。

接下来，我们有一个 元素，捕获的帧被存储到其中，可能以某种方式进行操作，然后转换为输出图像文件。通过使用样式 display:none 将画布保持隐藏，以避免画面的混乱——用户不需要看到这个中间过程。

我们还有一个 元素，我们将在其中绘制图像——这是让用户看到的最终显示。

 

  
 
1
2
3
4

这是所有相关的 HTML。其余的只是一些页面布局和提供一个返回页面链接的些许文本。

JavaScript 代码

现在来看看 JavaScript 代码。我们将把它分解成几个小的部分，使其更容易解释。

初始化

我们首先将整个脚本包装在匿名函数中，以避免使用全局变量，然后设置我们将要使用的各种变量。

(() => {
  const width = 320;    
  const height = 0;     

  const streaming = false;

  let video = null;
  let canvas = null;
  let photo = null;
  let startbutton = null; 
1
2
3
4
5
6
7
8
9
10

这些变量分别是：

width

无论输入视频的尺寸如何，我们将把所得到的图像缩放到宽度为 320 像素。

height

给定流的 width 和宽高比，计算出图像的输出高度。

streaming

指示当前是否有活动的视频流正在运行。

video

这将是页面加载完成后对 元素的引用。

canvas

这将是页面加载完成后对 元素的引用。

photo

这将在页面加载完成后引用 元素。

startbutton

这将引用用于触发捕获的 元素。我们会在页面加载完成之后得到。

startup() 函数

当页面加载完成时，提供给 EventTarget.addEventListener 的 startup() 函数将会运行。此函数的作用是请求访问用户的网络摄像头，将用于输出的 初始化为默认状态，并建立从相机接收每帧视频所需的事件监听器，并在点击按钮捕获图像时作出反应。

获取元素引用

首先，我们参考我们需要访问的主要内容。

 function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton'); 
1
2
3
4
5

获取流媒体

接下来的任务是获取媒体流：

navigator.mediaDevices
  .getUserMedia({ video: true, audio: false })
  .then((stream) => {
    video.srcObject = stream;
    video.play();
  })
  .catch((err) => {
    console.error(`An error occurred: ${err}`);
  }); 
1
2
3
4
5
6
7
8
9

在这里，我们调用 MediaDevices.getUserMedia() 并请求视频流（无音频）。它返回一个 promise，我们给它附加成功和失败情况下的回调方法。

成功回调接收一个 stream 对象作为输入。它是新视频的 元素的源。

一旦流被链接到 元素，我们通过调用 HTMLMediaElement.play() 开始播放。

如果打开流失败，则调用失败回调函数。在没有连接兼容的相机，或者用户拒绝访问时，则会发生这种情况。

监听视频开始播放

在 上调用 HTMLMediaElement.play() 之后，在视频流开始流动之前，有一段（希望简短）的时间段过去了。为了避免在此之前一直阻塞，我们为 video 加上一个 canplay 事件的监听器，当视频播放实际开始时会触发该事件。那时，视频对象中的所有属性都已基于流的格式进行配置。

video.addEventListener(
  "canplay",
  (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,
); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个回调什么都不做，除非它是第一次被调用；这是通过查看我们的 streaming 变量的值进行测试，这是第一次运行此方法时为 false。

如果这是第一次运行，我们会根据视频的实际大小，video.videoWidth 和要渲染视频宽度的宽度（witdh）之间的大小差异来设置视频的高度。

最后，通过在视频和画布上调用 Element.setAttribute() 来设置视频和画布的宽度（witdh）和高度（height），以使得两者相互匹配。最后，我们将 streaming 变量设置为 true，以防止我们无意中再次运行此设置代码。

处理按钮上的点击

为了在每次用户点击 startbutton 时捕获静态照片，我们需要向按钮添加一个事件监听器，以便在发出 click 事件时被调用：

startbutton.addEventListener(
  "click",
  (ev) => {
    takepicture();
    ev.preventDefault();
  },
  false,
); 
1
2
3
4
5
6
7
8

这个方法很简单：它只是调用我们的 takepicture() 函数，在从流中捕获帧的部分中定义，然后在接收的事件上调用 Event.preventDefault()，以防止点击被多次处理。

包装 startup() 方法

startup() 方法中只有两行代码：

这就是我们调用 clearphoto() 方法的地方，我们将在下面的清理照片框部分进行描述。

清理照片框

清理照片框包括创建一个图像，然后将其转换为可以显示最近捕获的帧的 元素使用的格式。该代码如下所示：

function clearphoto() {
  const context = canvas.getContext("2d");
  context.fillStyle = "#AAA";
  context.fillRect(0, 0, canvas.width, canvas.height);

  const data = canvas.toDataURL("image/png");
  photo.setAttribute("src", data);
} 
1
2
3
4
5
6
7
8

我们首先得到对我们用于屏幕外渲染的隐藏的 元素的引用。接下来，我们将 fillStyle 设置为 #AAA（相当浅的灰色），并通过调用 fillRect() 来填充整个画布。

最后在此功能中，我们将画布转换为 PNG 图像，并调用 photo.setAttribute() 以使我们捕获的静止框显示图像。

从流中捕获帧

最后一个定义的功能是整个练习的重点：takepicture() 函数，其捕获当前显示的视频帧的作业将其转换为 PNG 文件，并将其显示在捕获的帧框中。代码如下所示：

function takepicture() {
  const context = canvas.getContext("2d");
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  } else {
    clearphoto();
  }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13

正如我们需要处理画布内容的情况一样，我们首先得到隐藏画布的 2D 绘图上下文。

然后，如果宽度和高度都是非零（意味着至少有潜在有效的图像数据），我们将画布的宽度和高度设置为与捕获帧的宽度和高度相匹配，然后调用 drawImage() 将视频的当前帧绘制到上下文中，用帧图像填充整个画布。

一旦画布包含捕获的图像，我们通过调用它的 HTMLCanvasElement.toDataURL() 将它转换为 PNG 格式; 最后，我们调用 photo.setAttribute() 来使我们捕获的静态框显示图像。

如果没有可用的有效图像（即宽度和高度均为 0），则通过调用 clearphoto() 清除捕获帧框的内容。

例子代码

HTML代码

<div class="contentarea">
  <h1>MDN——navigator.mediaDevices.getUserMedia(): 静态照片拍摄演示h1>
  <p>
    此示例演示了如何使用内置的网络摄像头来获取媒体流，并从中获取图像，以使用该图像来创建一个
    PNG 图像。
  p>
  <div class="camera">
    <video id="video">视频流目前不可用。video>
    <button id="startbutton">拍摄照片button>
  div>
  <canvas id="canvas"> canvas>
  <div class="output">
    <img id="photo" alt="捕获的图像会显示在这里。" />
  div>
  <p>
    访问我们的文章：<a
      href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Taking_still_photos">
      使用 getUserMedia() 拍摄静态照片a
    >以详细了解此处使用的技术。
  p>
div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS代码

#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}

#canvas {
  display: none;
}

.camera {
  width: 340px;
  display: inline-block;
}

.output {
  width: 340px;
  display: inline-block;
  vertical-align: top;
}

#startbutton {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  bottom: 32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1);
}

.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
} 
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

JavaScript代码

(() => {
  // The width and height of the captured photo. We will set the
  // width to the value defined here, but the height will be
  // calculated based on the aspect ratio of the input stream.

  const width = 320; // We will scale the photo width to this
  let height = 0; // This will be computed based on the input stream

  // |streaming| indicates whether or not we're currently streaming
  // video from the camera. Obviously, we start at false.

  let streaming = false;

  // The various HTML elements we need to configure or control. These
  // will be set by the startup() function.

  let video = null;
  let canvas = null;
  let photo = null;
  let startbutton = null;

  function showViewLiveResultButton() {
    if (window.self !== window.top) {
      // Ensure that if our document is in a frame, we get the user
      // to first open it in its own tab or window. Otherwise, it
      // won't be able to request permission for camera access.
      document.querySelector(".contentarea").remove();
      const button = document.createElement("button");
      button.textContent = "查看以上示例代码的实时演示";
      document.body.append(button);
      button.addEventListener("click", () => window.open(location.href));
      return true;
    }
    return false;
  }

  function startup() {
    if (showViewLiveResultButton()) {
      return;
    }
    video = document.getElementById("video");
    canvas = document.getElementById("canvas");
    photo = document.getElementById("photo");
    startbutton = document.getElementById("startbutton");

    navigator.mediaDevices
      .getUserMedia({ video: true, audio: false })
      .then((stream) => {
        video.srcObject = stream;
        video.play();
      })
      .catch((err) => {
        console.error(`An error occurred: ${err}`);
      });

    video.addEventListener(
      "canplay",
      (ev) => {
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth / width);

          // Firefox currently has a bug where the height can't be read from
          // the video, so we will make assumptions if this happens.

          if (isNaN(height)) {
            height = width / (4 / 3);
          }

          video.setAttribute("width", width);
          video.setAttribute("height", height);
          canvas.setAttribute("width", width);
          canvas.setAttribute("height", height);
          streaming = true;
        }
      },
      false,
    );

    startbutton.addEventListener(
      "click",
      (ev) => {
        takepicture();
        ev.preventDefault();
      },
      false,
    );

    clearphoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    const context = canvas.getContext("2d");
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  }

  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takepicture() {
    const context = canvas.getContext("2d");
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      const data = canvas.toDataURL("image/png");
      photo.setAttribute("src", data);
    } else {
      clearphoto();
    }
  }

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener("load", startup, false);
})();

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

过滤器

由于我们通过从 元素中抓取帧来捕获用户网络摄像头的图像，因此我们可以非常轻松地将过滤器和有趣的效果应用于视频。事实证明，使用 filter 属性应用于元素的任何 CSS 过滤器都会影响捕获的照片。这些过滤器可以从简单（使图像黑白）到复杂（高斯模糊和色调旋转）。

你可以使用例如 Firefox 开发者工具的样式编辑器来播放此效果；有关如何执行此操作的详细信息，请参阅编辑 CSS 过滤器。

使用特定设备

如果需要，你可以将允许的视频源限定为特定的设备或特定的一组设备。要做到这一点，请调用 MediaDevices.enumerateDevices。若返回的 promise 兑现了一个 MediaDeviceInfo 对象（描述了可用的设备）数组，可以从中选取一个你想要允许的设备，并将对应的 deviceId 或 MediaTrackConstraints 对象的 deviceId 作为参数传入到 getUserMedia() 中。