xielei
/
xytSk-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
xytSk-App/unpackage/dist/dev/app-plus/static/h5Player/doc/H5playerV2.1.2开发指南.html

2009 lines
67 KiB
HTML
Raw Normal View History

feat():功能开发
2024-06-05 16:16:58 +08:00
<!DOCTYPE html>
<html>
<head>
<title>no title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview ul{list-style:disc}.markdown-preview ul ul{list-style:circle}.markdown-preview ul ul ul{list-style:square}.markdown-preview ol{list-style:decimal}.markdown-preview ol ol,.markdown-preview ul ol{list-style-type:lower-roman}.markdown-preview ol ol ol,.markdown-preview ol ul ol,.markdown-preview ul ol ol,.markdown-preview ul ul ol{list-style-type:lower-alpha}.markdown-preview .newpage,.markdown-preview .pagebreak{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center!important}.markdown-preview:not([data-for=preview]) .code-chunk .code-chunk-btn-group{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .status{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0;min-height:100vh}@media screen and (min-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{font-size:14px!important;padding:1em}}@media print{html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66
/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
</style>
<!-- The content below will be included at the end of the <head> element. --><html><head><script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
// your code here
});
</script></head><body></body></html>
</head>
<body for="html-export">
<div class="crossnote markdown-preview">
<html><head></head><body><div>
<div class="md-toc">
<details style="padding:0;;padding-left:0px;" open="">
<summary class="md-toc-link-wrapper">
<a href="#h5player" class="md-toc-link"><p>h5player</p>
</a>
</summary>
<div>
<div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#描述" class="md-toc-link">
<p>描述</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#版本" class="md-toc-link">
<p>版本</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#媒体版本限制" class="md-toc-link">
<p>媒体版本限制</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#使用注意事项" class="md-toc-link">
<p>使用注意事项</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#浏览器限制以及编解码支持情况" class="md-toc-link">
<p>浏览器限制以及编解码支持情况</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#接口调用流程图" class="md-toc-link">
<p>接口调用流程图</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#引入" class="md-toc-link">
<p>引入</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#创建实例" class="md-toc-link">
<p>创建实例</p>
</a></div><details style="padding:0;;padding-left:24px;" open="">
<summary class="md-toc-link-wrapper">
<a href="#接口说明" class="md-toc-link"><p>接口说明</p>
</a>
</summary>
<div>
<div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#事件初始化-js_setwindowcontrolcallbackevents" class="md-toc-link">
<p>事件初始化: JS_SetWindowControlCallback(events)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#play" class="md-toc-link">
<p>播放: JS_Play(url, config, windowIndex, startTime, endTime)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#stop" class="md-toc-link">
<p>停止播放: JS_Stop(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#停止所有播放-js_stoprealplayall" class="md-toc-link">
<p>停止所有播放: JS_StopRealPlayAll()</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#开启声音-js_opensoundwindowindex" class="md-toc-link">
<p>开启声音: JS_OpenSound(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#关闭声音-js_closesoundwindowindex" class="md-toc-link">
<p>关闭声音: JS_CloseSound(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置音量-js_setvolumewindowindex-volumn" class="md-toc-link">
<p>设置音量: JS_SetVolume(windowIndex, volumn)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#获取当前音量-js_getvolumewindowindex" class="md-toc-link">
<p>获取当前音量: JS_GetVolume(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#录像-js_startsaveexwindowindex-filename-idsttype" class="md-toc-link">
<p>录像: JS_StartSaveEx(windowIndex, fileName, idstType)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#停止录像并保存文件-js_stopsavewindowindex" class="md-toc-link">
<p>停止录像并保存文件: JS_StopSave(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#抓图-js_capturepicturewindowindex-filename-filetype-callback" class="md-toc-link">
<p>抓图: JS_CapturePicture(windowIndex, fileName, fileType, callback)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#回放js_playplay" class="md-toc-link">
</a><p><a href="#回放js_playplay" class="md-toc-link">回放：</a><a href="#play">JS_Play()</a></p>
</div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#停止回放js_stopstop" class="md-toc-link">
</a><p><a href="#停止回放js_stopstop" class="md-toc-link">停止回放：</a><a href="#stop">JS_Stop()</a></p>
</div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#暂停回放-js_pausewindowindex" class="md-toc-link">
<p>暂停回放: JS_Pause(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#恢复回放-js_resumewindowindex" class="md-toc-link">
<p>恢复回放: JS_Resume(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#开始对讲-js_starttalksztalkurl" class="md-toc-link">
<p>开始对讲: JS_StartTalk(szTalkUrl)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#停止对讲-js_stoptalk" class="md-toc-link">
<p>停止对讲: JS_StopTalk()</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置对讲音量js_talksetvolumenvolume" class="md-toc-link">
<p>设置对讲音量：JS_TalkSetVolume(nVolume)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#获取对讲音量-js_talkgetvolume" class="md-toc-link">
<p>获取对讲音量: JS_TalkGetVolume()</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#录像-抓图功能同预览播放" class="md-toc-link">
<p>录像、抓图功能同预览播放</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#回放快放-js_fastwindowindex" class="md-toc-link">
<p>回放快放: JS_Fast(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#回放慢放-js_slowwindowindex" class="md-toc-link">
<p>回放慢放: JS_Slow(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#回放定位-js_seekwindowindex-strattime-endtime" class="md-toc-link">
<p>回放定位: JS_Seek(windowIndex, stratTime, endTime)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#回放单帧进高级模式功能-js_frameforwardwindowindex" class="md-toc-link">
<p>回放单帧进（高级模式功能）: JS_FrameForward(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#电子放大高级模式功能-js_enablezoomwindowindex" class="md-toc-link">
<p>电子放大（高级模式功能）: JS_EnableZoom(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#开启关闭智能信息展示高级模式功能-js_renderallprivatedataiwndnum-bopenflag" class="md-toc-link">
<p>开启/关闭智能信息展示（高级模式功能）: JS_RenderALLPrivateData(iWndNum, bOpenFlag)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#分屏-js_arrangewindowsplitnum" class="md-toc-link">
<p>分屏: JS_ArrangeWindow(splitNum)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#切换选中窗口-js_selectwndwindowindex" class="md-toc-link">
<p>切换选中窗口: JS_SelectWnd(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#整体全屏-js_fullscreendisplayisfull" class="md-toc-link">
<p>整体全屏: JS_FullScreenDisplay(isFull)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#单窗口全屏-js_fullscreensinglewindowindex" class="md-toc-link">
<p>单窗口全屏: JS_FullScreenSingle(windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置窗口大小js_resize-iwidth-iheight" class="md-toc-link">
<p>设置窗口大小：JS_Resize (iWidth, iHeight)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#获取osd时间js_getosdtime-windowindex" class="md-toc-link">
<p>获取OSD时间：JS_GetOSDTime (windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#获取音视频信息js_getvideoinfo-windowindex" class="md-toc-link">
<p>获取音视频信息：JS_GetVideoInfo (windowIndex)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置取流连接超时时间js_setconnecttimeout-windowindex-ntime" class="md-toc-link">
<p>设置取流连接超时时间：JS_SetConnectTimeOut (windowIndex, nTime)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置私有数据回调高级模式功能js_setadditiondatacbwindowindex-sztype-cbcallback" class="md-toc-link">
<p>设置私有数据回调（高级模式功能）：JS_SetAdditionDataCB(windowIndex, szType, cbCallback)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置traceidjs_settraceidwindowindex-bopenflag" class="md-toc-link">
<p>设置traceId：JS_SetTraceId(windowIndex, bOpenFlag)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#设置断流时间回调js_setinterrupttimeiwndnum-interrupttime" class="md-toc-link">
<p>设置断流时间回调：JS_SetInterruptTime(iWndNum, InterruptTime)</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#获取traceidjs_gettraceidwindowindex" class="md-toc-link">
<p>获取traceId：JS_GetTraceId(windowIndex)</p>
</a></div>
</div>
</details>
<div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#错误码及其描述" class="md-toc-link">
<p>错误码及其描述</p>
</a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
<a href="#faq" class="md-toc-link">
<p>FAQ</p>
</a></div>
</div>
</details>
</div>
<h1 id="h5player">h5player </h1>
<h2 id="描述">描述 </h2>
<p>h5player是一个基于HTML5的流式网络视频播放器，无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。</p>
<h2 id="版本">版本 </h2>
<p>当前版本 2.0.0</p>
<h2 id="媒体版本限制">媒体版本限制 </h2>
<p>媒体网关:mgc_V5.11.101003 或 mgc_V5.13.100版本及以上</p>
<h2 id="使用注意事项">使用注意事项 </h2>
<p>1、需要在web服务器返回的响应头增加跨域隔离字段：Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin 并在https环境下使用。否则高级模式无法使用<br>
2、在集成过程中new JSPlugin时候必填szBasePath: './dist', // 必填,引用H5player.min.js的js相对目录，否则会引起内部加载解码库异常</p>
<h2 id="浏览器限制以及编解码支持情况">浏览器限制以及编解码支持情况 </h2>
<p>以下数据都是在pc chrome80+测试所得</p>
<table>
<thead>
<tr>
<th style="text-align:center">解码方式</th>
<th style="text-align:center">浏览器限制</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">高级模式</td>
<td style="text-align:center">当前支持 Chrome80+，ios safari,andriod browser</td>
</tr>
<tr>
<td style="text-align:center">普通模式</td>
<td style="text-align:center">除 IE 和 IOS Safari 外，基本都支持</td>
</tr>
</tbody>
</table>
<table>
<tbody><tr>
<th rowspan="2">解码方式</th>
<th colspan="2">视频编码格式</th>
<th colspan="8">音频编码格式</th>
</tr>
<tr>
<td>H264</td>
<td>H265</td>
<td>AAC</td>
<td>AACLD</td>
<td>ADPCM</td>
<td>G711</td>
<td>G722_1</td>
<td>G726</td>
<td>MP2</td>
<td>Opus</td>
</tr>
<tr align="middle">
<td>高级模式</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr align="middle">
<td>普通模式</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✕</td>
<td>✕</td>
<td>✕</td>
<td>✕</td>
<td>✕</td>
<td>✕</td>
<td>✕</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th rowspan="3">解码方式</th>
<th rowspan="3">视频编码格式</th>
<th rowspan="3">分辨率</th>
<th rowspan="3">视频参数(bps*fps)</th>
<th colspan="3">解码路数（系统：Win7）</th>
</tr>
<tr>
<th>CPU：<br>I7_8700K</th>
<th>CPU：<br>I5-9400/F</th>
<th>CPU：<br>I3-8100</th>
</tr>
<tr>
<th>显卡：RTX2080</th>
<th>显卡：GTX1050TI</th>
<th>显卡：GT1030D5</th>
</tr>
<tr align="middle">
<td rowspan="4">高级模式</td>
<td rowspan="2">H265</td>
<td>1080P</td>
<td>4M * 25</td>
<td>6</td>
<td>4</td>
<td>3</td>
</tr>
<tr align="middle">
<td>720P</td>
<td>2M * 25</td>
<td>14</td>
<td>10</td>
<td>6</td>
</tr>
<tr align="middle">
<td rowspan="2">H264</td>
<td>1080P</td>
<td>4M * 25 </td>
<td>6</td>
<td>4</td>
<td>3</td>
</tr>
<tr align="middle">
<td>720P</td>
<td>2M * 25</td>
<td>14</td>
<td>10</td>
<td>6</td>
</tr>
<tr align="middle">
<td rowspan="4">普通模式</td>
<td rowspan="2">H265(采用高级模式解码)</td>
<td>1080P</td>
<td>4M * 25</td>
<td>6</td>
<td>4</td>
<td>3</td>
</tr>
<tr align="middle">
<td>720P</td>
<td>2M * 25</td>
<td>14</td>
<td>10</td>
<td>6</td>
</tr>
<tr align="middle">
<td rowspan="2">H264</td>
<td>1080P</td>
<td>4M * 25</td>
<td>24</td>
<td>20</td>
<td>9</td>
</tr>
<tr align="middle">
<td>720P</td>
<td>2M * 25</td>
<td>32</td>
<td>32</td>
<td>16</td>
</tr>
</tbody></table>
<h2 id="接口调用流程图">接口调用流程图 </h2>
<p>其余控制接口调用都在JS_Play后调用</p>
<pre data-role="codeBlock" data-info="flow" class="language-flow flow"><code>st<span class="token operator">=&gt;</span>start<span class="token operator">:</span> 开始
e<span class="token operator">=&gt;</span>end<span class="token operator">:</span> 结束
op1<span class="token operator">=&gt;</span>operation<span class="token operator">:</span> 创建实例：<span class="token keyword keyword-new">new</span> <span class="token class-name">JSPlugin</span><span class="token operator">|</span>past
op2<span class="token operator">=&gt;</span>operation<span class="token operator">:</span> 事件初始化：JS_SetWindowControlCallback<span class="token operator">|</span>past
op3<span class="token operator">=&gt;</span>operation<span class="token operator">:</span> 调用预览<span class="token operator">/</span>回放接口：JS_Play<span class="token operator">|</span>current
op4<span class="token operator">=&gt;</span>operation<span class="token operator">:</span> 调用停止接口：JS_Stop<span class="token operator">|</span>current
op5<span class="token operator">=&gt;</span>operation<span class="token operator">:</span> 抓图<span class="token operator">|</span>current
st<span class="token operator">-</span><span class="token operator">&gt;</span>op1<span class="token operator">-</span><span class="token operator">&gt;</span>op2<span class="token operator">-</span><span class="token operator">&gt;</span>op3<span class="token operator">-</span><span class="token operator">&gt;</span>op4
op4<span class="token operator">-</span><span class="token operator">&gt;</span>e
</code></pre><h2 id="引入">引入 </h2>
<p>直接用&lt;script&gt;标签引入</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>&lt;!-- h5player --&gt;
&lt;script src="h5player.min.js"&gt;&lt;/script&gt;
</code></pre><h2 id="创建实例">创建实例 </h2>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>&lt;body&gt;
&lt;div id="play_window"&gt;&lt;/div&gt;
&lt;script&gt;
var curIndex = 0; // 当前窗口下标
var myPlugin = new JSPlugin({
szId: 'play_window', //需要英文字母开头，唯一性，必填
szBasePath: './dist', // 必填,与h5player.min.js的引用目录一致
bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
// iWidth: 600,
// iHeight: 400,
// 分屏播放，默认最大分屏4*4
// iMaxSplit: 4,
// iCurrentSplit: 1,
})
&lt;/script&gt;
&lt;/body&gt;
</code></pre><h2 id="接口说明">接口说明 </h2>
<h3 id="事件初始化-js_setwindowcontrolcallbackevents">事件初始化: JS_SetWindowControlCallback(events) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>events</td>
<td>Object</td>
<td>事件对应的处理函数集合</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>JS_SetWindowControlCallback({
windowEventSelect: function (index) { //插件选中窗口回调
curIndex = index;
console.log(index, iErrorCode, oError);
},
pluginErrorHandler: function (index, iErrorCode, oError) { //插件错误回调
// do you want...
// 取流失败，流中断等错误都会触发该回调函数，请自行对照错误码表进行判断。
// 业务上层可在此做一些个性化操作，如：个性化错误信息展示，重新取流等。
},
windowEventOver: function (index) { //鼠标移过回调
// do you want...
},
windowEventOut: function (index) { //鼠标移出回调
// do you want...
},
windowEventUp: function (index) { //鼠标mouseup事件回调
// do you want...
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
// do you want...
},
firstFrameDisplay: function (index, iWidth, iHeight) { //首帧显示回调
// do you want...
},
performanceLack: function () { //性能不足回调
// do you want...
},
StreamEnd: function (index) { //回放结束回调,返回对应测窗口id
console.log('recv windowsId: '+iWndIndex+' recv streamend');
// do you want...
},
InterruptStream: function (iWndIndex, interruptTime) { //interruptTime为秒级别
console.log('recv InterruptStream windowsId: '+iWndIndex+' interrupt time:'+interruptTime+'s');
},
talkPluginErrorHandler: (iErrorCode, oError) =&gt; { //对讲错误回调
console.log('recv talkPluginErrorHandler: '+iErrorCode);
},
});
</code></pre><h3 id="play">播放: JS_Play(url, config, windowIndex, startTime, endTime) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td>流媒体URL</td>
<td>是</td>
</tr>
<tr>
<td>config</td>
<td>Object</td>
<td>播放配置</td>
<td>必传,详情见示例</td>
</tr>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>当前窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>startTime</td>
<td>DateTime</td>
<td>回放开始时间，统一格式，格式类型：2023-05-16T00:00:00Z或2023-05-16T07:47:36.000+08:00</td>
<td>预览不能填，回放必填</td>
</tr>
<tr>
<td>endTime</td>
<td>DateTime</td>
<td>回放结束时间，格式类型：统一格式，格式类型：2023-05-16T00:00:00Z或2023-05-16T07:47:36.000+08:00</td>
<td>预览不能填，回放必填</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>let url = document.getElementById('url').value;
let startTime, endTime;
myPlugin.JS_Play(
url,
{
playURL: url, // 流媒体播放时必传
mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0
// ...
},
curIndex, //当前窗口下标
// 回放参数
startTime,
endTime,
).then(
() =&gt; {
console.info('JS_Play success');
// do you want...
},
(err) =&gt; {
console.info('JS_Play failed:', err);
// do you want...
}
);
</code></pre><h3 id="stop">停止播放: JS_Stop(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Stop(curIndex).then(
() =&gt; {
console.info('JS_Stop success');
// do you want...
},
(err) =&gt; {
console.info('JS_Stop failed:', err);
// do you want...
}
);
</code></pre><h3 id="停止所有播放-js_stoprealplayall">停止所有播放: JS_StopRealPlayAll() </h3>
<p>参数：无<br>
返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_StopRealPlayAll().then(
() =&gt; {
console.info('JS_StopRealPlayAll success');
// do you want...
},
(err) =&gt; {
console.info('JS_StopRealPlayAll failed');
// do you want...
}
);
</code></pre><h3 id="开启声音-js_opensoundwindowindex">开启声音: JS_OpenSound(windowIndex) </h3>
<p>参数：<br>
说明：一个实例下只支持一路声音播放，开启下一路会默认关闭上一路声音。倍数不支持声音播放</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>否，不传时默认开启当前选中窗口的声音</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_OpenSound(curIndex).then(
() =&gt; {
console.info('JS_OpenSound success');
// do you want...
},
(err) =&gt; {
console.info('JS_OpenSound failed');
// do you want...
}
);
</code></pre><h3 id="关闭声音-js_closesoundwindowindex">关闭声音: JS_CloseSound(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>否，不传时默认关闭当前选中窗口的声音</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_CloseSound(curIndex).then(
() =&gt; {
console.info('JS_CloseSound success');
// do you want...
},
(err) =&gt; {
console.info('JS_CloseSound failed');
// do you want...
}
);
</code></pre><h3 id="设置音量-js_setvolumewindowindex-volumn">设置音量: JS_SetVolume(windowIndex, volumn) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>volumn</td>
<td>Number</td>
<td>音量大小</td>
<td>是，范围1~100，默认50</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_SetVolume(curIndex, volumn).then(
() =&gt; {
console.info('JS_SetVolume success');
// do you want...
},
(err) =&gt; {
console.info('JS_SetVolume failed');
// do you want...
}
);
</code></pre><h3 id="获取当前音量-js_getvolumewindowindex">获取当前音量: JS_GetVolume(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_GetVolume(curIndex).then(
(volumn) =&gt; { //在不设置音量的情况下默认50
console.info('JS_GetVolume success', volumn);
// do you want...
},
(err) =&gt; {
console.info('JS_GetVolume failed');
// do you want...
}
);
</code></pre><h3 id="录像-js_startsaveexwindowindex-filename-idsttype">录像: JS_StartSaveEx(windowIndex, fileName, idstType) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>fileName</td>
<td>String</td>
<td>文件名(保证全局唯一性)</td>
<td>是，可不带后缀，默认为.mp4</td>
</tr>
<tr>
<td>idstType</td>
<td>Number</td>
<td>录像文件类型</td>
<td>是，2-ps 5-mp4 ,mp4录制音频限制，仅支持AAC、G711A、G711U</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>let fileName = 'fileName.mp4';
myPlugin.JS_StartSaveEx(curIndex, fileName, 2).then(
() =&gt; {
console.info('JS_StartSave success');
// do you want...
},
(err) =&gt; {
console.info('JS_StartSave failed');
// do you want...
}
);
</code></pre><h3 id="停止录像并保存文件-js_stopsavewindowindex">停止录像并保存文件: JS_StopSave(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>let fileName = 'fileName.mp4';
myPlugin.JS_StopSave(windowIndex).then(
() =&gt; {
console.info('JS_StopSave success');
// do you want...
},
(err) =&gt; {
console.info('JS_StopSave failed');
// do you want...
}
);
</code></pre><h3 id="抓图-js_capturepicturewindowindex-filename-filetype-callback">抓图: JS_CapturePicture(windowIndex, fileName, fileType, callback) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>fileName</td>
<td>String</td>
<td>文件名</td>
<td>是</td>
</tr>
<tr>
<td>fileType</td>
<td>String</td>
<td>文件类型</td>
<td>是，'JPEG'</td>
</tr>
<tr>
<td>callback</td>
<td>Fuction</td>
<td>回调函数</td>
<td>否</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>let fileName = 'img';
let fileType = 'JPEG';
//下载到本地
myPlugin.JS_CapturePicture(curIndex, fileName, fileType).then(
() =&gt; {
console.info('JS_CapturePicture success');
// do you want...
},
(err) =&gt; {
console.info('JS_CapturePicture failed');
// do you want...
}
);
//不进行下载，数据回调,JS_CapturePicture接口在jsdecoder1.0解码方式下连续调用会存在失败的情况，如果既要回调又要下载，请自行对回调数据进行下载
myPlugin.JS_CapturePicture(curIndex, fileName, fileType，imageData =&gt; {
console.info('JS_CapturePicture success', imageData); //2.1.0开始全是base64，之前的版本存在blob或者是base64
// do you want...
})
</code></pre><h3 id="回放js_playplay">回放：<a href="#play">JS_Play()</a> </h3>
<h3 id="停止回放js_stopstop">停止回放：<a href="#stop">JS_Stop()</a> </h3>
<h3 id="暂停回放-js_pausewindowindex">暂停回放: JS_Pause(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Pause(curIndex).then(
() =&gt; {
console.info('JS_Pause success');
// do you want...
},
(err) =&gt; {
console.info('JS_Pause failed');
// do you want...
}
);
</code></pre><h3 id="恢复回放-js_resumewindowindex">恢复回放: JS_Resume(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Resume(curIndex).then(
() =&gt; {
console.info('JS_Resume success');
// do you want...
},
(err) =&gt; {
console.info('JS_Resume failed');
// do you want...
}
);
</code></pre><h3 id="开始对讲-js_starttalksztalkurl">开始对讲: JS_StartTalk(szTalkUrl) </h3>
<p>特殊声明：由于浏览器的安全限制，该功能只能在https域下使用，只支持一路对讲<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>szTalkUrl</td>
<td>String</td>
<td>对讲URL</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_StartTalk(szTalkUrl).then(
() =&gt; {
console.info('JS_StartTalk success');
// do you want...
},
(err) =&gt; {
console.info('JS_StartTalk failed');
// do you want...
}
);
</code></pre><h3 id="停止对讲-js_stoptalk">停止对讲: JS_StopTalk() </h3>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_StopTalk().then(
() =&gt; {
console.info('JS_StopTalk success');
// do you want...
},
(err) =&gt; {
console.info('JS_StopTalk failed');
// do you want...
}
);
</code></pre><h3 id="设置对讲音量js_talksetvolumenvolume">设置对讲音量：JS_TalkSetVolume(nVolume) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>nVolume</td>
<td>number</td>
<td>音量大小（0-100）</td>
<td>否</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.设置对讲音量：JS_TalkSetVolume(nVolume).then(
() =&gt; {
console.info('JS_TalkSetVolume success');
// do you want...
},
(err) =&gt; {
console.info('JS_TalkSetVolume failed');
// do you want...
}
);
</code></pre><h3 id="获取对讲音量-js_talkgetvolume">获取对讲音量: JS_TalkGetVolume() </h3>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_TalkGetVolume().then(
() =&gt; {
console.info('JS_TalkGetVolume success');
// do you want...
},
(err) =&gt; {
console.info('JS_TalkGetVolume failed');
// do you want...
}
);
</code></pre><h3 id="录像-抓图功能同预览播放">录像、抓图功能同预览播放 </h3>
<h3 id="回放快放-js_fastwindowindex">回放快放: JS_Fast(windowIndex) </h3>
<p>调节播放倍速为当前播放速度的2倍，最大为8倍。<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Fast(curIndex).then(
() =&gt; {
console.info('JS_Fast success');
// do you want...
},
(err) =&gt; {
console.info('JS_Fast failed');
// do you want...
}
);
</code></pre><h3 id="回放慢放-js_slowwindowindex">回放慢放: JS_Slow(windowIndex) </h3>
<p>调节播放倍速为当前播放速度的1/2倍，最小为1/8倍。<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Slow(curIndex).then(
() =&gt; {
console.info('JS_Slow success');
// do you want...
},
(err) =&gt; {
console.info('JS_Slow failed');
// do you want...
}
);
</code></pre><h3 id="回放定位-js_seekwindowindex-strattime-endtime">回放定位: JS_Seek(windowIndex, stratTime, endTime) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>stratTime</td>
<td>DateTime</td>
<td>开始时间，格式类型：2021-06-29T00:00:00Z</td>
<td>是</td>
</tr>
<tr>
<td>endTime</td>
<td>DateTime</td>
<td>结束时间，格式类型：2021-06-29T00:00:00Z</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Seek(curIndex，zStartDate, szEndDate).then(
() =&gt; {
console.info('JS_Seek success');
// do you want...
},
(err) =&gt; {
console.info('JS_Seek failed');
// do you want...
}
);
</code></pre><h3 id="回放单帧进高级模式功能-js_frameforwardwindowindex">回放单帧进（高级模式功能）: JS_FrameForward(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_FrameForward(curIndex).then(
() =&gt; {
console.info('JS_FrameForward success');
// do you want...
},
(err) =&gt; {
console.info('JS_FrameForward failed');
// do you want...
}
);
</code></pre><h3 id="电子放大高级模式功能-js_enablezoomwindowindex">电子放大（高级模式功能）: JS_EnableZoom(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>否，不传时默认开启当前选中窗口的电子放大功能</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_EnableZoom(curIndex).then(
() =&gt; {
console.info('JS_EnableZoom success');
// do you want...
},
(err) =&gt; {
console.info('JS_EnableZoom failed');
// do you want...
}
);
</code></pre><h3 id="开启关闭智能信息展示高级模式功能-js_renderallprivatedataiwndnum-bopenflag">开启/关闭智能信息展示（高级模式功能）: JS_RenderALLPrivateData(iWndNum, bOpenFlag) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>iWndNum</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>bOpenFlag</td>
<td>Boolean</td>
<td>开启/关闭</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_RenderALLPrivateData(iWndNum, true).then(
() =&gt; {
console.info('JS_RenderALLPrivateData success');
// do you want...
},
(err) =&gt; {
console.info('JS_RenderALLPrivateData failed');
// do you want...
}
);
</code></pre><h3 id="分屏-js_arrangewindowsplitnum">分屏: JS_ArrangeWindow(splitNum) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>splitNum</td>
<td>Number</td>
<td>分隔数</td>
<td>是， 范围：1~4</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>分隔数</td>
<td>分屏效果</td>
<td></td>
<td></td>
</tr>
<tr>
<td>----</td>
<td>----</td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>1x1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2x2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>3x3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>4x4</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_ArrangeWindow(splitNum).then(
() =&gt; {
console.info('JS_ArrangeWindow success');
// do you want...
},
(err) =&gt; {
console.info('JS_ArrangeWindow failed');
// do you want...
}
);
</code></pre><h3 id="切换选中窗口-js_selectwndwindowindex">切换选中窗口: JS_SelectWnd(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_SelectWnd(windowIndex).then(
() =&gt; {
console.info('JS_SelectWnd success');
// do you want...
},
(err) =&gt; {
console.info('JS_SelectWnd failed');
// do you want...
}
);
</code></pre><h3 id="整体全屏-js_fullscreendisplayisfull">整体全屏: JS_FullScreenDisplay(isFull) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>isFull</td>
<td>Boolean</td>
<td>是否全屏</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_FullScreenDisplay(true).then(
() =&gt; {
console.info('JS_FullScreenDisplay success');
// do you want...
},
(err) =&gt; {
console.info('JS_FullScreenDisplay failed');
// do you want...
}
);
</code></pre><h3 id="单窗口全屏-js_fullscreensinglewindowindex">单窗口全屏: JS_FullScreenSingle(windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_FullScreenSingle(curIndex).then(
() =&gt; {
console.info('JS_FullScreenSingle success');
// do you want...
},
(err) =&gt; {
console.info('JS_FullScreenSingle failed');
// do you want...
}
);
</code></pre><h3 id="设置窗口大小js_resize-iwidth-iheight">设置窗口大小：JS_Resize (iWidth, iHeight) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>iWidth</td>
<td>Number</td>
<td>播放页面宽度</td>
<td>否，不传时默认父窗口大小</td>
</tr>
<tr>
<td>iHeight</td>
<td>Number</td>
<td>播放页面高度</td>
<td>否，不传时默认父窗口大小</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_Resize().then(
() =&gt; {
console.info('JS_Resize success');
// do you want...
},
(err) =&gt; {
console.info('JS_Resize failed');
// do you want...
}
);
</code></pre><h3 id="获取osd时间js_getosdtime-windowindex">获取OSD时间：JS_GetOSDTime (windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>成功返回从1970-1-1 00:00:00 到该日期对象的毫秒数,但是获取的精度只到秒级别，毫秒都是0</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_GetOSDTime(curIndex).then(
(time) =&gt; {
console.info("osdTime:", new Date(time));
// do you want...
},
(err) =&gt; {
console.info('JS_GetOSDTime failed');
// do you want...
}
);
</code></pre><h3 id="获取音视频信息js_getvideoinfo-windowindex">获取音视频信息：JS_GetVideoInfo (windowIndex) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>videoInfo = {</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre class="language-text"> VideType: 'h264', //视频编码格式
audioType: 'without',//音频编码格式
width: 0,//视频分辨率的宽
height: 0,//视频分辨率的高
frameRate: 25,//视频帧率
bitRate: 2048,//视频码率，单位：Kb/s
systemFormt: "ps"//视频封装格式
</pre>
<p>};</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_GetVideoInfo(curIndex).then(
(VideoInfo) =&gt; {
console.info("VideoInfo:", VideoInfo);
// do you want...
},
(err) =&gt; {
console.info('JS_GetVideoInfo failed');
// do you want...
}
);
</code></pre><h3 id="设置取流连接超时时间js_setconnecttimeout-windowindex-ntime">设置取流连接超时时间：JS_SetConnectTimeOut (windowIndex, nTime) </h3>
<p>参数：<br>
说明：该接口不调用时默认6s,在JS_Play之前调用</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>nTime</td>
<td>Number</td>
<td>超时时间</td>
<td>是，不传时默认0秒，单位秒</td>
</tr>
<tr>
<td>返回：Promise</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_SetConnectTimeOut(curIndex, nTime).then(
() =&gt; {
console.info('JS_SetConnectTimeOut success');
// do you want...
},
(err) =&gt; {
console.info('JS_SetConnectTimeOut failed');
// do you want...
}
);
</code></pre><h3 id="设置私有数据回调高级模式功能js_setadditiondatacbwindowindex-sztype-cbcallback">设置私有数据回调（高级模式功能）：JS_SetAdditionDataCB(windowIndex, szType, cbCallback) </h3>
<p>参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>szType</td>
<td>Number</td>
<td>数据类型</td>
<td>是，0x0101: 定制温度 0x0103: 基线温度裸数据 0x0006: 车载行车信息 0x0009: 车载调试信息 0x0007: POS 信息解析回调 0x0010: 汽车电子私有信息 0x0011: 无人机私有信息 0x0804: 数立体云防私有数据 0x000B: 设备扩展信息</td>
</tr>
<tr>
<td>cbCallback</td>
<td>function</td>
<td>回调函数</td>
<td>是，function(dataType, dataStrVersion, dataTimeStamp, additionDataBuffer)</td>
</tr>
</tbody>
</table>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_SetAdditionDataCB(curIndex, 0x0804, function(dataType,dataStrVersion, dataTimeStamp, additionDataBuffer){
console.log(" JSPlayM4_AdditionDataCBFun dataType:"+dataType +",dataStrVersion:"+dataStrVersion+",dataTimeStamp:"+dataTimeStamp);
}).then(
() =&gt; {
console.info('JS_SetAdditionDataCB success');
// do you want...
},
(err) =&gt; {
console.info('JS_SetAdditionDataCB failed');
// do you want...
}
);
</code></pre><h3 id="设置traceidjs_settraceidwindowindex-bopenflag">设置traceId：JS_SetTraceId(windowIndex, bOpenFlag) </h3>
<p>说明：traceId是查询调用链的唯一标识，H5player不做调用链埋点，只拼接traceId，traceId建议在传入url的时候自行拼接<br>
拼接规则：取流url中无?则拼接?traceId=uuid(随机生成的一个id编号);有?则拼接&amp;traceId=uuid<br>
示例：wss://10.19.147.57:6014/proxy/10.19.147.57:559/EUrl/SiSnW6z?traceId=d9d0766e3b3f7a41<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>bOpenFlag</td>
<td>Number</td>
<td>是否设置traceId</td>
<td>是,该接口不调用默认false</td>
</tr>
</tbody>
</table>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_SetTraceId(curIndex, bOpenFlag).then(
() =&gt; {
console.info('JS_SetTraceId success');
// do you want...
},
(err) =&gt; {
console.info('JS_SetTraceId failed');
// do you want...
}
);
</code></pre><h3 id="设置断流时间回调js_setinterrupttimeiwndnum-interrupttime">设置断流时间回调：JS_SetInterruptTime(iWndNum, InterruptTime) </h3>
<p>说明：断流的事件统一从JS_SetWindowControlCallback的InterruptStream回调，InterruptTime为检测无码流的时间，每过InterruptTime回调一次断流事件，未设置默认每过5s无码流回调一次断流事件<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
<tr>
<td>InterruptTime</td>
<td>Number</td>
<td>检测断流时间阈值,单位：秒,默认5秒</td>
<td>是</td>
</tr>
</tbody>
</table>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>let InterruptTime = 5;
myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
() =&gt; {
console.info('JS_SetInterruptTime success');
// do you want...
},
(err) =&gt; {
console.info('JS_SetInterruptTime failed');
// do you want...
}
);
</code></pre><h3 id="获取traceidjs_gettraceidwindowindex">获取traceId：JS_GetTraceId(windowIndex) </h3>
<p>说明：traceId是查询调用链的唯一标识，H5player不做调用链埋点，只拼接traceId，traceId建议在传入url的时候自行拼接，更方便应用层管理，h5player内部会检测无traceId时会默认拼接上<br>
拼接规则：取流url中无?则拼接?traceId=uuid(随机生成的一个id编号);有?则拼接&amp;traceId=uuid<br>
示例：wss://10.19.147.57:6014/proxy/10.19.147.57:559/EUrl/SiSnW6z?traceId=d9d0766e3b3f7a41<br>
参数：</p>
<table>
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>说明</th>
<th>必需</th>
</tr>
</thead>
<tbody>
<tr>
<td>windowIndex</td>
<td>Number</td>
<td>窗口下标</td>
<td>是</td>
</tr>
</tbody>
</table>
<p>返回：Promise</p>
<pre data-role="codeBlock" data-info="" class="language-text text"><code>myPlugin.JS_GetTraceId(curIndex).then(
(traceId) =&gt; {
console.info('JS_GetTraceId success', traceId);
// do you want...
},
(err) =&gt; {
console.info('JS_GetTraceId failed');
// do you want...
}
);
</code></pre><h2 id="错误码及其描述">错误码及其描述 </h2>
<table>
<thead>
<tr>
<th>错误码</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>0x12f900001</td>
<td>接口调用参数错误</td>
</tr>
<tr>
<td>0x12f900002</td>
<td>不在播放状态</td>
</tr>
<tr>
<td>0x12f900003</td>
<td>仅回放支持该功能</td>
</tr>
<tr>
<td>0x12f900004</td>
<td>普通模式不支持该功能</td>
</tr>
<tr>
<td>0x12f900005</td>
<td>高级模式不支持该功能</td>
</tr>
<tr>
<td>0x12f900006</td>
<td>高级模式的解码库加载失败</td>
</tr>
<tr>
<td>0x12f900008</td>
<td>url格式错误</td>
</tr>
<tr>
<td>0x12f900009</td>
<td>取流超时错误</td>
</tr>
<tr>
<td>0x12f900010</td>
<td>设置或者是获取音量失败，因为没有开启音频的窗口</td>
</tr>
<tr>
<td>0x12f900011</td>
<td>设置的音量不在1-100范围</td>
</tr>
<tr>
<td>0x12f910000</td>
<td>websocket连接失败，请检查网络是否通畅，URL是否正确</td>
</tr>
<tr>
<td>0x12f910010</td>
<td>取流失败</td>
</tr>
<tr>
<td>0x12f910011</td>
<td>流中断，电脑配置过低，程序卡主线程都可能导致流中断</td>
</tr>
<tr>
<td>0x12f910014</td>
<td>没有音频数据</td>
</tr>
<tr>
<td>0x12f910015</td>
<td>未找到对应websocket，取流套接字被动关闭的报错</td>
</tr>
<tr>
<td>0x12f910016</td>
<td>websocket不在连接状态</td>
</tr>
<tr>
<td>0x12f910017</td>
<td>不支持智能信息展示</td>
</tr>
<tr>
<td>0x12f910018</td>
<td>websocket长时间未收到message</td>
</tr>
<tr>
<td>0x12f910019</td>
<td>wss连接失败，原因：端口尚未开通、证书未安装、证书不安全</td>
</tr>
<tr>
<td>0x12f910020</td>
<td>单帧回放时不能暂停</td>
</tr>
<tr>
<td>0x12f910021</td>
<td>已是最大倍速</td>
</tr>
<tr>
<td>0x12f910022</td>
<td>已是最小倍速</td>
</tr>
<tr>
<td>0x12f910023</td>
<td>ws/wss连接超时，默认6s超时时间，原因：网络异常，网络不通</td>
</tr>
<tr>
<td>0x12f910026</td>
<td>jsdecoder1.0解码报错视频编码格式不支持</td>
</tr>
<tr>
<td>0x12f910027</td>
<td>后端取流超时，主动关闭连接（设备突然离线或重启，网络传输超时20s）</td>
</tr>
<tr>
<td>0x12f910028</td>
<td>设置的缓冲区大小无效，大小0-5<em>1024</em>1024，不在该范围的报错</td>
</tr>
<tr>
<td>0x12f910029</td>
<td>普通模式的报错，码流异常导致黑屏,尝试重新取流</td>
</tr>
<tr>
<td>0x12f910031</td>
<td>普通模式下播放卡主会出现</td>
</tr>
<tr>
<td>0x12f910032</td>
<td>码流编码格式普通模式下不支持，可切换高级模式尝试播放</td>
</tr>
<tr>
<td>0x12f920015</td>
<td>未调用停止录像，再次调用开始录像</td>
</tr>
<tr>
<td>0x12f920016</td>
<td>未开启录像调用停止录像接口错误</td>
</tr>
<tr>
<td>0x12f920017</td>
<td>紧急录像目标格式不支持，非ps/mp4</td>
</tr>
<tr>
<td>0x12f920018</td>
<td>紧急录像文件名为null</td>
</tr>
<tr>
<td>0x12f930010</td>
<td>内存不足</td>
</tr>
<tr>
<td>0x12f930011</td>
<td>首帧显示之前无法抓图，请稍后重试</td>
</tr>
<tr>
<td>0x12f950000</td>
<td>采集音频失败，可能是在非https域下使用对讲导致</td>
</tr>
<tr>
<td>0x12f950001</td>
<td>对讲不支持这种音频编码格式</td>
</tr>
</tbody>
</table>
<h2 id="faq">FAQ </h2>
<p>1.Q: Uncaught Error: Site or Page Not Found : <a href="http://localhost/Decoder.data">http://localhost/Decoder.data</a><br>
A: 把 decoder.data 文件放在根目录下<br>
2.Q: 实测性能和给的性能数据不符，使用了chrome92版本，没有加跨域隔离导致<br>
A: http头增加跨域隔离，Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin 并在https环境下使用。</p>
</div></body></html>
</div>
</body>
</html>