fengyenobug

@hellomimi 没有用啊，https://codesandbox.io/p/devbox/86y6dp

@foolishcrab https://codesandbox.io/p/devbox/86y6dp

@fengyenobug 但有同事给我的接口千奇百怪，年级名当 key ，内容当 value ，写了三年前端只有这个后端给的列表接口是这样的，前端能处理，但每次都得处理而且麻烦。
现在我小组的这个后端，写接口之前会先来问我需要什么样的数据结构，最幸福的一次。

看情况，凡事都有个度。
1. 比如 true false 后端给 01 的，如果只是一个简单的结构，前端处理，如果你这个 01 在很深的一个 json 里面，而前端又要直接用 true false ，他就需要先 map 整个庞大的 json 数据，前端肯定觉得不合适，让后端处理。
2. 我看评论区很多全栈说，这是前端偷懒，后端写一个接口不用动，前端页面改了还是可以重新处理再复用这个接口，但是实际业务极少这样，或者就是新老版本同时存在，一般使用不同的接口。
3. 还有的后端，前端渲染列表每行数据只需要三五个字段，结果一个对象返回二三十个字段让我在里面找，不说别的，20kb 能传输完的数据，有必要传输 200k 吗，用户量大的时候服务器为什么要多这么多无用的流量，查个库查个表就直接扔给前端了，数据都不怎么处理的那肯定不行，如果前端再需要处理一下，就要遍历你这个庞大的数据。
4. 还有一些是给的数据前端确实不好用，不是说组件的问题，而是前端需要处理好几遍接口返回的数据，最后这段代码就成了只有自己看得懂的，而实际上他就是个普通的数据处理，但是如果有改动需求，就需要再次理解这些代码，如果换个人改那就更影响效率，这是亲身体验。如果前端处理少一些逻辑就会清晰很多，有改动的话也好改，如果真的需要后端改接口的地步那就是业务逻辑大改了，还想复用接口那肯定是后端偷懒，实际上业务稳定的话很少改，除非升级版本（升级版本刚开始也是新旧并存的，老的也要继续，新的接口还是得写，我们公司的逻辑是接口一旦上生产，只会新增不能修改，因为你不知道哪里在调，有的客户有可能还在用之前的老旧版本，已经上线的接口是不能动的，只能新加一个）
5. 当然了，如果前端只等着饭喂到嘴里那肯定是不可能的，简单的数据确实需要前端处理，但后端本职工作就是为了处理数据的，前端更注重与页面逻辑和用户交互，必须要有明确的界限，如果很多复杂数据的处理都让前端做了，那后端的意义在哪呢，回到题主的问题那就是要有个度，没有具体情况不做具体评判
6. 纯渲染的前端处理数据没什么，但有些业务，前端也需要根据不同的状态做很复杂的判断来渲染页面，这个时候数据结构肯定复杂一些，再让前端处理数据那就说不过去了
7. 说说我自己遇到的，一年级到六年级，每个年级有几个班，
一般是 data = [
{
grade: '一年级'，
class: [{classNum:'01',....},{classNum: '02',....}]
}
{
}
]

@tcper 而且某个摄像头掉线的话，我们需要显示掉线的图填补当前摄像头的黑屏状态，卡顿加载也要展示加载中的图，合流达不到 leader 的需求

@tcper 合流的话，样式就定死了，每一个摄像头的状态和文字是可能会变化的，样式间隔会根据客户端稍许变化，合流做不到这些，只能把 18 个视频合到一起成一个视频。目前有 64 个摄像头在线，不需要 obs 虚拟推流的，解决方案确实找了很多，之前也使用过服务端分段截取转成 MP4 和同 iframe 套官方 sdk 实现过效果都不怎么好

@mxT52CRuqR6o5 安装 vlc 和 vlc 插件的也已经尝试过了，网上说的只有老版 IE 支持，我试了一下老版 ie 也显示不出来

@PopRain 确实有 demo ，我们需要一页放 18 个，插件版不支持我们的 ui （插件的本质是一个 exe 文件悬浮在浏览器上面，我们需要在视频上定位文字），无插件版需要先登录并实例化，18 个实例和登录没法完成（ 18 个实例内存太高，其次海康不允许同设备登录同一服务器，iframe 也试过，性能很不好且有很多问题，不稳定也很卡），目前是使用摄像头的 rtsp 直接播放，但是浏览器不支持直接播放，github 和 gitee 上面找的使用 FFmpeg 转码，使用 jsmpeg 或者 flv.js 播放的也都没成功

@zhtyytg 好的，我看一下，感谢！