盘点现代浏览器的各种神奇能力,功能令人惊讶

盘点现代浏览器的各种神奇能力,功能令人惊讶😮

浏览器的进化

一个运行在浏览器里面的操作系统。一个炫酷的量子纠缠网页。内嵌在浏览器里面的AI大模型。

随着web技术的迅猛发展,现代浏览器已经不仅仅是一个浏览网页的工具了。它的功能早已进化到超出你我的想象,渐渐地发展成了一个强大的多功能计算平台。

本期视频,我们来盘点一下现代浏览器那些令人惊叹的神奇功能。我还会简单介绍下实现这些功能的核心原理。

量子纠缠效果的网页

这是一个外网爆火的视频。视频里面的两个小球可以感知对方窗口的位置变化。当拖动其中一个窗口的时候,两个小球会产生类似量子纠缠一样的动画。

作者在Github上面开源了一个简易版本的代码。这个开源代码用几个立方体实现了类似的效果。其中,3D动画部分使用了开源项目three.js,一个纯javascript框架的3D动画类库。

立方体相互感知位置的功能则是使用了Local storage。每当打开一个新的窗口,代码就会把立方体的信息实时更新进Local storage。其他窗口则通过监控Local storage的变化,获取到其他立方体的位置信息,从而实现位置数据的共享。

我们可以在这个网址在线体验一下它的功能。

https://bgstaal.github.io/multipleWindow3dScene/

浏览器的截屏功能

这是一个纯js实现的截屏功能的仓库。

js-screen-shot · likaia

我们只需要引入这么一小段代码,就可以给自己的网站添加一个截屏功能。

这里有在线演示,我们试用一下。我们点击截图,给浏览器赋予截屏的权限。注意这里我们不单单可以对浏览器本身进行截屏,还可以对整个屏幕进行截屏。

我们赋予整个屏幕的截屏权限,然后点击共享。

可以看到,整个电脑屏幕都可以被这个网页进行截屏。我们选择一个区域,点击对号,图片就放到了我的剪贴板里。然后,我可以在任意的软件里面粘贴图片。

网页版录屏功能

有了截屏,当然还有录屏。这个极简的网页就提供了网页版的录屏功能。

Recorder

我们还可以赋予它麦克风跟相机的权限,直接进行录音录像。

我们点击一下,这里就调用了电脑的摄像头,进行了录音录像。同时它还可以录制屏幕。我们点击这里的share screen,选择整个屏幕。

只需要一个网站,不必依赖任何软件,就能完成录音录像录屏。

实现这些功能的代码并不难,只需要在js里面创建一个MediaRecorder类就可以了。

MediaRecorder是一个Web API,我们可以在Mozilla的官网找到关于Web API的相关文档。里面还有详细的代码使用案例。

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

Web API的工作原理

操作系统提供了捕获屏幕内容的底层API,浏览器则对这些底层API进行了封装调用,使得它们可以在web环境中使用。这一整套的统一标准,我们统称为web API。

我们可以在Mozilla的官网找到这些web API。我们可以在这里的Browser compatibility查看每个浏览器对于这个web API的相关兼容性。

比如这里,我们看到Chrome浏览器在2015年底的第47版完全支持了这个功能。

本地文件操作的新API

FileSystemFileHandle,这是近几年才被各大浏览器支持的一个全新的web API。

它提供了对电脑上的本地文件进行查看修改的功能。它的原理,同样是浏览器封装了操作系统进行文件处理的底层API,从而能够在web环境里面调用操作系统级别的文件操作功能。

有了这个API,同样也催生了不少网页端的神奇应用。比如,这个在线的批量文件重命名工具。

Rename - 批量文件重命名工具 (jgrass.xyz)

我们右上角可以找到他的Github地址,查看他的源码。

在线批量文件重命名工具演示

我们来试用一下。这里我们选择第二项新增插入字符,然后我们导入一个文件夹。这里我们需要给浏览器赋予文件的查看权限。选择一个我电脑上的本地文件夹,这里点击查看文件,然后文件就被导入进来了。

我们需要在头上插入一个文字,我们插入几个汉字,叫做爬爬虾。这里勾选上启用规则,我们可以在预览里面看到,他把所有的文件进行了批量重命名,前面都加了爬爬虾三个字。

然后我们点击执行,这里浏览器再次向我们申请权限。我们点击保存更改,更改结束以后我们来看一下我电脑上的本地文件夹。可以看到,所有文件名字都被批量更改过来了。

浏览器权限的安全提醒

这里爬爬虾想再提醒一下,如果遇到网站申请文件读写权限的时候,我们一定要确认申请的权限是处于合理范围之内的。千万不要遇到对话框就无脑点确认。因为现在浏览器的功能非常强大,甚至可以直接改你电脑上的本地文件。一旦系统的重要文件被恶意篡改,会带来极大的安全风险。

浏览器中的仿真操作系统

