搜索到
14
篇与
前端技术
的结果
-
-
在线直播技术及其实时视频流可视化方法（前端） 【现已公开】记录在线直播技术及其实时视频流可视化方法（前端）。 前面写的在三维模型上贴视频的算法要真正应用了，视频使用的是萤石直播的在线视频流，中间遇到了一些问题记录下。 在线直播技术 直播中常用到的流媒体协议有 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日公开全文。
-
-
-
-
-
-
-
-
-
-
-
-
