html5
风不二
一个不正经的业余程序员
展开
-
【抖音】定格传送带
周末快乐、各位;今天有刷抖音了,看到了抖音的【定格传送带】,又复习下动手实践了下,跟以前的多帧延迟思路差不多;直接贴代码了(function(){ var cs = document.querySelector('canvas') var ctx = cs.getContext('2d') var vd = document.getElementById('vd') var req; var step = 4; var heightstep = 0; var原创 2021-05-23 20:55:04 · 844 阅读 · 0 评论 -
[qiankun]微前端踩坑日记
5月17日Error in event handler for "updatePopper": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'出现情况在是自已用在使用 el-select Tooltip 等组件时候会报错原因解决方法严格模式设置成false就可以strictStyleIsolation: false...原创 2021-05-17 20:03:34 · 1454 阅读 · 3 评论 -
数学教具功能beta版本开发
相关了解:jCanvas防止注入MediaRecord 动画日志收集废话不多说先贴成品抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡体验地址: https://ibeeger.com/math/体验地址中案例写的比较简单,凑合看了~~~~使用文档说明绘制矩形:rect(x,y, width,height)绘制圆形:circle(r, x, y)绘制直线原创 2020-10-29 20:19:49 · 237 阅读 · 4 评论 -
抖音蓝线挑战web前端实现方案
前面已经发过一篇,抖音「延迟像素格」的实现思路今天又来蹭热度了,最近的抖音「蓝线挑战」的道具使用人数多起来, 什么发际线了,光头效果了,曲线眉毛了等等等等,有点意思,想了想前端应该也可以实现,今天这篇文章就整理下。方案构思采集视频根据视频分辨率,设置绘制区域,保持统一随着时间推移绘制视频指定区域一部分绘制图片,一部分绘制视频添加辅助线整体绘制结束这里要注意的是绘制成图片的位置,第二次就不再绘制该坐标区域采集区域和绘制区域保持一致,视频尺寸和画布尺寸保持一致。第一次:采集视频位置原创 2020-10-19 11:04:32 · 3299 阅读 · 1 评论 -
webrtc 学习 传输速率的控制【四】
前面了解了RTCPeerConnection(null) 相关的知识,这里就不再回忆了,var local = new RTCPeerConnection(null);原创 2020-09-02 22:18:16 · 629 阅读 · 0 评论 -
前端常见各种解码编码整理-v1
encodeURI/encodeURIComponent, decodeURI/decodeURIComponent至于这两个有什么区别,可以自行了解这里就不说了;编码encodeURI('汉字') // "%E6%B1%89%E5%AD%97"解码decodeURI("%E6%B1%89%E5%AD%97")//汉字base64 编解码编码 btoa(string);btoa('汉字') //提示超出Latin1, 不能直接这样使用需要 encodeURI btoa原创 2020-08-05 14:05:59 · 3835 阅读 · 0 评论 -
纯前端技术裁切合并音频方式实现
随着5G时代的来临,音视频的领域的必将嫌弃新的浪潮,只有不断的学习才能跟的上步伐,吧啦吧啦....好吧前面真的编不下去了~~~,快速进入正题,这篇文章主要介绍的功能1、选择本地音频文件 (多段)2、选择音频区间播放 (多段)3、合并audiobuffer4、下载编辑后的音频整体例子功能比较单一,不过后面可以思考视频是否可以沿用方式,拼接多段,可以肯定的应该能提取视频的声音,视频画面部分没有尝试,目前只测试了音频功能正常; 注意这个是纯前端的技术并不是把音频文件上传到服务端 用 ffmpeg方原创 2020-06-21 11:17:55 · 3072 阅读 · 20 评论 -
rtmp 调研整理
涉及技术点nginxffmpegrtmp 协议webrtcWCS服务器其实整体来说可能跟 mediasoup 没有太多紧密联系(站在bs结构)h5的方式没有办法直接推流到 rtmp地址,下面一点一点来总结整理。nginx 方面这里研究了 nginx 搭建rtmp, 安装nginx 需要 --with-rtmp-module,安装成功之后配置rtmp服务,rtmp { ...原创 2020-05-08 16:38:39 · 372 阅读 · 0 评论 -
WebAssembly【四】加密解密应用场景
在以前一提到前端的加密、解密,可能感觉很鸡肋,因为web前端的代码完全暴露在用户侧,很容易破译或者阅读加、解迷的规则。所以一直以来一提到安全方面,大家不约而同的都想那是服务端的事情,不过现在 WebAssembly 可以让前端多少承担点安全方面的重任了。 不过因为请求的 wasm 文件,所有人都可以下载,也是有破译的风险,只不过难度增加了先说下 wasm 是什么样的文件,通过编译后生成的二进制...原创 2020-01-17 11:08:14 · 5083 阅读 · 0 评论 -
BufferSource 如何编辑audioBuffer使得音乐倒放【AudioContext系列三】
标题党????,实际文章要让你有些发散思维,通过audioBuffer可以做到什么功能。裁切音乐调整播放顺序audioBuffer 可视化原创 2020-01-03 19:46:42 · 2044 阅读 · 0 评论 -
抖音多帧延迟教你前端实现方式
最近在学习WebAssembly,因为是提升性能,所以一直在使用canvas 做一些尝试。今天就突发奇想以前看见的抖音多帧延迟的装饰,今天就来分析实现下。多帧延迟先简单分析下这个效果,假设咱们有一个视频是宽400300, 分为100个4030的小方格,用固定的时间间隔播放格子。视频顺序播放async function initVideo() { const stream = aw...原创 2019-12-26 20:23:12 · 3130 阅读 · 1 评论 -
navigator.mediaDevices.getUserMedia参数整理
以前都是在用navigator.getUserMedia,整理了下参数说明navigator.mediaDevices.getUserMedia(options);options = { audio: { sampleRate: 16000 }, video: { facingMode: 'user' }}facingMode: ‘u...原创 2019-12-02 17:03:05 · 11823 阅读 · 2 评论 -
AudioContext 无标签播放音频【AudioContext系列一】
html播放音频常用的都是用audio标签,如果不可见用样式隐藏然后用js去控制播放,根据audio提供的能力模拟播放进度等等。这里介绍一种web Audio API 的方式播放, 代码很简单也很容易理解 const audioContext = new AudioContext(); async function play() { const res = await ...原创 2019-11-20 21:55:36 · 4654 阅读 · 0 评论 -
AudioContext 滤波设置【AudioContext系列二】
上一篇介绍了无标签播放音频,本篇增加些音效效果,主要的apiaudioContext.createBiquadFilter主要设置 frequency, Q两个值 (频率,质量) const filter = audioContext.createBiquadFilter(); filter.frequency.value = number; //取值范围 小于800 ...原创 2019-11-20 21:54:02 · 1947 阅读 · 0 评论 -
webRTC之 DataChannel 文件传输
前面介绍了 webrtc 音视频流的通信, 根据自己粗浅的理解简单介绍了下, 今天花了点时间看了下DataChannel, 如何通过rtc发送文件,开始的步骤还是一样的 通过websocket 把 offer answer icecandidate 点对点建立这次的主要提下 createDataChannel本地端创建sendChannel = local.createDataChan...原创 2019-11-05 21:30:40 · 4602 阅读 · 0 评论 -
二进制通信方式数据混淆
今天在调研互动白板的功能,顺便把以前发现的二进制socket消息研究了下,以往的socket消息 都是明文的,有的我发现是二进制的。原创 2019-10-22 13:56:34 · 1125 阅读 · 0 评论 -
【前端】前端异常错误收集(未完待续)
错误1复现代码var a = { name: 'Groucho' };var b = { name: 'Harpo', sibling: a };a.sibling = b;JSON.stringify(a)原创 2019-07-02 19:13:44 · 716 阅读 · 0 评论 -
webRTC 1对1和多对多的思考-信令版(三)
上一篇已经实现了同一个页面的本地和远程的视频显示,今天再来分析下两个页面(或者叫两个用户)方案思考和实现。先来看下图,通过上图的情况,可以更进一步了解,每个用户都有一个本地原视频图像(实色框) 和 远端图像(这里只画了一个)组成。上一篇https://blog.csdn.net/ihtml5/article/details/101058900 已经知道setLocalDescriptio...原创 2019-09-27 14:51:12 · 1203 阅读 · 0 评论 -
webRTC 单机实现方案无信令版本(二)
上一篇介绍可能是整体的流程,可能表述的太简单,不过实现的时候还是需要一步一步的来实现,技术点有两部分 [M] = method [E] = eventnavigator.mediaDevices.getUserMediaRTCPeerConnection[M] addStream[M] setLocalDescription[M] setRemoteDescription[M] ...原创 2019-09-20 14:56:19 · 672 阅读 · 0 评论 -
webRTC 流程梳理-服务搭建(一)
最近打算搭建下webRTC服务,了解了一下原理,其实媒体视频流不跟服务器通信的,服务器只是把点对点的频道线路接通,这一节只把流程梳理了一下,还有后续不要走开~~~随机roomid && 信令连接建立进来的用户 发送信令 (‘click door’) => 信令服务器 判断 房间内是不是有人 (将两人分到同一个room)* 如果房间已有人,接受到信令 (‘ad...原创 2019-09-10 21:19:44 · 600 阅读 · 0 评论 -
【渲染性能】Planting 绘制 css的translateZ影响
话不多说看个例子,这个是使用translateZ的css 之后对渲染性能有多少影响http://works.ibeeger.com/dev/chrome/单纯从视觉角度就能感觉出来前后的差异,分析了6秒钟,结果页一目了然。下图是启用translateZ的效果Painting 占比很大,我简单的查了下影响panting的像背景图片、颜色等因素然后取消使用咱们看看结果差距很明显, 下...原创 2019-08-21 10:22:12 · 392 阅读 · 1 评论 -
chrome SpeechRecognition API
1、首先要注意 会调用 MediaDevices.getUserMedia 获取权限 也就是说必须在https下 或则 localhost下。2、recognition.lang 设置语言 通过 speechSynthesis.getVoices() 获得所支持的语言列表,3、识别率较高,成本低4、目前兼容性并不高,虽然2012年推出的规范,但目前只有部分浏览器支持。 ...原创 2019-02-21 16:43:54 · 2254 阅读 · 0 评论 -
拖动缓动效果 代码实现
这里只写了简单的拖动缓冲效果该效果大部分都是用在了 拖动->到底->异步加载html 部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25原创 2015-07-18 15:06:28 · 1120 阅读 · 0 评论 -
canvas 画图扇形
//扇形 CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sDeg, eDeg) { // 初始保存 this.save(); // 位移到目标点 this.translate(x, y); this.beginPath(); // 画出圆弧 this.arc(0,转载 2015-05-26 11:05:40 · 1635 阅读 · 0 评论 -
html5适应屏幕的方案
适应屏幕的方案:1、css3 Media queries (针对多版本设计稿)2、设计稿不复杂的时候 通过宽度自适应用百分比3、通过更新meta:viewport标签,通过设计稿尺寸和设备尺寸的比例去设置优点:1、简单易懂,不需要JavaScript的支持,跨度大2、适应能力强,代码量较少3、适应能力强,针对不同的屏幕基本都可以适应缺点:1、代码原创 2015-05-18 16:20:23 · 801 阅读 · 0 评论 -
nodejs canvas to base64 and post server write to image
客户端代码呈现原创 2014-05-13 17:46:36 · 1310 阅读 · 0 评论 -
phantomjs render options
// render to file named "test.jpg" with JPEG formatpage.render("test.jpg"); // render to file named "test.jpg" with PNG format. format option will override format of file extension.page.render("tes转载 2014-05-07 16:28:16 · 1310 阅读 · 0 评论 -
html5 manifest 缓存的学习
先说下使用方法html结构....demo.appcache转载 2014-05-05 10:51:17 · 782 阅读 · 0 评论 -
meta viewport 标签亲测 (待续)
做前端得提起 viewport 大家应该都不陌生。这次主要是测试 width很多时候可能设置得 width=device-width 当width 设置确切得值得时候屏幕就按照设置得值去显示,例如 把width = 320其实320宽度得div 会沾满屏幕值得注意得地方是 如果要这样做 initial-scale=1.0, minimum原创 2014-04-01 10:58:10 · 507 阅读 · 0 评论 -
【chrome扩展】如何过滤异步接口以及请求参数
前段时间有小伙伴想方便的获取某个网站的异步接口的地址以及请求参数,还有请求域名的区分,业余时间就做了个chrome扩展,方便可视化使用。首先manifest.json就不详细介绍了这块主要提两个地方"content_scripts": [{ "matches": ["https://*.ibeeger.com/*","https://*.ibeeger-dev.com/*"], ...原创 2019-02-22 10:27:57 · 2649 阅读 · 3 评论 -
【微信】微信支付订单开发小结(前端部分)
微信支付开发整理,前端部分这里再把详细的步骤通俗一下:1、首先前端选择商品下单 调用自己服务器的接口2、服务端收到后,生成自己订单id并保存, 在服务端请求 微信的下单接口,3、微信下单接口返回之后 再通知到前端...原创 2019-02-27 08:29:51 · 1578 阅读 · 0 评论 -
emsdk python版本错误问题解决
前端时间接触webAssembly(地址),安装过程中遇到了这个问题收集下,这个是因为你点上安装了 python3的原因Traceback (most recent call last): File "./emsdk", line 803, in xcode_sdk_version return subprocess.check_output(['xcrun', '--show-s...原创 2019-08-20 10:26:27 · 1489 阅读 · 0 评论 -
【音】analyserNode web上如何获取麦克风的频率数据
web上如何获取麦克风的频率数据,主要还是使用AudioContext的API进行处理原创 2019-03-28 10:09:50 · 1355 阅读 · 8 评论 -
vue 项目按需加载配置
今天在沟通业务需求的时候,无意中发现了小伙伴的代码和平常写的有些区别,上代码这里是他的代码,import Home from '@/pages/Home'const Error = () => import('@/pages/Error')const Lesson = () => import('@/pages/Lesson')const Preview = () =>...原创 2019-03-13 19:33:52 · 860 阅读 · 0 评论 -
【音】chrome 获取媒体 enumerateDevices 详细信息
async function f () { let d = await navigator.mediaDevices.enumerateDevices(); console.log(d);}; f();非允许情况下是获取不到label详细信息的如果是允许情况下,可以获取到faceTime HD Camera获取详情可以访问这个地址 进行测试查看https://ibeege...原创 2019-03-20 16:59:25 · 6882 阅读 · 8 评论 -
chrome人脸监测,electron方案支持
这个功能默认是没有开启的,需要从这里开启chrome://flags/#enable-experimental-web-platform-features如果开启可以支持脸部、文本、条形码的识别FaceDetectorTextDetectorBarcodeDetectorFaceDetectorvar faceDetector = new FaceDetector({fastM...原创 2019-03-20 15:43:43 · 1877 阅读 · 0 评论 -
【音】MediaRecorder支持录制类型情况
最近有有需求,需要捕获用户的脸部表情以及上课的表现情况, 用于提供给AI部门进行算法练习,研究了一下mediaRecorder 录制streamvideo/webmvideo/webm;codecs=vp8video/webm;codecs=vp9video/webm;codecs=vp8.0video/webm;codecs=vp9.0video/webm;codecs=h264...原创 2019-03-19 19:20:55 · 4738 阅读 · 0 评论 -
前端错误信息定位问题总结
在真正的生产环境中,由于用户端的环境不可预知,所以会出现很多预料之外的情况,这里就需要前端小伙伴一方面考虑完善,另外一方面能够统计到用户端的异常错误情况(js报错信息)当然也包括用户端的信息都可以获取到。方便定位和复现问题。前端一般会用到https://sentry.io/welcome/这个第三方sdk 进行统计,这个不是今天的主题; 今天想说的是js错误信息的详细收集进入正题wind...原创 2019-03-09 19:52:48 · 2281 阅读 · 0 评论 -
用vue 创建工程或者是创建组件注意事项
背景:原来都是一直在使用react,现在换成了vue因为中途进来的项目,一直没有从头开始理清楚,今天花了一些时间梳理了一下。@vue/cli 全局安装就不说了这里主要说下创建vue组件和创建vue项目刚开始的时候一直在用vue create projectname每次创建之后发现和自己的工程结构不一样后来发现Usage: vue <command> [options...原创 2019-03-09 18:08:58 · 2750 阅读 · 0 评论 -
整屏滚动效果插件 fullpage详解
1、引用文件 <link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script&am转载 2014-03-31 14:33:10 · 3763 阅读 · 0 评论