JavaScript进阶【3】操作摄像头

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

C++程序员Carea

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

阅读量193

点赞数

本文链接：https://blog.csdn.net/calmreason/article/details/108736448

版权

Vue.js进阶教程专栏收录该内容

46 篇文章 15 订阅

订阅专栏

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 image/png.
    document.querySelector('img').src = canvas.toDataURL('image/webp');
  }
}

video.addEventListener('click', snapshot, false);

// Not showing vendor prefixes or code that works cross-browser.
navigator.getUserMedia({video: true}, function(stream) {
  video.src = window.URL.createObjectURL(stream);
  localMediaStream = stream;
}, onFailSoHard);