{"id":15033626,"url":"https://github.com/tinywan/h5-dash-hls-rtmp-webrtc","last_synced_at":"2025-05-15T20:04:31.637Z","repository":{"id":37211464,"uuid":"86879006","full_name":"Tinywan/H5-dash-hls-rtmp-webrtc","owner":"Tinywan","description":":sunflower: 传统直播：HTML5播放器、M3U8直播/点播、RTMP直播、低延迟、推流/播流地址鉴权。:green_apple: 实时直播：WebRTC","archived":false,"fork":false,"pushed_at":"2020-01-04T03:04:01.000Z","size":5191,"stargazers_count":2142,"open_issues_count":0,"forks_count":492,"subscribers_count":119,"default_branch":"master","last_synced_at":"2025-05-15T02:56:26.777Z","etag":null,"topics":["dash","hls","html5","html5-video","m3u8","mediaelement","player","rtmp","videojs","webrtc"],"latest_commit_sha":null,"homepage":"http://github.tinywan.com/html5-dash-hls-rtmp/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tinywan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-01T03:05:10.000Z","updated_at":"2025-05-15T01:49:26.000Z","dependencies_parsed_at":"2022-09-03T19:11:09.090Z","dependency_job_id":null,"html_url":"https://github.com/Tinywan/H5-dash-hls-rtmp-webrtc","commit_stats":null,"previous_names":["tinywan/html5-dash-hls-rtmp"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinywan%2FH5-dash-hls-rtmp-webrtc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinywan%2FH5-dash-hls-rtmp-webrtc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinywan%2FH5-dash-hls-rtmp-webrtc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tinywan%2FH5-dash-hls-rtmp-webrtc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tinywan","download_url":"https://codeload.github.com/Tinywan/H5-dash-hls-rtmp-webrtc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dash","hls","html5","html5-video","m3u8","mediaelement","player","rtmp","videojs","webrtc"],"created_at":"2024-09-24T20:22:01.578Z","updated_at":"2025-05-15T20:04:24.337Z","avatar_url":"https://github.com/Tinywan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##  :bouquet: 多媒体架构设计  \n![多媒体架构设计](/Images/video-system.png)  \n###### :bird: 支持的直播流输入协议  \n* RTMP 用于拉取和发布的流  \n* RTSP 为拉和宣布的流  \n* 用于HTTP和UDP流的 MPEG-TS  \n* SRT 用于听，拉和集合模式  \n* UDT 用于听，拉和集合模式  \n* HLS 为拉流  \n###### :baby_chick: 单路路实时编码流传递（RTMP）  \n![单路路实时编码流传递](/Images/live_streaming_big.png)\n###### :penguin: 多路实时编码流传递（RTMP）  \n![多路实时编码流传递](/Images/rtmp-republishing_big.png)  \n\n######  :chicken: HLS、MPEG-DASH多路输入/输出流   \n![Markdown](/Images/rtmp-republishing-hls-dash_big.png)  \n\n######  :hatched_chick: 通过SSL加密和公开HLS媒体的来源（HLS）  \n![Markdown](/Images/http_restreaming_big.png)  \n\n##  :hibiscus: 点播设计  \n![Markdown](/Images/vod-system.png)   \n\n## :four_leaf_clover: 更新列表  \n* :eight: 2018年11月17日 星期五  \n  * [编解码器之战：AV1、HEVC、VP9和VVC](https://mp.weixin.qq.com/s/HNDRciEZ-ldtrumbR68BmA)  \n  * [FFmpeg在Intel GPU上的硬件加速与优化](https://mp.weixin.qq.com/s/VMbV_gf-IU5m3iUI6HyBMA)  \n  * [下一代低延时直播CDN：HLS、RTMP 与UDP +WebRTC](https://mp.weixin.qq.com/s/uAVDVkKbV2cGE_gLcLx4WA)  \n* :seven: 2018年9月13日 星期四  \n  * [RTMP直播应用与延时分析](https://blog.csdn.net/u014162133/article/details/82256033)  \n  * [基于RTMP数据传输协议的实时流媒体技术研究](https://cloud.tencent.com/developer/article/1199947)  \n  * [RTSP协议转换RTMP直播协议](https://www.jianshu.com/p/791963287067)  \n* :six: 2018年8月31日 星期五   \n  * [自定义音频播放器的实现](https://hehuiyun.github.io/2018/07/27/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A8%E7%9A%84%E5%AE%9E%E7%8E%B0/#more)  \n  * [HLS-iOS视频播放服务架构深入探究（二）](https://yangchao0033.github.io/blog/2016/02/14/hls-2/)\n  * [HLS-iOS视频播放服务架构深入探究（一）](https://yangchao0033.github.io/blog/2016/01/29/hls-1/)  \n  * [HTTP Live Streaming (HLS) - 概念](https://www.jianshu.com/p/2ce402a485ca) \n* :five: 2018年3月22日 星期五 \n  * [视频插件 video.js的用法](http://www.jq22.com/jquery-info404)  \n  * [视频直播常见问题与解决办法汇总](https://yq.aliyun.com/articles/511196)  \n  * [在Ubuntu 14.04上安装Nginx-RTMP](https://www.vultr.com/docs/setup-nginx-rtmp-on-ubuntu-14-04)  \n* :four: 2018年1月16日 星期二 [音视频解决方案 NGINX-RTMP-TS-DASH](https://github.com/Tinywan/NGINX-RTMP-TS-DASH)  \n* :three: 2017年04月18日 星期二 [解决VideoJs阿里云直播和点播跨域问题](http://www.cnblogs.com/tinywan/p/6234463.html)\n* :two: 2017年06月06日 星期二 开源的播放器  \n  * :computer: [Aliplayer 播放器](https://player.alicdn.com/aliplayer/index.html)\n  * :computer: [Video-dev-Hls 播放器 ](https://github.com/video-dev/hls.js)  \n  * :computer: [ Sewise-Player 播放器](https://github.com/jackzhang1204/sewise-player)  \n  * :computer: [clappr 播放器](https://github.com/clappr/clappr)   \n    *  支持格式：`hls, dash, ogg, webm, mp4, rtmp either live or video on demand`   \n    *  :computer:  [在线预览](http://github.tinywan.com/html5-dash-hls-rtmp/clappr/index1.html)  \n  * [mediaelement player 播放器](https://github.com/mediaelement/mediaelement)  \n    * 支持格式：`支持MP4，WebM和MP3以及HLS，Dash，YouTube，Facebook，SoundCloud和其他HTML5 MediaElement API的HTML5 \u003caudio\u003e或\u003cvideo\u003e播放器，可在所有浏览器中实现一致的UI`  \n    * :computer:  [在线预览](http://github.tinywan.com/html5-dash-hls-rtmp/MediaElement/index1.html)  \n* :one: 2017年06月07日 星期三 Play-RTMP-HLS-Stream 代码方法优化\n###  :tomato:  直播源  \n+  HLS-001：`http://hls-live.jia.360.cn/live_jia_public/_LC_RE_non_3605277091515101384821337866_BX/index.m3u8`\n+   香港卫视\u0026emsp;`http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8`\n+   CCTV1高清\u0026emsp;`http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8`\n+   CCTV5高清\u0026emsp;`http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8`\n+   杭康\u0026emsp;`http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8`\n### :tropical_fish: 详细介绍  \n+   以下测试延迟多为局域网测试环境（线上为阿里云平台测试）  \n+   M3U8 直播或者点播DEMO  \n### :sunny: VideoJs-M3U8\n+ [x] 1、支持直播流：HSL的 m3u8   \n+ [x] 2、如何使用：直接下载即可使用,注意点： m3u8 播放必须放在服务器下面  \n+ [x] 3、默认：m3u8播放   \n+ [x] 4、延迟测试(局域网测试)\n     + [x] RTMP 延迟：2s   \n     + [x] HLS 延迟： 18s \n     + [x] VLC 延迟(不推荐)： 18s  \n+ [x] 5、鉴权：可以      \n+ [x] 皮肤支持\n    + [官方皮肤](http://www.scriptsmashup.com/Video_Skin_Generator/Videojs/videojs-skin-generator.html)\n    + YouTouBe\n    ![YouTouBe](/Images/YouTouBe.jpg)\n    + facebook-player   \n    ![facebook-player](/Images/facebook.jpg)\n### :cloud: m3u8-IE-Support \n+ [x] 兼容所有浏览器\n+ [x] 支持IE11 浏览器播放  \n+ [x] 测试结果：通过 \n### :cyclone:   VideoJs2017\n+ [x] 1、RTMP 支持播放\n+ [x] 2、支持鉴权 \n+ [ ] 3、~~M3U8 IE 暂时不支持播放~~  \n+ [x] 4、延迟测试(局域网测试)\n    + [x] RTMP 延迟：2s   \n    + [x] HLS 延迟： 18s \n    + [x] VLC 延迟(不推荐)： 18s \n+ 测试播放列表\n     + [1] RTMP直播流：`rtmp-stream.html`\n     + [2] HLS直播和点播：`hls-stream.html`\n     + [3] 直播和点播HLS的M3U8播放(可输入动态改变HLS地址)：`auto-input-hls-player.html`\n        + 遇到JS跨域的问题：\n            - `The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1`\n        + 解决办法(Nginx 服务器配置方法，Apache自行百度)：\n        ```\n        location /record {\n            add_header Cache-Control no-cache;\n            add_header 'Access-Control-Allow-Origin' '*' always;\n            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';\n            add_header 'Access-Control-Allow-Headers' 'Range';\n            types{\n                    application/dash+xml mpd;\n                    application/vnd.apple.mpegurl m3u8;\n                    video/mp2t ts;\n             }\n            alias /home/tinywan/hls;\n         }\n\n        ```\n        + 测试地址：`http://192.168.18.143/record/stream_name/index.m3u8`\n+ [x] 测试进度\n    + [2017年4月10日 下午 16:00 ] 局域网的HSL和RTMP流延迟的测试\n        \u003e 测试结果：RTMP 延迟：2s ，HLS 延迟： 18s    \n    + [2017年4月11日 下午 13:00 ] 直播和点播HLS的M3U8播放(可输入动态改变HLS地址),JS 跨域问题    \n\n#### :umbrella: Play-RTMP-HLS-Stream(Obj-Flash) \n+   支持 RTMP 和 M3U8 直播兼容播放\n+   参数说明\n    +   语法：`embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)`\n        1.  `swfUrlStr`:指定您的SWF的URL（StrobeMediaPlayback.swf）\n        1.  `replaceElemIdStr`:指定包含替换元素的html元素的ID,能用你的flash的内容来替换\n        1.  `widthStr`:指定SWF的宽度\n        1.  `heightStr`:指定SWF的高度\n        1.  `swfVersionStr`:指定SWF 发布所需的flash播放器的版本\n        1.  `xiSwfUrlStr`:指定快速安装的路径，激活快速安装. 请注意，快速安装只会触发一次（他第一次被调用）\n        1.  `flashvarsObj`:指定需要传递给flash的变量（用键值对）\n        1.  `parObj`:指定嵌入对象的参数（用键值对）\n        1.  `attObj`:指定对象的属性（用键值对）\n        1.  `callbackFn`: (JavaScript function, optional)能定义一个回调函数，不管调用flash创建成功或者失败都可以调用该函数\n+   文档\n    + [x] 1、支持：播放RTMP直播流和HSL直播流   \n    + [x] 2、如何使用：直接下载即可使用,注意点：m3u8 播放必须放在服务器下面，负载存在跨域问题  \n    + [x] 3、默认：RTMP播放   \n    + [x] 4、延迟：\n        + [x] RTMP 延迟：3s   \n        + [x] HLS 延迟： 20s  \n    + [x] 5、跨域：OK\n    + [x] 6、鉴权：OK （服务添加xml跨域文件）\n    + [x] 7、待解决问题：js 调用swf问题~~~~~~~~~~~\n    + [x] 测试进度\n        + [2017年4月10日 下午 16:00 ] 局域网的HSL和RTMP流延迟的测试，测试结果：RTMP 延迟：3s ，HLS 延迟： 20s \n        + [2017年6月7日 下午 16:00 ] 代码优化,该页面进行过优化`play2video2.html`，默认静音播放  \n\n## :apple: 音频和视频技术文档\n* [HLS-iOS视频播放服务架构深入探究（二）](https://yangchao0033.github.io/blog/2016/02/14/hls-2/)\n* [HLS-iOS视频播放服务架构深入探究（一）](https://yangchao0033.github.io/blog/2016/01/29/hls-1/)  \n* [HTTP Live Streaming (HLS) - 概念](https://www.jianshu.com/p/2ce402a485ca)  \n* 服务器端流媒体技术\n  * [GStreamer](https://gstreamer.freedesktop.org/)  \n  * [Nginx RTMP模块](https://github.com/arut/nginx-rtmp-module)  \n  * [SHOUTcast](http://en.wikipedia.org/wiki/SHOUTcast)\n+   [为 HTML 5 视频提供的 DASH 自适应串流](https://developer.mozilla.org/zh-CN/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video)    \n+   [HTTP访问控制（CORS）](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)\n+   [使用 canvas 处理视频](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas)\n+   [音频和视频内容](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)\n+   [基于HTTP的动态自适应流媒体](https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP)       \n+   [P2P如何将视频直播带宽降低75%？](http://mp.weixin.qq.com/s/ryojkLRb1x02pr0KSFzP9Q)       \n+   [展望2018音视频技术：AV1，AI，区块链，WebRTC](http://mp.weixin.qq.com/s/lX9WWqSS0KGQddrOVqV-Jg)       \n+   [怎么让不可靠的UDP可靠？](http://mp.weixin.qq.com/s/-yJH782XEnaezr7NWu8lIw)        \n+   [Twitch如何实现转码器比FFmepg性能提升65%？（上）](http://mp.weixin.qq.com/s/F7BBKM5heMu6EN705N504A)        \n+   [Twitch如何实现转码器比FFmpeg性能提升65%？（下）](http://mp.weixin.qq.com/s/BCMLzV9MlOjsnHzzfkTKkA)     \n  \n## :melon: FFmpeg HLS 命令记录\n+   [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)\n+   [官方文档http://www.ffmpeg.org/ffmpeg-formats.html](http://www.ffmpeg.org/ffmpeg-formats.html)\n+   `hls_segment_filename` 文件名\n    +   设置段文件名。除非hls_flags single_file设置， 文件名将被用作具有段号的字符串格式：\n    +   格式：`ffmpeg -i in.nut -hls_segment_filename'file％03d.ts'out.m3u8`\n    +   此示例将生成播放列表， out.m3u8，和段文件： file000.ts， file001.ts， file002.ts等等\n+   `use_localtime` 文件名\n    +   对文件名使用strftime（）来扩展本地时间段的文件名。段号也可在此模式下使用，但要使用它，您需要指定second_level_segment_index hls_flag，而%% d将是说明符。\n    +   格式：`ffmpeg -i in.nut -use_localtime 1 -hls_segment_filename'file-％Y％m％d-％s.ts'out.m3u8`\n    +   此示例将生成播放列表， out.m3u8，和段文件： 文件20160215-1455569023.ts， 文件20160215-1455569024.ts等等。注意：在某些系统/环境中，说明%s符不可用。见 strftime()文件。\n+   ts 文件转换成m3u8文件:`ffmpeg -i 854-1496985395500.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 10 output%03d.ts`        \n+   码云提交代码==Github 同步diamante     \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinywan%2Fh5-dash-hls-rtmp-webrtc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinywan%2Fh5-dash-hls-rtmp-webrtc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinywan%2Fh5-dash-hls-rtmp-webrtc/lists"}