今天在Twitter上看到用户davywtf将webcam设置为网站favicon。

在线示例:

https://wybiral.github.io/code-art/projects/tiny-mirror/

我们可以看到js源代码:

// Handle FF
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia; window.onload = () => {
// Create favicon link element
const favicon = document.createElement('link');
favicon.rel = 'shortcut icon';
favicon.type = 'image/png';
favicon.href = '../../images/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(favicon);
// Create hidden canvas
const w = 32;
const h = 32;
const canvas = document.createElement('canvas');
canvas.style = 'display: none';
canvas.width = w;
canvas.height = h;
document.body.appendChild(canvas);
// Grab canvas context
const ctx = canvas.getContext('2d');
// Create hidden video element
const video = document.createElement('video');
video.style = 'display: none';
video.width = canvas.width;
video.height = canvas.height;
document.body.appendChild(video);
// Assign user media to video and start loop
navigator.mediaDevices.getUserMedia({
video: true
}).then(stream => {
video.srcObject = stream;
video.play();
loop();
});
// Flag for mirror image
let mirror = false;
// Loop forever
const loop = () => {
// Mirror image based on checkbox
let x = 0;
if (mirror) {
x = canvas.width * -1;
ctx.scale(-1, 1);
}
// Copy video to canvas
ctx.drawImage(video, x, 0, canvas.width, canvas.height);
// Set canvas to favicon
favicon.setAttribute('href', canvas.toDataURL());
// Loop
setTimeout(loop, 100);
};
// Handle checkbox change event
document.getElementById('mirror').addEventListener('change', e => mirror = e.target.checked);
};

其实,思路就是读取摄像头流数据,通过canvas绘制,再设置到favicon。

将webcam设置为网站favicon的更多相关文章

  1. Orchard运用 - 设置网站Favicon标识

    Favicon其实是访问其网站时在浏览器地址栏最前边呈现的类似logo的图标,可以作为品牌的标识,一般是其网站logo的缩小版并一般是ico格式的图片.详细解释可看这里: Favicon - 维基百科 ...

  2. 使用PHP获取网站Favicon的方法

    使用PHP获取网站Favicon的方法 Jan022014 作者:Jerry Bendy   发布:2014-01-02 23:18   分类:PHP   阅读:4,357 views   20条评论 ...

  3. 修改tomcat小猫图标,设置项目的favicon图标

    修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式 1.全局方式: 进入tomcat服务器\webapps\ROOT,然后用自己项目的favicon.ico替换to ...

  4. 那么如何添加网站favicon.ico图标

    1.  获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: ...

  5. 如何设置让网站禁止被爬虫收录?robots.txt

    robot.txt只是爬虫禁抓协议,user-agent表示禁止哪个爬虫,disallow告诉爬出那个禁止抓取的目录. 如果爬虫够友好的话,会遵守网站的robot.txt内容. 一个内部业务系统,不想 ...

  6. 网站favicon图标的显示问题

    今天在微信开发者工具发现一个错误,说是找不到favicon.ico这个文件. 这个就是标签式浏览器显示在页面title前面的小图标,移动端也没什么用,所以一直没在意,今天有空就研究了一下,发现还是有点 ...

  7. 网站favicon.ico 图标

    favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...

  8. 【IIS】windows2008 ii7 设置访问网站提示帐号密码登录

    3个步骤: 1.添加windows身份验证: windows2008默认是不启用的,需要我们自己去启动,在管理工具 - 服务器管理- 角色 ,拉下去,下面有个[添加角色服务],安全性- Windows ...

  9. Sharepoint2013搜索学习笔记之设置sharepoint网站内容源(五)

    第一步,进入管理中心,点击管理应用程序,点击search service 应用程序进入到搜索管理配置页面,点击内容源 第二步,点击新建内容源,给内容源命名,在爬网内容类型中选sharepoint网站, ...

随机推荐

  1. mysql (六)

    约束: 非空约束: 创建表时添加: create table stu( id  int , name  varchar(20) not null ) 创建完表之后 alter table stu  m ...

  2. linux驱动调试记录

    linux驱动调试 linux 目录 /proc 下面可以配置驱动的调试信息,比如给proc目录的自己定制的驱动的一文件设置一个变量,然后驱动程序跟了proc的参数值来配置调试级别.类似于内核调试的级 ...

  3. tar打包

    进入到目录里,执行下面的命令,可以把目录内的所有内容打包 tar -cvf 111.tar *

  4. 20175211 2017-2018-2 《Java程序设计》第六周学习记录

    目录 7.1 内部类 7.2 匿名类 7.3 异常类 断言 参考资料 <Java 2实用教程>第七章 内部类和异常类 7.1 内部类 内部类的外嵌类的成员变量在内部类中依然有效,内部类中的 ...

  5. nist-sha

    nist目前支持的sha运算,sha1系列,输出mac160bit. sha2系列,支持sha2-224,sha2-256,sha2-384,sha2-512,sha2-512/224,sha2-51 ...

  6. CentOS 7 MySQL HA之DRBD

    一.DRBD简介 DRBD的全称为:Distributed ReplicatedBlock Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本而构成,用以构建高可用性的集群.其实 ...

  7. day17 python递归案例(二分查找,三级菜单)

    递归函数与三级菜单 menu = { '北京': { '海淀': { '五道口': { 'soho': {}, '网易': {}, 'google': {} }, '中关村': { '爱奇艺': {} ...

  8. Roomblock: a Platform for Learning ROS Navigation With Roomba, Raspberry Pi and RPLIDAR(转)

      What is this? "Roomblock" is a robot platform consists of a Roomba, a Raspberry Pi 2, a ...

  9. 模块cv2的用法

    一.读入图像 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整路径 flags:读入图片的标志  cv2.IMREAD_COLOR:默认参数 ...

  10. urlconnection代码

    package com.yucheng.connection; import java.io.BufferedReader; import java.io.InputStream; import ja ...