返回

掌握 WebRTC 轻松自拍——实现步骤大公开！

前端

哈喽，大家好，我是海怪。

最近一直在看 WebRTC 的用法，也学了一下音视频流的东西，今天就跟大家分享一个好玩的小实战吧——给自己拍照。

页面结构
首先，我们要拆分一下实现步骤：

  1. 打开摄像头，获取视频流。
  2. 把视频流显示到页面上。
  3. 捕获当前视频帧，生成图片。
  4. 显示图片。

接下来，我们来一步步实现。

打开摄像头

// 检查浏览器是否支持 getUserMedia
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert('您的浏览器不支持 getUserMedia，无法使用摄像头拍照。');
  return;
}

// 请求用户允许使用摄像头
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
  // 获取视频流成功

  // 将视频流显示到页面上
  var video = document.getElementById('video');
  video.srcObject = stream;

  // 捕获当前视频帧，生成图片
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0);

  // 显示图片
  var image = document.getElementById('image');
  image.src = canvas.toDataURL('image/png');
}).catch(function(error) {
  // 获取视频流失败

  alert('获取摄像头失败，请检查您的摄像头是否连接正常。');
});

显示视频流

<video id="video" width="320" height="240"></video>

捕获当前视频帧，生成图片

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0);

显示图片

<img id="image" width="320" height="240">

好了，到这里，我们就已经实现了用 WebRTC 给自己拍照的功能了。

怎么样，是不是很简单呢？

除了拍照，WebRTC 还可以用来实现很多其他功能，比如视频通话、直播等等。感兴趣的朋友可以去了解一下。

最后，希望大家都能玩得开心！