- 博客(33)
- 收藏
- 关注
原创 MQTT.js 简述
MQTT是一种轻量级的消息传输协议,常用于物联网(IoT)设备间的通信。mqtt.js是一个 JavaScript 库,支持在 Node.js 和浏览器中使用,用于通过 MQTT 协议与 MQTT Broker 进行通信。
2024-09-05 20:39:23
2333
原创 WebRTC 代码实现详述
WebRTC (Web Real-Time Communication) 是一种支持浏览器进行实时媒体通信的技术,允许音视频通话和数据共享,而不需要安装额外的插件。为了使 WebRTC 进行 P2P(点对点)通信,必须通过信令服务来交换SDP(Session Description Protocol)和 ICE(Interactive Connectivity Establishment)候选者信息。接下来介绍如何使用 HTTP 来交换 WebRTC 信令。
2024-09-05 17:56:33
1613
原创 WebRTC 基础
WebRTC 为实时通信提供了强大的功能,能够在不依赖中介服务器的情况下,建立跨平台的 P2P 连接。本文介绍了WebRTC 基本概念和相关流程,下文将主要介绍 WebRTC 创建端与接收端的代码实现。参考来源一文详解 WebRTC 基础。
2024-09-05 16:14:51
1815
原创 RTCPeerConnection API 详细介绍(含RTCDataChannel)
数据通道创建:通过方法在主动端创建数据通道,接收端通过事件监听数据通道。消息发送:通过方法发送数据,支持多种数据类型,包括字符串、二进制数据等。事件处理:数据通道有多个事件可以处理,包括onopenonmessageonclose和onerror,用于跟踪数据通道状态及错误。关闭数据通道:使用方法关闭数据通道,释放资源。
2024-09-05 15:34:54
2574
原创 MediaStream 的媒体流对象 (stream) 和流媒体轨道 (track) 详解
代表中的音频或视频轨道。每个轨道独立于其他轨道,可以单独控制、启用、禁用、或通过clone()方法复制。通常,轨道通过调用返回的对象获取。例如,一个可以包含一条音频轨道和一条视频轨道。
2024-09-05 11:59:22
1557
原创 网页元素拖拽事件的使用方法
拖拽功能在现代网页应用中非常常见,例如在文件上传、拖拽排序、拖拽放置元素等场景中都会用到。本文将详细介绍如何使用 HTML5 的拖拽事件来实现网页元素的拖拽,包括draggable属性、dragenter事件、对象的使用,以及在 Vue 框架中的实现方法。通过设置draggable属性并使用一系列拖拽事件,我们可以轻松实现网页元素的拖拽功能。在处理drop事件时,务必要取消dragover事件的默认行为,以确保drop事件能够正常触发。对象提供了一种便捷的方式来在拖拽操作中传递和接收数据。
2024-08-20 15:15:10
1232
原创 网页事件简述
事件是用户或浏览器执行的特定交互操作,如点击按钮、滚动页面、按下键盘等。事件在浏览器窗口中被触发,通常与窗口中的某个特定部分(如元素或HTML代码)相关联。事件监听器用于监听这些事件。当事件发生时,浏览器会触发与之关联的事件处理器。这些事件处理器包含一段代码,旨在响应和处理所发生的事件。我们通常使用方法或将事件监听器直接赋值给接口的属性来监听事件。注册事件处理器即定义响应事件的代码块,事件监听器监听事件发生并触发处理器来响应事件。
2024-08-20 14:44:00
793
原创 网页中宽度、高度及各种长度详解
在网页开发中,DOM 元素的尺寸不仅包括宽度和高度,还包括各种与元素位置、偏移和滚动相关的长度属性。本文将详细介绍 DOM 中与宽度、高度及各种长度相关的属性和方法,并介绍如何在网页布局中有效使用这些属性。
2024-08-20 10:41:40
1115
原创 避免 el-input 密码自动填充的实用方法
在开发 Web 应用时,通常需要避免浏览器自动填充密码。以下是一些可行的解决方案,特别针对使用 Element UI 框架的el-input组件。
2024-08-14 18:05:17
1712
原创 解决 Vuex Store 数据在页面刷新后丢失的方法
Vuex Persistedstate 是一个强大且易于使用的插件,能够帮助我们在 Vue.js 应用中持久化 Vuex store 的状态。通过灵活的配置项,你可以根据需求定制状态的持久化方式,满足不同的业务场景。通过以上方法,我们可以有效地解决 Vuex store 数据在页面刷新后丢失的问题。根据不同的需求和场景,选择合适的持久化方案。如果需要快速简便的解决方案,可以使用插件;如果需要更大的存储空间和更复杂的数据结构,是一个不错的选择。
2024-08-14 17:40:00
1635
原创 flv.js 使用说明
flv.js是一个基于 HTML5 Video 标签和 Media Source Extensions(MSE)实现的纯 JavaScript FLV 视频播放库。它允许用户在浏览器中直接播放 FLV 格式的视频,而不需要安装额外的插件。该库的目标是提供一个轻量、易用且功能强大的解决方案来处理 FLV 视频。flv.js的核心原理是利用 MSE API 将 FLV 流分段加载并传递给 Video 标签。
2024-08-13 14:45:04
3028
1
原创 WebSocket 使用说明
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间能够更高效地交换数据,适合实时数据更新的场景,例如在线聊天、实时数据推送等。虽然 WebSocket 的配置项相对较少,但了解其基本配置和扩展项非常重要。
2024-08-12 18:13:42
2026
原创 Axios 详解与使用指南
Axios 是一个基于Promise的 HTTP 客户端,能够在浏览器和 Node.js 环境中运行。它提供了一种简便的方式来执行 HTTP 请求,并支持多种请求方法,如GETPOSTPUTDELETE等。Axios 的配置灵活,支持请求和响应拦截器、取消请求、并发请求处理等功能,使其成为现代 Web 开发中非常流行的选择。
2024-08-12 17:01:01
3831
原创 jQuery $.ajax() 方法详解
是 jQuery 提供的一个方法,用于执行异步 HTTP(Ajax)请求。它是 jQuery 最强大的方法之一,允许你通过配置选项来执行各种类型的请求,并处理响应数据。
2024-08-09 17:26:52
3317
原创 AJAX详述
AJAX(Asynchronous JavaScript and XML)是一种用于向服务器异步发送 HTTP 请求并接收响应的技术。基于 XMLHttpRequest 对象 (异步的与服务器交换数据)、XML (作为转换数据的格式)等。(就是基于已有技术实现客户端向服务端后台能够异步发送http/https请求并接收来自服务端的回应)XML是一种文本传输形式,现在基本都是用JSONHTTP与HTTPS的区别,详细介绍下面 用 xhr 来表示 XMLHttpRequest 实例。
2024-08-08 15:45:28
585
原创 mqttws31.js 库文件使用与说明(基于 websocket 的前后端消息发布订阅)
除了http(向服务器发送请求接收数据)websocket(与服务器建立双向通信的通道),这里提供了一种基于 websocket 、发布订阅模式的双工通信方式。发布订阅:这是一种通信的模式,最常见的实践是基于MQTT。简单来说就A向B订阅一个主题(topic),订阅之后 A 可以收到 B 关于这个主题的消息推送;同时 A 也可以在这个主题向 B 发送消息(发布过程),从而完成双向的通信。本文中的 A 就是浏览器,B 就是目标服务器。
2024-07-11 17:46:11
953
原创 前端文件下载方式总结
网上关于前端实现文件下载的文章已经有很多了,而且有的写的十分详细专业。之前一直不愿意做此类记录,一来是觉得这方面的文章太多太详细了,没有写的必要;二来是想着自己写的还不一定有别人写的好。但随着日常开发中用到的文件下载功能用的越多,各种下载方式都有使用过,觉得需要记录一下,以方便使用。
2024-06-19 10:00:40
4553
2
原创 WebRTC播放组件之 srs.sdk.js 使用与详述
webrtc流媒体的播放,本质上也是基于建立端到端的RTC连接、接收推送过来的视频流数据的过程。webrtc流地址本质上就具有很强的规则性,其中包含信令服务器地址、基本参数等。SRS(Simple Real-Time Media Server)是一个强大的开源的流媒体服务器, webrtcs视频流的播放本身就是一个订阅(播放)的过程,因此 SRS 源码中自然包含播放的代码,即srs.sdk.jssrs.sdk.js是基于 SRS 实时视频服务器、对浏览器支持的WebRTC基础功能的封装。
2024-06-17 18:26:11
2425
2
原创 WebRTC播放组件之 jswebrtc 使用与详述
gitHub 地址gitee地址(gitHub地址一般访问不上,这里找到一个可用的 gitee 地址)(推荐使用)WebRTC(Web Real-Time Communications) 是 RTC 的一部分,是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流/音频流或者其他任意数据的传输。JSWebrtc 是基于 SRS 实时视频服务器、对浏览器支持的WebRTC基础功能的封装。
2024-06-14 15:55:52
5770
8
原创 HTML5 媒体播放器 video、audio 自定义播放器进度条(下)
let duration = '' // 用于显示的总时长,格式 xx:xxlet currentTime = '' // 用于显示的当前播放的时刻let max = '' // 总时长let value = '' // 当前时刻HTML5 <video>常用属性、时间、方法及基础使用说明。
2024-06-13 19:47:20
1004
2
原创 HTML5 媒体播放器 video、audio 自定义播放器进度条(上)
当使用到 HTML5 媒体播放器(>),往往有许多自定义的需求,其中。
2024-06-13 18:23:52
1650
原创 HTML5 <video>常用属性、时间、方法及基础使用说明
标签也可用于播放音频,但播放音频用更加适合。MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件基础写法
2024-06-12 15:33:32
3672
原创 Vue2 使用天地图响应式信息窗口的一种实现方式
在弹框组件里面,采用vue组件的形式,使弹框里面的功能实现分离,大大提高了拓展性,由于组件的响应式特征,我们对于弹框内容的自定义性也更好把握,最主要的是,代码写起来方便了。若需要在弹框中实现较为复杂的展示或交互的时候,需要通过。这里的项目框架是 vue2 + vue-cli3,为了使效果更加突出,这里在弹框中引入了 ECharts。在项目开发中,我们可以借助项目框架自带的响应式组件处理。代码尽可能体现的实现思路,具体业务可在此基础上拓展。主要实现代码(直接在 app 组件里面写了)
2023-12-22 18:47:36
1510
4
原创 fabric -- 画布实现一简单图片上传背景,拖拽点位demo
vue2的项目结构,直接将 App.vue 文件替换即可运行。以下是完整代码,其中 icon 是阿里图标库切下来的图标。
2023-08-06 23:18:53
457
原创 Vue 实现一简单响应式状态管理Store
arr:[],count:0// 添加// 删除// count++// 将 store 挂到 Vue原型new Vue({这里通过类实例化一个 store 对象,在其实例上声明state(注意是对象), addItem、delItem为对象上用来操作 arr数组 的增加与删除方法,increate 为给 count 递增的函数。通过Vue.use()将 store 对象挂在Vue的原型上,这样就可以实现该对象的全局访问(组件vc通过原型链获取 $verySimpleStore 属性)
2023-05-27 16:22:21
677
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人