在线直播技术及其实时视频流可视化方法（前端） 【现已公开】记录在线直播技术及其实时视频流可视化方法（前端）。 前面写的在三维模型上贴视频的算法要真正应用了，视频使用的是萤石直播的在线视频流，中间遇到了一些问题记录下。 在线直播技术 直播中常用到的流媒体协议有 rtmp、http、hls、rtsp 。 根据其数据分段可分为两类，以 rtmp 为代表的连续流协议，以 hls 为代表的切片文件协议。 这里贴一些直播的真实地址： 哔哩哔哩 https://720759109.cloudvdn.com/live-qn/553668/live_50329118_9516950.flv 斗鱼直播 https://txy.live-play.acgvideo.com/live-txy/124776/live_352577_9496178.flv 萤石直播（移动端）http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8 为了防盗链，这些地址是会变化的，不过我们可以看到 flv 后缀，也就是连续流的协议比较多。 具体详细区别可以查阅参考资料。 可视化技术 实时视频流因为协议的原因，和直接播放视频又有点不太一样。 1、针对 HTML5 视频播放，可选 <video></video> 标签直接播放。 这里推荐使用一款优秀的开源库 Video.js - open source HTML5 & Flash video player http://www.videojs.com 使用和原生基本没有区别，仓库地址：https://github.com/videojs/video.js 对于直播播放的需求，可以使用插件 HLS library for video.js http://videojs.github.io/videojs-contrib-hls/ 示例代码 <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls> <source src="https://example.com/index.m3u8" type="application/x-mpegURL"> </video> <script src="video.js"></script> <script src="videojs-contrib-hls.min.js"></script> <script> var player = videojs('example-video'); player.play(); </script> 因为在项目里面需要使用 video 标签，这款开源库对代码侵入性有点高，所以没有使用。 2、Bilibili 开源库 flvjs 播放器 前面提到目前使用连续流协议的直播比较多，其实也是因为其有延时低的优势。 这时我们可以采用另外一款优秀的开源库 HTML5 FLV Player https://github.com/Bilibili/flv.js 示例代码： <script src="flv.min.js"></script> <video id="videoElement"></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://example.com/flv/video.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> 这个代码侵入性就很低了，播放在线或者直播视频很方便。 遗憾的是只支持 flv 或者 mp4 格式，不过很有前瞻性。 3、直播流专用播放器 hlsjs 介绍 前面链接可以看到，实际项目中使用的 hls 流媒体协议。 我们可以使用另外一款播放器 JavaScript HLS client using Media Source Extension http://video-dev.github.io/hls.js/demo 仓库地址：https://github.com/video-dev/hls.js 同样代码进入性很低，最终使用的是这个。 示例代码： <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <!-- Or if you want a more recent canary version --> <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> --> <video id="video"></video> <script> var video = document.getElementById('video'); if(Hls.isSupported()) { var hls = new Hls(); hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); }else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'; video.addEventListener('loadedmetadata',function() { video.play(); }); } </script> 这里在七牛云搭建了自己的 hls 协议直播流做测试。 七牛云：http://streams.wshunli.com/x36xhzz/x36xhzz.m3u8 源地址：https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8 国内迁移：https://coding.net/u/wshunli/p/streams/git/raw/master/x36xhzz/x36xhzz.m3u8 一些电视直播的视频流： http://ivi.bupt.edu.cn/hls/cctv1.m3u8 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8 一些问题 在实际使用过程中，视频是可以播放了，但是服务器不支持跨域访问 CROS ，这里使用 CDN 解决。 原直播地址：http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294 在又拍云或者七牛云做 CDN 后 又拍云：http://live.wshunli.com/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294 七牛云: http://hzhls07.live.wshunli.com/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294 将 hzhls07.ys7.com:7891 替换为 live.wshunli.com / hzhls07.live.wshunli.com 即可。【已停止解析】 http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294 http://hzhls01.ys7.com:7886/hcnp/472637161_1_1_1_0_cas.ys7.com_6500.m3u8?e75321b700354bba8eefb328e0f69e52 http://hzhls01.ys7.com:7890/hcnp/598370947_1_1_1_0_cas.ys7.com_6500.m3u8?f896989dd82a463a9c949aa2454ae2dd 这里可能要根据源地址/端口调整，估计会有很多子域名需要做 CDN ，这有点类似于反向代理技术啊。 参考资料 1、直播技术——流媒体协议 - CSDN博客 https://blog.csdn.net/qq_34447388/article/details/78995511 2、RTMP HLS HTTP 直播协议一次看个够 - 简书 https://www.jianshu.com/p/4c89b2c83e59 3、[原创]直播服务器简单实现 http_flv和hls 内网直播桌面 - lucpp - 博客园 https://www.cnblogs.com/luconsole/p/6079534.html 2019年06月23日公开全文。

详解 Android View 体系（一）Android View 体系基础 有很多人觉得自己比较菜，就会称自己为 Android UI 工程师，非常有意思。 其实 Android UI 体系内容也是比较多的，不仅仅是指 UI 控件的使用，那也太基础了。

那些年，我们用过的地图下载器 作为地信、遥感等专业的同学，下载线划图、遥感影像应该都接触过，以前很多群发广告都看不惯，借这次下载高程数据的机会，总结下地图下载器，收费部分的搜索下就懂了。。

详解 Android IPC 机制（八）使用 Socket 实现进程间通信 Socket 也称为 “嵌套字”，是计算机网络中的概念，分为流式嵌套字（TCP）和用户数据报嵌套字（UDP）。

详解 Android IPC 机制（七）使用 ContentProvider 实现进程间通信 ContentProvider 是 Andorid 中专门用于不同应用间进行数据共享的方式，底层实现也是 Binder 。

详解 Android IPC 机制（六）使用 AIDL 实现进程间通信 AIDL（Android Interface Definition Language ，Android 接口定义语言），定义客户端与服务使用进程间通信 (IPC) 进行相互通信时都认可的编程接口。

详解 Android IPC 机制（五）使用 Messenger 实现进程间通信 通过 Messenger 可以在不同进程之间传递 Message 对象，是一种轻量级的 IPC 方案。

详解 Android IPC 机制（四）使用文件共享实现进程间通信 使用文件共享也是不错的进程间通信方式，两个进程通过读/写同一个文件来交换数据。

详解 Android IPC 机制（三）使用 Bundle 实现进程间通信 在 Android 四大组件中 Activity、Service、Receiver 都支持在 Intent 中附加传递 Bundle 数据。

详解 Android IPC 机制（二）Android 中的多进程模式 在 Android 中多进程指单个应用存在多个进程的情况。

详解 Android IPC 机制（一）Android IPC 简介 IPC（Inter-Process Communication，进程间通信）指两进程间进行数据交换的过程。

《第一行代码》读书笔记（八） 《第一行代码》读书笔记 -- 网络编程

《第一行代码》读书笔记（七） 《第一行代码》读书笔记 -- 多媒体资源

《第一行代码》读书笔记（六） 《第一行代码》读书笔记 -- 数据存储方案

《第一行代码》读书笔记（五） 《第一行代码》读书笔记 -- 应用组件之 ContentProvider