帧绘玩=>运用video与canvas游玩的伪“人体感到”

2019年8月31日 180次阅读 来源: newsning

写在前面

谢谢列位在前端一向努力奋斗的顺序猿们，愿望今后的HelloWorld会更优美。

谢谢来看看机灵的前端童鞋怎样防盗作者的分享

谢谢停了一天的网终究恢复

干货

先来分享2张图
1）王的气愤
《帧绘玩=>运用video与canvas游玩的伪“人体感到”》” /></span><br />2) 顺序猿的气愤<br /><span><img layer-src=来看看机灵的前端童鞋怎样防盗自创的代码完成的，
原作者项目GitHub地点

  • Q：在谷歌浏览器上运转的，示意页面一片空白，啥都没有，叨教这是为何？
  • A：经由过程谷歌的文档可以得知，这是为了安全性斟酌，非 HTTPS 的服务端要求都不能接入摄像头，简朴来讲，chrome经由过程文件的体式格局翻开一个html文件，是没法开启摄像头的，可以在当地服务端翻开哦！如：localhost
  • 还要注重写兼容哦！楼主只写了chrome的

嗨起来

顺序猿们怎样可能当场止步，让我们应用代码，本身来写一个自动照相吧！

  • AV.html《帧绘玩=>运用video与canvas游玩的伪“人体感到”》” /></span></li></ul><pre><code><!DOCTYPE html> <html> <head> <meta charset=
    • AV.js《帧绘玩=>运用video与canvas游玩的伪“人体感到”》” /></span></li></ul><pre><code>(function() { var av = function(option) { option = option || {}; this.op = (function(o) { for(var i in option) { o[i] = option[i]; } return o; }({ style: { width: 320,//视频 画布 宽 height: 240//高 }, deg: 0.12,//灵敏度 触发行动幅度 die: 500,//dwon机时候，触发事宜后500ms内不触发 delta:300,//取帧距离 300ms 猎取一次视频帧 sw:true//开关，默以为开 })); this.initEm(); this.initMedia(); this.initCanvas(); this.switchAV(); } var avpro = av.prototype; //初始化基本元素 avpro.initEm = function() { //video元素 this.video = document.querySelector(this.op.el || 'video'); this.video.setAttribute('autoplay', ''); this.video.style.objectFit = 'fill'; //初始化canvas元素 var canvas = document.createElement(

      遗嘱

      写前圣成佛：觉得本身立时要写出一篇无与伦比的文章。
      写后呆成魔：写的跟流水账样的。

      末了愿望宝强可以好起来。

    原文作者：newsning
    原文地址: https://segmentfault.com/a/1190000006492676
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