js进阶六：JSON，离线存储，WebSocket，画布，音频/视频

Posted 2023-05-17

参考技术A

sessionStorage 数据创建到浏览器页签关闭
localStorage 数据创建到用户手动清除，或者使用clear(), removeItem(key)删除

sessionStorage 条件：同一个浏览器页签
localStorage 条件：相同域名（协议，域名，端口）的不同网址

频繁操作且安全性不高的数据

增加一条数据

根据key值获取一条数据

根据指定的key删除一条数据

清除所有数据

获取指定索引位的key值

数据项个数

宽高不要写单位，宽高不要在css中设置

默认从左到右，从上到下绘制，宽高为负值的时候往返方向绘制

设置填充颜色（可设置渐变色）

合法的颜色值，rgba（255,255,255，.5）

设置描边颜色（可设置渐变色）

填充矩形

设置画笔宽度

描边矩形

开始绘制新的路径，相当于抬起画笔

把路径移动到画布中的指定点，不创建线条

添加一个新点，然后在画布中创建从该点到最后指定点的线条

设置或返回线条末端线帽的样式

设置或返回两条线相交时，所创建的拐角类型

创建从当前点回到起始点的路径，创建线条

绘制已定义的路径

清除指定区域内的像素

创建弧/曲线（用于创建圆形或部分圆）

绘制两条切线之间的弧线

设置或返回文本内容的当前字体属性

设置或返回文本内容的当前对齐方式，水平对齐方式

可选值： center，start ，end，left，right

设置或返回在绘制文本时使用的当前文本基线

可选值： alphabetic ，top ，hanging ，middle ， ideographic ，bottom

在画布上绘制文本

创建线性渐变（用在画布内容上）

创建放射状/环形的渐变（用在画布内容上）

设置或返回用于阴影的颜色

设置或返回用于阴影的模糊级别
paint.shadowBlur = 100;

设置阴影偏移

向画布上绘制图像、画布或视频

转换有叠加效果，如果之前有转换，会在之前转换的基础上再次转换

缩放当前绘图

旋转当前绘图

重新映射画布上的 (0,0) 位置

可选值：

设置或返回绘图的当前 alpha 或透明值

保存之前paint设置的样式

重新回到之前保存的样式

建立连接成功

接收服务器信息， even.data 包含返回的信息

发生错误

关闭通信

当音频元数据加载完毕时触发。

播放过程中实时触发

声音改变时触发

在网页上用websocket播放RTSP实时流 性能优化 进阶方案

参考技术A 最近发现有的网站上，显示的视频流很丝滑，而且在多路情况下不会出现页面卡死。 总结了一下所使用的技术。

后端推消息，把数据转为json字符串，通过websocket推给前端, 图片使用base64编码


"channel": "camera_1",
"url": "data:image/png;base64,iV"


前端接收到数据后，解码，使用img 标签展示 图片base64

客户端的传输方式改为 ArrayBuffer方式。将channel、图片文件流等信息拼接为二进制数据。 通过websocket推送给前端
举例：
channel频道: camera_1 占两个字节；
图片: file文件流 占128字节
字节顺序 Little-endian

前端读取为ArrayBuffer, 通过视图操作，取出图片的二进制流，生成Blob对象
读取blob对象， 返回 URL格式的字符串（base64编码）以表示所读取文件的内容
前端img 标签 src 赋值为 base64 字符串，显示视频流图片。