JavascriptES5 / ES6 / ES7 / ES8

[04天]Web端打打开用户摄像头拍照mediaDevices

mediaDevices

在Web端打打开用户摄像头拍照,是通过navigator对象的新API mediaDevices对象实现。先来一个完整例子:打开用户摄像头播放录制内容,实时拍照下载<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta ...
6

[03天]不使用file类型input触发文件选择

文件上传

传统文件浏览上传想当年,我们在Web端文件上传:<input type="file">如果想自定义样式:<label for="file">自定义样式</label> <input type="file" id="file" style="display: none;">即使能自定义样式,...
11

[02天]ThreeJS基础理论要点大纲

ThreeJS webGL 3D

左手坐标系伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上。其余的手指指向前方,这样就建立了一个左手坐标系。其中,拇指、食指和其余手指分别代表x,y,z轴的正方向,如下图自拍。左手坐标系一、ThreeJS 要素场景 scene渲染器 renderer相机 camera 对象 object 光源 light 二、光源环境光 AmbientLight环境光是没有特定方向的光源,主要是均匀整体改变Three...
9

[01天]HTML5 Audio音频频谱实现

HTML5 Audio 频谱

心法 01 天DEMO在线地址: http://demo.ccued.com/HTML5_Audio_Spectrum/完整的示例代码。代码不多,把音乐地址换一下,自己跑跑看吧<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   &l...
14

TypeScript阅读笔记

数据类型number 数字const num: number = 1string 字符串const str: string = 'lenton'boolean 布尔值const bl: boolean = truearray 数组const arr1: Array<number> ...
199

ES2015~ES2022温旧知新

解构赋值/* 解构赋值 */ let {  max, min } = Math let { length: len } = 'hello world'标签模板/* 标签模板 */ // eg.1 alert`hello world`  &nbs...
238

JS防抖与节流

防抖 节流

如我们有个需求:在窗口大小改变后,计算窗口的宽高比。可能代码如下:function calc() {     console.log(window.innerWidth / window.innerHeight) } window.addEventListener('resize', calc)这可以满足需求,但是当我们拉动窗口大小时发现,控制台的输出频率非常高,造成不必要的消耗。...
260

前端直播视频流RTSP,RTMP,HLS,FLV方案初探

注:本文主要为网上可见方案测试结果。并非实现过程详细说明。内容测试时间: 2021-05-07本文实践测试概览格式/协议简要说明插件、JS库浏览器RTSP可以直接从摄像头获取的流,延迟低。但浏览器无法直接播放VLC, VXGIE11, Chrome与Firefox低版本RTMPAdobe私有协议,所以要Flash支持。延迟低,需媒体服务器处理转发Video.js  FlashIE11HLSApple提出的协议,需媒体服务器处理转发,浏览器支持好,延迟高Video.js , Tcplay...
2241

HTML5的canvas动画转视频MP4

html5 canvas MediaRecorder

本文主要是研究canvas画布如动画何转为mp4视频并保存在本地。这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的。具体兼容性未知,直接代码加注释说明下实现思路...
2582

字符画进阶实现

上一篇HTML5视频转字符动画上一篇只能使用现有的字符,这次进阶到自己写字来生成字符画,先来看看效果:在线体验: http://demo.ccued.com/draw/原理与上一篇HTML5视频转字符动画大同,不说思路了,源码未加密,需要代码自取。...
1509

精品模板蓝瞳原创精品网站模板

^