今天在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. javascript 的引入

    目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...

  2. mysql 的mgr集群

    mysql 的mgr集群 http://wubx.net/mgr%E7%9B%91%E6%8E%A7%E5%8F%8A%E4%BC%98%E5%8C%96%E7%82%B9/ MGR调优参数因为基本复 ...

  3. 创建vs离线安装程序(不联网安装vs)

    https://blog.csdn.net/u013064585/article/details/80996933

  4. PowerBI功能发布时间线

    DAX/PowerBI系列 - PowerBI功能发布时间线 PowerBI从GA/上线以来,每月发布的功能收集起来做成了一个报表:(耐心等待PowerBI 出来,噔噔噔噔~~~) 上图显示: 1)D ...

  5. vue移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html

  6. 查找字符在字符串中第N次出现的位置

      1.查找字符串 @find 在字符串 @str 中第 (@n) 次出现的位置.没有第 (@n) 次返回 0. 返回@find在@str中第(@n)次出现的位置.没有第(@n)次返回0. ), ), ...

  7. windows程序设计 Unicode和多字节之间转换

    Unicode转多字节:WideCharToMultiByte 多字节转Unicode:MultiByteToWideChar 代码演示 #include <windows.h> int ...

  8. VS2015右键集成TortoiseGit

    先上效果 再说步骤 1.安装VS TortoiseGit等~~ 2.以外部工具方式调用TortoiseGit 3.在VS中设置右键菜单 在菜单栏下方右键,选择自定义 在弹出窗口中选择,命令->上 ...

  9. c# 笔记cookie

    if (Request.Cookies["svpoint"] != null) { Request.Cookies[].s_SvcID.ToString(); } else { H ...

  10. kubernetes集群pod使用tc进行网络资源限额

    kubernetes集群pod使用tc进行网络资源限额 Docker容器可以实现CPU,内存,磁盘的IO限额,但是没有实现网络IO的限额.主要原因是在实际使用中,构建的网络环境是往超级复杂的大型网络. ...