- 博客(65)
- 资源 (4)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 用JavaScript动态提取视频中的文字
现阶段整个社会短视频，中视频为王，文字传播虽然被弱化，但在业务中还是有一定的传播价值，今天就来讲一讲如何使用js动态提取视频中的字幕。安装成功之后既可以用来提取图片中的文字也可以动态提取视频字幕。注意这里初始化是一个异步操作，初始化画布完成之后，video的play事件触发之后，每间隔一秒会重绘画布输出提取到的文字信息。OCR 引擎包装了起来，可以让js开发者在浏览器端和node端都能方便的进行使用。下面来一步一步来看看如何提取视频中的文字。一，tesseract.js介绍。tesseract.js使用。
2024-02-29 16:04:44
427
原创 用node.js搭建一个视频推流服务
在响应头里面我们需要返回Content的大小，Content-range，Accept-ranges，Content-type。还需要资源的路径和资源的大小，资源的大小会用来计算那一部分content要被send。这里的播放的视频是一个多个Partial Content组合起来的，每个Partial Content大小是1M。最终实现的效果如刚开始的实例，在浏览器中打开视频，会请求/video，该接口返回media类型的数据流片段。计算结束位置，这里取开始位置加上1M数据和结束位置两者之间的最小值。
2023-08-09 15:13:52
2385
原创 记住视频播放位置前端实现方案
在视频看课业务中，经常会对用户的视频学习记录进行记录，类似于视频网站的播放记录，区别是视频课程包含多个章节，需要记录XXX课程，第一节看课进度，第二节看课进度，等等。今天就来说说这块的两种实现方案，以及他们的优缺点和适用场景。
2023-04-19 11:12:12
497
原创 vue-router3.0处理页面滚动部分源码分析
在使用vue-router3.0时候，会发现不同的路由之间来回切换，会滚动到上次浏览的位置，今天就来看看这部分的vue-router中的源码实现。无论是基于hash还是history的路由切换，都对滚动进行了处理，这里分析其中一种即可。无论是初始化，或者push，replace都对滚动进行了相应的处理。下面我们详细看一下这个scroll.js。
2023-04-12 16:33:22
658
原创 Promisification
可能显得稍微有点复杂，这地方调用promisify返回一个包裹函数，这个包裹函数返回一个Promise，随后将自定义的Callback添加到args中，调用promisify传进来的函数。这里同样加载脚本，不同的是这里返回了一个Promise，参数只需要传入src，当脚本成功加载，resolve这个Promise，加载失败reject这个Promise。如果是定制化的Callback，类似不需要err的，可以手动promisify一下，无需装饰器。这样加一个参数，决定回调函数是否是多参数。
2023-03-30 17:51:07
177
原创 西瓜播放器全屏功能源码分析
剩下的else if语句主要针对，firefox, webkit类型webview，ie浏览器进行兼容，如果都不支持requestFullScreen方法，就通过给播放器的包裹元素添加样式的方式实现全屏效果。自定义事件 webkitpresentationmodechanged 相对的处理，这个事件会在画中画相对应操作触发，退出全屏删除全屏样式，触发exitFullScreen()方法。这里根据用户是否配置roateFullScreen来决定进入和退出全屏执行的方法，执行的方法略有差异，下面详细说明。
2023-03-10 16:23:34
962
原创 5种方法实现(a==1 && a==2 && a==3) == true
乍一看，这个咋能相等呢？深入思考就发现不仅可以相等，还有不少方法，下面就来讲讲这些方法都是如何实现的。
2022-11-17 10:44:23
463
原创 web中视频流的工作原理
在真实的视频网站中会经常用到语言的切换（国语or英文），网络不好的情况下使用自动清晰度等。把不同画质的Segments给append在一起也是完全没有问题的，所以在自动切换画质的过程中视频是继续播放的状态。使用MSE之后我们的代码变成了如下，依旧是给Video的Src属性赋值，不同的是使用了MediaSource对象。在上面的代码中我们使用了一个.mp4文件，包含了所有的音视频，这个只能满足最最简单的使用场景。视频刚加载或者网络不好的情况下，使用较低画质，占用带宽更少，用户的感受上交互时间会被缩短。
2022-11-07 16:38:09
2098
原创 什么是video codec? video codec在实际业务的应用。
从字面意思来理解，codec是编码和解码的缩写。所以思考下为什么视频需要加密呢？最原始的电影通过每秒展示24胶片来达到电影的效果。现在的视频只是把胶片换成了数字化的图片。未经压缩的视频的数据量太大了，我们有必要进行很多压缩处理来存储视频，就更不用说通过网络传输视频的时候了。想象一下我们需要多少数据来存储未经压缩的视频：全色彩的高清视频（1920x1080）每一帧为 8,294,400 字节。按照典型的每秒 30 帧的传播速度，高清视频每秒钟会占用 248,832,000 字节（约 249 MB）。
2022-09-05 14:31:08
9042
原创 babel根据env集成icover plugin的一些总结
为提升项目测试效率，最近多个项目接入了项目效率工具icover，在这过程中也踩了一些坑，分享出来供其他有需求的同学参考。接入icover主要做两步工作：1，Modify babel config BABEL_ENV=test模式下使用@58fe/babel-plugin-icover babel插件2，Add build pattern 给icover 设置 BABEL_ENV=test 但是由于各个项目的打包构建，babel使用方式，babel版本大同小异，在接入的过程中我们需要熟系babel的配置使用。
2022-06-15 16:55:04
337
原创 ant design vue a-table实现拖拽排序
最近在把react项目使用vue3进行重构，vue项目组件库使用ant design vue。重构的功能包括：1，M站菜单配置列表的展示2，菜单列表新增3，菜单列表的编辑4，列表的拖拽排序阅读ant design vue文档看到有table拖拽功能，准备直接使用，此处埋下彩蛋一颗。顺利的重构了1,2,3功能之后，照着文档配置好拖拽属性发现不生效，翻阅源码没有找到对应的配置代码，原来拖拽功能属于付费内容，一年4999，ops~（ps:支持知识付费哈~但是我穷）那就只能自己手写功能4了梳理思路如下：1，鼠标移入
2022-06-10 11:23:29
5760
1
原创 vite使用初体验
根据业务需要，带着一下问题尝试切换打包工具从 webpack 到 vite1, vite 集成 babel 了吗？能不能支持 old 浏览器？2，是否支持 build 后的文件不带 hash？3，开发环境 devserver 能不能支持请求代理转发？4，HMR 是否比 webpack 好用？5，适用广度？是否支持 ssr？问题 1Vite 对浏览器的默认支持基线是基于浏览器对 Native ESM 的支持。ESM浏览器支持默认对 IE1
2021-08-30 16:04:29
2678
原创 很多人不知道的chrome实用调试方法
场景1：登录成功之后，前端根据后端的response跳转到不同的业务页面。假设跳转的方法使用的是：window.location.href = '业务页面地址'。然后前端开发小A发现，登录成功之后页面已经跳转走了，想在chrome network中看刚才登录接口的response看不了，被清空了~这时的小A要么加debugger在登录成功的回调里，要么用一个log上报，感觉很麻烦是不，chrome开发工具的跨页面加载请求保存功能这时候就派上用场了勾选preserve log，即使
2021-07-08 15:35:44
353
1
原创 使用缓存记忆加速你的JS代码
缓存记忆是一种能大幅提升你代码速度的通用技术，它先把一个耗时操作的结果缓存起来，当下次再去调用这个耗时操作的时候就不用再浪费时间计算直接给你结果。基于这种定义，我们提炼出几个使用缓存记忆的标准，根据这些标准我们再考虑要不要在代码里加上缓存记忆。1， 缓存应该主要用于加速那些开销巨大，耗时的函数。2，记忆主要针对非首次调用，如果你在相同的条件下反复的调用相同的函数，那么是时候考虑把它记住了。3，因为这个缓存的结果是放在内存里面，如果调用方法的条件变化无常，那么就没必要使用了。下面牛刀小试，
2021-05-13 20:31:41
220
原创 使用React JS, ESLint, Prettier和git precommit hooks管理前端代码
在前端项目开发中, 开发style因人而异, 为了让team的code面对所有开发人员可维护, 可读, 最好的方法是使用linter. Linter 可以统一team代码规范, 检测潜在的bugs, 性能问题等. precommit是git的一个钩子, 它能让你在提交代码之前干点事, 今天就demo一下如何在一个项目里使用这些tools.编辑工具统一为vscode.1, 什么是linter?说白了就是一个帮你分析程序代码, 检测程序中潜在的输入错误工具. 它能帮开发快速的定位错误, 提示如何...
2020-05-13 17:29:58
742
原创 react-native windows10 android 开发环境搭建
最近发生了太多的事，但砖还得继续搬。react-native第一步开发环境搭建，后续会持续更新开发中的坑和提测发版等。官方文档地址：https://facebook.github.io/react-native/docs/getting-started.htmlFacebook建议的Chocolatey就别装了，下载慢且失败率高。（如果你买了vpn另说）安装node，python，...
2019-10-10 16:16:16
163
原创 git 命令行push遇到的问题
本地git写了东西很久没提交，再次查看git状态想提交的时候遇到这个问题$ git push origin masterfatal: 'origin' does not appear to be a git repositoryfatal: Could not read from remote repository.解决：先 $ git remote remove origi...
2019-09-29 20:27:11
286
原创 VUE双向数据绑定原理
VUE借助Object.defineproperty()劫持对象的set个get方法实现了数据的双向绑定。看看这个简单的demo：var keyValue = 1;var observeObj = {};// param1:劫持的对象； param2:需要劫持的key值； param3：对象属性描述配置；Object.defineproperty(observeObj,'k...
2019-06-04 16:08:37
142
原创 lodash API 和 es6 API相似用法总结
import _ from 'lodash';let a={'aa':'bb'}es6 Object.values(a) 等价于 _.values(a) 返回['bb'] IE不支持es6此APIes6 arry.includes(value) 等价于 _.includes(arry,value) 判断value是否在arry中 IE不支持es6此API...
2019-01-25 16:59:31
269
原创 sublime text3 快捷注释不能使用解决办法
安装keymap插件，查看快捷键占用Tools->keymaps->find a keymap for输入toggle，查到ctrl+/所在，鼠标点选，则该快捷键可以正常使用
2018-10-17 16:31:46
5089
3
原创 redux other middleware redux-saga guideline
___actions this store our actions and action creators___reducers define our user reducer (state) type and create an initial state for it___selectors cache the state for us and we’ll recalcu...
2018-10-12 17:03:31
108
转载 前端面试
基础知识prototype和proto的关系是什么 meta viewport原理 域名收敛是什么 float和display：inline-block；的区别 前端优化策略列举 首屏、白屏时间如何计算 闭包 作用域链 ajax如何实现、readyState五中状态的含义 jsonp如何实现 怎么处理跨域 restful的method解释 get和post的区别 事件...
2018-08-17 17:01:39
252
原创 node watch监听目录文件变化执行相关操作
#!/usr/bin/env nodevar shell = require("shelljs"); //执行shellvar watch = require('watch'); //监测目录变化watch.watchTree('./scripts', function (f, curr, prev) { shell.exec("node ./r.js -o ....
2018-08-08 17:19:52
4951
原创 使用node完成文件自动拷贝
适用于项目中某些文件需要手动拷贝重命名场景;新建copy.js内容如下;node执行,缺少module就安装相关module;执行完成xxx1.js复制到xxx2目录重命名为xxx2.js;var fs = require("fs");//动态路径设置var path = require('path');var dynamic_path = path.resolve(__d...
2018-08-08 17:16:33
1381
转载 vue webpack打包优化
如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。 下面是我整理的一些优化技巧，可以有效地提高打包速度。 一、配置 resolve.modules1，优化原理（1）webpack 的 resolve.modules 是用来配置模块库（即 nod...
2018-08-08 16:54:22
9141
2
转载 首屏，白屏时间如何计算？？
首屏，白屏时间如何计算？？做移动web页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。怎么获取首屏时间呢？我们经常要先问自己：页面是怎么加载数据？A：加载完静态资源后通过ajax请求去后台获取数据，数据回来后渲染内容 在每个点打上一个时间...
2018-07-17 21:22:29
1803
原创 页面线性滚动
jqery 实现 $('#comt').click(function(){ $('html,body').animate({scrollTop:$('#comments').offset().top}, 800); });js实现$('#show_btn').on('click',function(){ let con_hei=document.getElementsBy...
2018-07-17 13:57:46
354
转载 css之display:inline-block与float区别
css之display:inline-block与float区别HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如 <div> ...
2018-07-16 16:44:21
541
转载 js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度
js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度常用:JS 获取浏览器窗口大小 12345678910111213141516// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth =...
2018-07-16 10:42:02
6301
1
原创 vue子组件监听父组件传值
vue父组件传值,在父组件修改值,通知到子组件,其实就是观察订阅者模式vue的实现采用了watch方法具体的写法如下:父组件<template> <load-list :param="param" cate="hide"></load-list></template>param是data函数里面的一个对象,子组件需要使用监听对象的watch写法...
2018-07-13 18:08:29
29523
1
原创 快应用开发
最近在做一个快应用的项目,做了一周上线了.现在把git地址贴出来供大家参考.https://github.com/xuesongde/quick_app喜欢的star一下
2018-05-21 14:50:55
427
原创 es6观察者模式实现
//es6实现 借助set实现function obfunction(oldval,newval){console.log(oldval+'变成了'+newval);}class targetObser{constructor(age,name){this.age=age;this.name=name;}set name(val){console.log(nam...
2018-04-17 15:13:32
804
原创 利用express中间件http-proxy-middleware代理前端跨域请求(包含get和post)
1,创建app.jsvar express = require('express');var path = require('path');var favicon = require('serve-favicon');var logger = require('morgan');var cookieParser = require('cookie-parser');var body...
2018-03-22 13:38:03
3843
转载 git常用命令
一、 Git 常用命令速查git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释 git remote add origin [email protected]:ndshowgit push origin m...
2018-03-21 17:21:10
170
原创 express 搭建简单前端开发环境
1,用express做静态资源服务器2,用http-proxy-middleware实现请求转发,解决开发中前端接口跨域的问题实现步骤:1,新建app.js内容如下:var express = require('express');var proxy = require("http-proxy-middleware");var cors = require('cors')var proxyPath...
2018-03-19 17:21:08
1045
原创 丢失的记忆
let arry=['asd','ggggg',undefined,undefined,null,null]let set=new Set(arry)let uniqueArry=[...set] //去重后的数组155@2105*8822 PPcaihong @804456329*
2018-03-06 11:41:38
153
原创 js构建动态对象数组
//定义对象value值数组,obj数组var value_arry=["aaa","bbb"],obj_arry=[];for(var i=0;ivar obj={"key1":"值1","key2":"值二"};obj["key3"]=arry[i];obj_arry.push(obj);}console.log(obj_arry);输出结果:[
2015-09-23 14:17:16
4418
转载 HTML-embed标签详解
HTML-embed标签详解Embed（一）、基本语法：embed src=url说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等， Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。示例：（二）、属性设置：1、自动播放：语法：autostart=true
2015-08-25 09:31:35
373
转载 JS操作cookie
什么是 Cookie “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。 从JavaScript的角度看，cookie 就是一些字符串信息。这些
2015-08-19 09:12:30
386
jquery.mobile-1.4.3 popup控件弹出位置如何控制?用过的请进
2014-08-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人