背景
新项目有一个新的需求,需要用到浏览器录音。在本地进行测试的时候并没有发现问题,部署以后访问就出现了如下错误:
浏览器不支持 getUserMedia
经过了解得知getUserMedia 是默认不支持 http 访问的,必须要用 https 协议且需要合法的域名。
解决方法
使用https协议访问
申请域名并配置SSL证书,实现HTTPS协议请求访问即可避免此问题
配置浏览器临时解决方案
打开谷歌浏览器,在地址栏中输入chrome://flags/#unsafely-treat-insecure-origin-as-secure后并回车可见如下内容:
将目标网站输入到Insecure origins treated as secure中,然后将Disabled下拉改为Enabled。使用此方法即可临时解决无法...
8个月前 (04-30) 1015℃ 0评论
0喜欢
背景
因业务需求原因,需要在网页上进行录音,使用Javascript来进行操作,完成录音并保存上传到指定服务器。实现相关代码后进行测试,发现访问音频设备最后被拒绝。
原因
网页上反馈的异常信息如下图所示
经过再次的查看,确认未经处理的异常信息如下:
DOMException: Permission denied by system
查下浏览器的设置,浏览器是否禁用麦克风,经过确认浏览器并没有发现什么问题。
浏览器各项检查都非常的正常,尝试录音错误依然再次出现,按道理来讲,应该是没有什么问题的。就目前情况而言,的确可能存在不讲道理的情况呀。随后更换一台电脑进行了一下测试,经过测试发现没有任何问题,正常录音。这就诡异了!也许是音频硬件原因?将这音频设备在其他电脑上进行再次确认,测试结果还是没有问题。这就让人郁闷了.
...
1年前 (2023-11-09) 1605℃ 0评论
0喜欢
背景
页面加载很多音频标签,音频资源一些加载不成功,音频标签不可用,并且排除以下几种情况:
检查音频的链接是否有效
检查音频格式是否支持
检查网络连接是否通畅
如果确认以上内容没有任何问题,则是页面加载过多的音频资源而导致部分音频资源加载失败。可以使用JavaScript进行资源加载重试,当然重试的策略需要进行限制,避免无限制尝试。
实现方式
以下是使用JavaScript代码实现自动重新加载资源的一个简单的示例,当音频标签加载失败时,它会自动尝试重新加载音频:
const audio = document.querySelector('audio');
audio.addEventListener('error', () => {
audio.load();
});
在上面示例中,首先选择了音频标签,并添加了一个...
1年前 (2023-07-16) 1520℃ 0评论
1喜欢
背景
某一个应用自动在网页上获取一些文本内容,本来是通过document.querySelector来找指定节点。经过一段时间网页貌似升级了,一些节点的class属性的值会出现随机的变动,每次class属性的值都会不一样。最初的方式就失去了作用,根据节点内容的分析发现可以通过xpath来获取。曾经在IE浏览器上使用过XPath,并且API相当简单。在非IE浏览器上貌似没有这么好用。以下内容在Chrome浏览器进行尝试,经过测试可以完成自己的预期工作。
浏览器支持
Mozilla是根据DOM标准来实现对XPath的支持的。DOM Level 3附加标准DOM Level 3 XPath定义了用于在DOM中计算XPath表达式的接口。遗憾的是,这个标准要比微软直观的方式复杂得多。虽然有好多与XPath相关的对象,最重要的两个是:XPathEvaluator和XPathRes...
2年前 (2022-12-03) 1776℃ 0评论
16喜欢
背景
现有一个考试项目,当在浏览器进行考试时需要判断用户是否存在切屏,如果切屏就对当前考试进行自动强制交卷。浏览器中可通过window对象的onblur、onfocus判断,或者document的hidden属性判断。
获取焦点(onfocus)和失去焦点(onblur)
关于是否失焦点,浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是获取焦点的,就是说要是激活的。也就是说页面刚刚渲染完,用户在没有页面上任何操作时,页面是不会正常监听这两个事件的;或者页面在打开状态下,但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。直到,用户操作页面触发focus,之后离开页面才会触发blur,再次点击到当前页面时才会触发focus,如此反复都会触发相应的事件。
onblur
在chrome浏览器下,点击...
2年前 (2022-11-21) 3513℃ 0评论
5喜欢
背景
站点网上飘,哪有不挨刀。总是遇到千奇百怪的问题,让人猝不及防。在5月1日的前一天,发现博客被人镜像了,这是一个非常糟心的问题,我非常肯定的是这次的镜像不怀好意。为什么我会这么说呢?因为镜像站点域名太不像话了,太长了,有没有特殊的含义,所以我认为这种镜像网站是非常有恶意的。如下图:
镜像站点域名
JavaScript简单紧急处理
这种恶意的镜像站点无法绝对的杜绝,只能尽可能的减小影响。此次处理非常简单,直接使用Javascript对当前域名进行判断,与指定域名不符就跳转回指定的域名。
版本一
var local=window.location.host;
if(local.indexOf("skyfinder.cc")==-1){
location.href = location.href.replace(local,"skyfinder....
4年前 (2021-05-02) 1005℃ 0评论
14喜欢
背景
人生在世,都会遇到各种问题,就连写个博客也不得安宁。突然发现自己的博客被别人恶意的以框架(iframe/object)形式嵌入了, 这种网页被嵌入框架的情况很常见,只是这次是我罢了。其实我不太明白,为什么要选择个人博客嵌入。不管怎么样自己还是得做出点响应,要不然自己总是觉得缺了一些什么。
发现
这次发现也算一次偶然,突然想看看统计数据,所以就登录到了百度统计查看记录,结果就发现了一些比较奇怪的来源,所以就尝试访问看了看。大致如下:
打开来源后就晓得博客被人恶意嵌入了框架或者被恶意镜像了,经过查看网页代码,确认博客是被恶意嵌入了框架(iframe)。如下图:
观点
这是2008年开始在国内流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中。只是现在改为了object,其实也是框架了。
其实用框...
5年前 (2020-06-24) 2311℃ 0评论
14喜欢
昨天19:50左右突然收到之前同事的一条微信消息,发来一个网址。点开网址之后呈现的是一个信息内容网站,之后跳转到一个时时彩的网站。当时直接就关掉了,随后就问下他是不是被盗了账号,是不是使用了自动清理微信好友的公众号!最后得知其也在帮朋友查找这个网站跳转的问题,故发给我看一下。
背景由来
被恶意跳转的网站
随后使用Chrome开发人员工具看了下网页加载,基本就确定是被注入了JavaScript代码,至于注入了什么地方就需要另行查证。在页面进行了相关的查证,并没有发现任何JavaScript的跳转代码。最后考虑外部文件,果然发现了恶意的跳转代码。如下图:
被插入的恶意跳转
发现被插入的代码以后,立即告知了他。他即刻进行了修改。强制刷新以后,问题不再出现。奈何几分钟后此问题再次复现,并且位置已经发生改变。这一定是被入侵或者是挂了马的,随后将推测告知并让其采用其他...
6年前 (2019-03-07) 1007℃ 0评论
0喜欢
左右带有箭头的焦点图轮播
点击左右箭头可以实现图片切换效果。
右下角有图片切换页次。
jQuery实现此功能。
浏览器支持
IE浏览器支持此特效。
edge浏览器支持此特效。
谷歌浏览器支持此特效。
safria浏览器支持此特效。
opera浏览器支持此特效。
火狐浏览器支持此特效。
下载:
左右带有箭头的焦点图轮播
转载请注明:清风亦平凡 » 左右带有箭头的焦点图轮播
...
6年前 (2018-12-13) 1189℃ 0评论
0喜欢
全屏自适应焦点图轮播
实现了焦点图轮播效果。
焦点图轮播具有横向自适应功能。
浏览器支持:
IE浏览器支持此特效。
谷歌浏览器支持此特效。
火狐浏览器支持此特效。
opera浏览器支持此特效。
safria浏览器支持此特效。
下载:
全屏自适应焦点图轮播
转载请注明:清风亦平凡 » 全屏自适应焦点图轮播
...
6年前 (2018-12-11) 985℃ 0评论
0喜欢
SON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。
一、跨域认证的问题
联网服务离不开用户认证。一般流程是下面这样。
1、用户向服务器发送用户名和密码。
2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。
3、服务器向用户返回一个 session_id,写入用户的 Cookie。
4、用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器。
5、服务器收到 session_id,找到前期保存的数据,由此得知用户的身份。
这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session。
举例来说,A 网站和 B 网站是同一家公司的关联服务。现在要求,用...
6年前 (2018-12-09) 1151℃ 0评论
0喜欢
响应式焦点图轮播效果:
实现了焦点图轮播效果。
根据屏幕大小的不同显示效果会不同。
jQuery实现此功能。
浏览器支持:
IE浏览器支持此特效。
edge浏览器支持此特效。
谷歌浏览器支持此特效。
火狐浏览器支持此特效。
opera浏览器支持此特效。
safria浏览器支持此特效。
下载:
响应式焦点图轮播效果
转载请注明:清风亦平凡 » 响应式焦点图轮播效果
...
6年前 (2018-12-05) 1077℃ 0评论
0喜欢
grayscale.js 是一个实现网页元素 “灰度” 效果的js插件,可以运行在大多数的浏览器中,在 Mozilla Firefox 2/3, Safari4, IE6 / 7, Opera 9 中成功运行。
下载:
grayscale.js
更多信息参考:https://j11y.io/javascript/grayscaling-in-non-ie-browsers/
转载请注明:清风亦平凡 » “灰度”效果的js插件 GRAYSCALE.JS
...
6年前 (2018-12-05) 1669℃ 0评论
2喜欢
Date 对象算是较常用的对象之一,但很多人完全不会操作,就算一些简单的操作也用 moment 而不自己尝试一下。本次分享下 Date 中的 date 使用技巧,希望能给大家启发。
MDN官网介绍
setDate()方法根据本地时间来指定一个日期对象的天数。如果 dayValue 超出了月份的合理范围,setDate 将会相应地更新 Date 对象。例如,如果为 dayValue 指定0,那么日期就会被设置为上个月的最后一天。
获取月份天数
// 获取月份天数
function getMonthDayCount(year, month) {
return new Date(year, month, 0).getDate();
}
console.log(getMonthDayCount(2017, 10)); // 31
Date 第三个参数的本质跟 setDate 是...
6年前 (2018-12-03) 1071℃ 0评论
3喜欢
在某些情况下,需要获得用户的DPI。以下方法是用JavaScript实现获取用户的DPI。
function getDPI() {
var arrDPI = new Array;
var devicePixelRatio = window.devicePixelRatio || 1;
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.o...
9年前 (2016-07-02) 2499℃ 0评论
3喜欢