用 WebRTC 给自己拍张照

写代码的海怪

于 2022-02-26 13:55:26 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：杂谈文章标签： webrtc 音视频 html5

本文链接：https://blog.youkuaiyun.com/MonsterException/article/details/123148995

本文介绍了如何使用WebRTC的MediaDevices.getUserMedia接口打开摄像头，获取视频流，并将其显示在canvas元素中。接着，通过canvas的toDataURL方法生成画面图片，并实现拍照、清空和下载功能。这是一个简单的WebRTC音视频实战项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

项目已上传至 Github，Repo
地址：https://github.com/haixiangyan/webrtc-take-photo

页面结构

首先，我们要拆分一下实现步骤：

打开摄像头，获取视频流
需要一个 <video> 来播放摄像头的画面
点击按钮，生成画面，并展示在 <img> 里

因此，我们需要 <video>, <img> 以及 <button>。

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
<main>
  <video id="video">浏览器不支持 Video</video>

  <canvas id="canvas">
    <img id="photo" alt="拍照后的照片">
  </canvas>
</main>

<div class="actions">
  <button id="takePhotoButton" type="button" class="btn btn-primary">拍照</button>
  <button id="downloadButton" type="button"