JavaScript进阶【3】操作摄像头

最新推荐文章于 2023-07-13 09:46:59 发布

原创

最新推荐文章于 2023-07-13 09:46:59 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何结合Vue.js与HTML5的getUserMedia() API来捕获实时视频并创建一个简单的照相亭应用。通过使用<canvas> API的ctx.drawImage方法，可以将视频帧绘制到<canvas>元素上，并将其转换为图片格式。

https://www.html5rocks.com/zh/tutorials/getusermedia/intro/

Vue.js进阶文章列表

截取屏幕截图：

<canvas> API 的 ctx.drawImage(video, 0, 0) 方法可以轻松地将 <video> 帧绘制到 <canvas> 上。当然，既然我们通过 getUserMedia() 获得了视频输入，就可轻松地使用即时视频创建照相亭应用了。

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

function snapshot() {
  if (localMediaStream) {
    ctx.drawImage(video, 0, 0);
    // "image/webp" works in Chrome 18. In other browsers, this will fall back to im