以上这些神奇应用的集大成之作,就是这个项目:deadalOS------一个运行在浏览器里面的仿真操作系统。我们可以在Github的介绍页面右侧这里找到一个演示链接。

我们点击进去,这里面仿佛是一个win 10的操作系统。首先它有文件管理功能,我们可以看到这里可以新建文件、新建文件夹。在开始菜单里面还有对图片PDF等等文件的支持。我们可以直接将电脑上的某个文件拖拽进来,它支持对文件的修改重命名编辑等等。

它还能挂载我电脑上的本地文件夹。这里我们点击右键,点击map directory,选择一个我电脑上的本地文件夹。这样就把我电脑上的本地文件夹挂载进了这个仿真操作系统里面。

deadalOS的功能特性

作者使用纯前端的方式实现了Windows的图形化界面,包括下面的开始菜单、任务栏还有日历、壁纸等等的功能。

项目使用了video.js实现了视频播放器的功能。比如这里我拷贝进来一个MP4文件,我们可以直接播放它。

项目还内嵌了ffmpeg.wasm,就是使用纯前端的方式实现了ffmpeg。

我们找到一个视频,右键可以看到这里可以直接进行格式转换。

项目还内嵌了EmulatorJS,也就是一个网页版的游戏模拟器的功能。

我们甚至可以在这里面玩一些小游戏,比如桌面上这个Doom。在开始菜单的Games里面也提供了若干款的小游戏项目。

项目还内嵌了许多虚拟环境的模拟器,比如这个boxedwine,可以运行一些32位的Windows程序。

如果对这块内容感兴趣的话,我们可以读一下作者的README文件。里面的每一个功能实现背后都有一个开源项目。我们不禁要感叹,现在前端技术的发展真的是十分的迅速。

浏览器内嵌AI大模型

这是一个内嵌在Chrome浏览器里面的谷歌Gemini模型。

有了它以后,我们可以直接在浏览器里面使用js代码调用大语言模型。我们来试着执行一下。

javascript 复制代码
const session = await window.ai.createTextSession(); 
const stream = session.promptStreaming("你是谁,是哪个公司开发的"); 
for await (const chunk of stream) {console.log(chunk)}

浏览器里面内嵌的AI大模型完全可以离线使用,数据无需上传到服务器。这样可以显著的减少服务器的压力,并且数据都是本地存储的,可以更好的保护用户的隐私。节省了网络请求所带来的时间开销,离线大模型还有极快的响应速度。

如何运行离线大模型

我们来看如何运行这么一个离线大模型:

  1. 首先我们下载谷歌Chrome浏览器。我们要保证浏览器的最低版本必须是128以上。如果低于这个版本,我们检查更新,然后安装一下更新。

  2. 下一步我们进入这个地址chrome:两个斜线flags

    我们需要打开两个开关。首先是这个optimized guide on device model,我们把它选择到第三个enabled并且bypass。这里的意思是开启大模型的功能并且忽略兼容性检查。

  3. 下一个,我们搜索Gemini,这是谷歌的大模型。这里我们也把它开启起来。

  4. 然后我们点击relaunch重启一下浏览器。我们在浏览器里面点击F12,调出浏览器的控制台。然后我们输入这个代码。这里如果报错也没关系,我们关掉所有的窗口,再重启一下Chrome浏览器。

  5. 重启完成以后,我们进入这个地址chrome://components。

    我们找到这个optimization guide on device model,


    这里点击check update。这一步就是下载大模型。

  6. 下载完成以后,我们再点击F12,就可以试着来用一下了。

    我们还是粘贴过来这句代码。首先创建一个对话,然后使用流式输出,最后把输出里的每个字打印出来。

javascript 复制代码
const session = await window.ai.createTextSession(); 
const stream = session.promptStreaming("你是谁,是哪个公司开发的"); 
for await (const chunk of stream) {console.log(chunk)}
相关推荐
EasyDSS37 分钟前
视频监控从安装到优化的技术指南,视频汇聚系统EasyCVR智能安防系统构建之道
大数据·网络·网络协议·音视频
rufeike43 分钟前
UDP协议理解
网络·网络协议·udp
江理不变情2 小时前
海思ISP调试记录
网络·接口隔离原则
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
世界尽头与你2 小时前
【安全扫描器原理】网络扫描算法
网络·安全
GKoSon2 小时前
加入RPC shell指令 温箱长时间监控
网络·网络协议·rpc
hgdlip3 小时前
关闭IP属地显示会影响账号的正常使用吗
网络·网络协议·tcp/ip·ip属地
Zz_waiting.4 小时前
网络原理 - 7(TCP - 4)
网络·网络协议·tcp/ip
RECRUITGUY4 小时前
用交换机连接两台电脑,电脑A读取/写电脑B的数据
服务器·网络·负载均衡
zheshiyangyang4 小时前
HTTP相关
网络·网络协议·http