You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
16 KiB
54 lines
16 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Jessibuca</title>
|
|
<meta name="generator" content="VuePress 1.8.2">
|
|
|
|
<meta name="description" content="一款纯H5直播流播放器">
|
|
|
|
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/9.a9dfd281.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="logo.png" alt="Jessibuca" class="logo"> <span class="site-name can-hide">Jessibuca</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Home</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/#功能" class="sidebar-link">功能</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/#使用方法" class="sidebar-link">使用方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/#api" class="sidebar-link">API</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/#源码目录结构" class="sidebar-link">源码目录结构</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/#编译" class="sidebar-link">编译</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/#基本原理" class="sidebar-link">基本原理</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/logo.png" alt="hero"> <h1 id="main-title">
|
|
Jessibuca
|
|
</h1> <p class="description">
|
|
纯H5直播流播放器
|
|
</p> <p class="action"><a href="/player.html" class="nav-link action-button">
|
|
打开播放器
|
|
</a></p></header> <div class="features"><div class="feature"><h2>无插件</h2> <p>基于ASM.js/WebAssembly(wasm)实现的纯JavaScript直播播放器</p></div><div class="feature"><h2>低延时</h2> <p>能够在 PC\Android\iOS 浏览器Webview 内实现2秒以内低延迟直播播放</p></div><div class="feature"><h2>支持H265</h2> <p>软解码H.264/H.265+AAC/MP3/Speex流，WebGL视频渲染，WebAudio音频播放。</p></div></div> <div class="theme-default-content custom content__default"><h1 id="简介"><a href="#简介" class="header-anchor">#</a> 简介</h1> <p>Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。</p> <h2 id="功能"><a href="#功能" class="header-anchor">#</a> 功能</h2> <ul><li>支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)</li> <li>支持解码H.265视频（flv id == 12）</li> <li>支持解码AAC音频(LC,HE,HEv2 Profile全支持)</li> <li>支持解码MP3音频以及Speex音频格式</li> <li>可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）</li> <li>支持智能不花屏丢帧，长时间播放绝不累积延迟。</li> <li>可创建多个播放实例</li> <li>程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快</li> <li>同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器）
|
|
注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题</li> <li>支持HTTPS/WSS加密视频传输，保证视频内容传输安全</li> <li>手机浏览器内打开视频不会变成全屏播放</li></ul> <h2 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h2> <p>自动播放http-flv格式</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>600px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./renderer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">var</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"container"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">var</span> jessibuca <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Jessibuca</span><span class="token punctuation">(</span><span class="token punctuation">{</span> container<span class="token punctuation">,</span> decoder<span class="token operator">:</span> <span class="token string">"ff.js"</span> <span class="token punctuation">,</span>videoBuffer<span class="token operator">:</span><span class="token number">0.2</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
jessibuca<span class="token punctuation">.</span><span class="token function-variable function">onLoad</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token string">"http://localhost/live/user1.flv"</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span>
|
|
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><p>程序控制播放websocket-raw格式</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>600px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./renderer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>play<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>播放<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token keyword">var</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"container"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">var</span> jessibuca <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Jessibuca</span><span class="token punctuation">(</span><span class="token punctuation">{</span> container<span class="token punctuation">,</span> decoder<span class="token operator">:</span> <span class="token string">"ff.js"</span> <span class="token punctuation">,</span>videoBuffer<span class="token operator">:</span><span class="token number">0.2</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">function</span> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
|
jessibuca<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token string">"ws://localhost/live/user1"</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span>
|
|
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2> <p><a href="/api.html">API</a></p> <h2 id="源码目录结构"><a href="#源码目录结构" class="header-anchor">#</a> 源码目录结构</h2> <ul><li>obj 存放emscripten编译好的各种解码库的字节码库</li> <li>public 存放编译输出的js和wasm文件以及renderer.js</li> <li>thirdparty 各种第三方解码库的代码（已修改）和编译脚本</li></ul> <h2 id="编译"><a href="#编译" class="header-anchor">#</a> 编译</h2> <p>编译命令是python make.py 加上参数构成</p> <p>参数包括</p> <ul><li>-v 视频解码库，有效值为ff（ffmpeg）、libhevc、libde265 如果不传参数代表使用avc库（只支持h264 的baseline）</li> <li>-a 音频解码库，有效值为mp3、speex、aac，如果不传参数则无音频解码（ffmpeg自带aac解码）</li> <li>--wasm 表示编译成WebAssembly格式</li> <li>-o 代表输出文件路径，默认值是public/Jessibuca.js</li></ul> <p>示例:
|
|
ffmpeg（h264-aac）</p> <div class="language-bash extra-class"><pre class="language-bash"><code>python make.py -v ff -o public/ff.js
|
|
</code></pre></div><p>avc-mp3组合</p> <div class="language-bash extra-class"><pre class="language-bash"><code>python make.py -a mp3 -o public/avc_mp3.js
|
|
</code></pre></div><p>libhevc-aac组合</p> <div class="language-bash extra-class"><pre class="language-bash"><code>python make.py -v libhevc -a aac -o public/h265_aac.js
|
|
</code></pre></div><h2 id="基本原理"><a href="#基本原理" class="header-anchor">#</a> 基本原理</h2> <img src="/tech.png"></div> <div class="footer">
|
|
GPL Licensed | Copyright © 2020-present dexter
|
|
</div></main></div><div class="global-ui"></div></div>
|
|
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/9.a9dfd281.js" defer></script>
|
|
</body>
|
|
</html>
|