zhaobao
/
anquan-sccl


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756
							<!--
  使用说明：
  1. 本页面为示例demo
  2. 使用过程需要js,css,解码器（decoderPath,filePath）资源路径（/ezuikit-talk/ezuikit_v2.6.4/XX）更改为项目实际路径，引入依赖。
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script>
        // 加载js
        function addJs(filepath, callback) {
            var oJs = document.createElement("script");
            oJs.setAttribute("src", filepath);
            oJs.onload = callback;
            document.getElementsByTagName("head")[0].appendChild(oJs);
        }

        // 加载css
        function addCss(filepath, callback) {
            var oJs = document.createElement('link');
            oJs.rel = 'stylesheet';
            oJs.type = 'text/css';
            oJs.href = filepath;
            oJs.onload = callback;
            document.getElementsByTagName("head")[0].appendChild(oJs);
        }

        console.log("ezuikitTalkData------", ezuikitTalkData)
        var layerPath = ezuikitTalkData.decoderPath + '/js/layer/layer.js';
        var ezuikitPath = ezuikitTalkData.decoderPath + '/ezuikit.js';
        var ezuikitTalkPath = ezuikitTalkData.decoderPath + '/ezuikit-talk.js';
        addJs(ezuikitTalkPath, function () {
            EZUITalk = new EZUITalk({
                accessToken: ezuikitTalkData.accessToken,
                url: url,
                filePath: ezuikitTalkData.decoderPath + '/js/talk/',
                handleError: function (err) {
                    layer.msg("网络错误，请稍后再试");
                }
            });
        })
        addJs(ezuikitPath, function () {
        })
        addJs(layerPath, function () {
        })
        var liveCssPath = ezuikitTalkData.decoderPath + '/css/live.css';
        var recoderCssPath = ezuikitTalkData.decoderPath + '/css/recoder.css';
        addCss(liveCssPath, function () {
        });
        addCss(recoderCssPath, function () {
        });
    </script>
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background: black;
        }

        .disabled {
            cursor: not-allowed;
        }

        .iframe-btn-container {
            display: inline-block;
            width: 100%;
            height: 32px;
            text-align: left;
            z-index: 1000;
            position: absolute;
            bottom: 0px;
            left: 0;
            color: #fff;
            background: rgba(0, 0, 0, 0.65);
            padding: 10px 0;
            cursor: pointer;
        }

        .iframe-btn-container span {
            display: inline-block;
            margin-left: 20px;
        }

        .iframe-btn-container span:last-child {
            position: absolute;
            right: 10px;
        }

        .in {
            opacity: 1;
        }

        .hide {
            display: none !important;
        }

        .transparency {
            opacity: 0;
        }
    </style>
</head>

<body>
<script>
    var startSave = false;
    var playing = false;
    var decoder;
</script>
<div class="panel-top">
    <div id="deviceSerial" class="deviceSerial"></div>
    <div class="contros">
        <!-- 拍照 -->
        <span title="截图">
        <svg id="capturePicture" title="截图" t="1578882764585" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="5958" width="24" height="24">
          <path
                  d="M887.296 315.904h-153.6c-51.2 0-68.096-102.4-119.296-102.4H392.704c-34.304 0-51.2 102.4-102.4 102.4h-153.6c-29.696 0-51.2 21.504-51.2 51.2v439.296c0 25.6 21.504 47.104 51.2 47.104h751.104c29.696 0 51.2-21.504 51.2-51.2v-435.2c-0.512-30.208-21.504-51.2-51.712-51.2zM512 768c-115.2 0-204.8-89.6-204.8-200.704s89.6-200.704 204.8-200.704 204.8 89.6 204.8 200.704-93.696 200.704-204.8 200.704z m247.296-354.304c-12.8 0-25.6-12.8-25.6-25.6s12.8-25.6 25.6-25.6 25.6 12.8 25.6 25.6c0 17.408-12.8 25.6-25.6 25.6zM256 264.704c0-8.704-8.704-16.896-16.896-16.896h-51.2c-8.704 0-16.896 8.704-16.896 16.896V281.6H256v-16.896z m256 148.992c-85.504 0-153.6 68.096-153.6 153.6s68.096 153.6 153.6 153.6 153.6-68.096 153.6-153.6-68.096-153.6-153.6-153.6z"
                  fill="#ffffff" p-id="5959"></path>
        </svg>
      </span>
        <!-- 录制 -->
        <span title="开始录像">
        <svg id="startSave" t="1578882716693" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3782" width="24" height="24">
          <path
                  d="M915.2 729.6l-128-76.8c-25.6-12.8-44.8-32-44.8-51.2V435.2c0-25.6 19.2-38.4 44.8-51.2l128-76.8c25.6-12.8 44.8 0 44.8 19.2V704c0 32-19.2 38.4-44.8 25.6z m-332.8 89.6H96c-51.2 0-89.6-38.4-89.6-89.6V332.8c0-51.2 38.4-89.6 89.6-89.6h486.4c51.2 0 89.6 38.4 89.6 89.6v396.8c0 51.2-38.4 89.6-89.6 89.6zM192 364.8c-32 6.4-57.6 32-64 64-12.8 57.6 38.4 115.2 96 102.4 32-6.4 57.6-32 64-70.4 12.8-57.6-38.4-108.8-96-96z m0 0"
                  p-id="3783" fill="#ffffff"></path>
        </svg>
      </span>
        <!-- 录制 -->
        <span title="结束录像">
        <svg id="stopSave" t="1578882716693" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3782" width="24" height="24">
          <path
                  d="M915.2 729.6l-128-76.8c-25.6-12.8-44.8-32-44.8-51.2V435.2c0-25.6 19.2-38.4 44.8-51.2l128-76.8c25.6-12.8 44.8 0 44.8 19.2V704c0 32-19.2 38.4-44.8 25.6z m-332.8 89.6H96c-51.2 0-89.6-38.4-89.6-89.6V332.8c0-51.2 38.4-89.6 89.6-89.6h486.4c51.2 0 89.6 38.4 89.6 89.6v396.8c0 51.2-38.4 89.6-89.6 89.6zM192 364.8c-32 6.4-57.6 32-64 64-12.8 57.6 38.4 115.2 96 102.4 32-6.4 57.6-32 64-70.4 12.8-57.6-38.4-108.8-96-96z m0 0"
                  p-id="3783" fill="red"></path>
        </svg>
      </span>
        <!-- 电子放大 -->
        <span title="开启电子放大">
        <svg id="enableZoom" t="1578882639834" class="icon" viewBox="0 0 1000 1000" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2227" width="24" height="24">
          <path
                  d="M830.6119 441.1089c0-193.7756-157.0939-350.8641-350.8775-350.8641S128.8559 247.3333 128.8559 441.1089 285.9508 791.972 479.7344 791.972 830.6119 634.8845 830.6119 441.1089zM483.2821 710.4863c-146.7975 0-265.8187-118.9953-265.8187-265.8088S336.4847 178.8697 483.2821 178.8697s265.8197 118.9953 265.8197 265.8078S630.0796 710.4863 483.2821 710.4863zM770.6031 653.5739l-72.6417 75.9485 141.6917 160.1814 82.0737-90.0739L770.6031 653.5739zM527.5849 267.4727h-88.60655762279428v132.90489048425167H306.0690340253259v88.60292721534799h132.90933675248866v132.9038911617923h88.60655762279428V488.9794719180395h132.90933675248866v-88.60292721534799H527.5849284006089V267.4726535408993z"
                  p-id="2228" fill="#ffffff"></path>
        </svg>
      </span>
        <span title="关闭电子放大">
        <svg id="closeZoom" t="1578882639834" class="icon" viewBox="0 0 1000 1000" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2227" width="24" height="24">
          <path
                  d="M830.6119 441.1089c0-193.7756-157.0939-350.8641-350.8775-350.8641S128.8559 247.3333 128.8559 441.1089 285.9508 791.972 479.7344 791.972 830.6119 634.8845 830.6119 441.1089zM483.2821 710.4863c-146.7975 0-265.8187-118.9953-265.8187-265.8088S336.4847 178.8697 483.2821 178.8697s265.8197 118.9953 265.8197 265.8078S630.0796 710.4863 483.2821 710.4863zM770.6031 653.5739l-72.6417 75.9485 141.6917 160.1814 82.0737-90.0739L770.6031 653.5739zM527.5849 267.4727h-88.60655762279428v132.90489048425167H306.0690340253259v88.60292721534799h132.90933675248866v132.9038911617923h88.60655762279428V488.9794719180395h132.90933675248866v-88.60292721534799H527.5849284006089V267.4726535408993z"
                  p-id="2228" fill="red"></path>
        </svg>
      </span>
    </div>

</div>
<div id="playWind"></div>
<div id="audioleft" style="display: none;"></div>
<div id="audioright" style="display: none;"></div>
<div class="audio-controls">
    <!-- 对讲 -->
    <div class="ptp-talk off" id="startTalk">
      <span title="对讲">
        <svg t="1581930496966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1641" width="16" height="16">
          <path
                  d="M715.648 647.872c-30.208-22.336-61.568 39.36-100.992 77.44-39.36 38.08-34.112 31.488-123.392-17.088S311.488 540.224 280 491.648C248.448 443.072 265.472 424.704 265.472 424.704s78.72-62.976 97.152-81.344c18.368-18.368 13.12-30.208 13.12-30.208l-128.64-190.144c-23.616-5.184-64.32 5.12-128.576 57.6C54.208 233.088 30.592 353.856 151.296 575.68c120.768 221.824 347.84 330.752 485.568 374.08 137.856 43.328 228.416-61.696 249.408-103.68 21.056-41.984 13.12-85.312 13.12-85.312S745.856 670.208 715.648 647.872z"
                  p-id="1642" fill="#ffffff"></path>
          <path
                  d="M715.328 64C580.992 64 472.192 172.864 472.192 307.2s108.8 243.2 243.136 243.2 243.2-108.864 243.2-243.2S849.6 64 715.328 64zM715.328 461.056c-84.992 0-153.856-68.864-153.856-153.856s68.864-153.856 153.856-153.856 153.856 68.928 153.856 153.856S800.32 461.056 715.328 461.056z"
                  p-id="1643" fill="#ffffff"></path>
          <path
                  d="M777.472 277.376c-18.176 0-32.96-14.784-32.96-33.024 0-8.448 3.136-16.064 8.32-21.888-11.52-5.12-24.128-8-37.568-8-51.2 0-92.672 41.472-92.672 92.736s41.472 92.736 92.672 92.736S808.064 358.4 808.064 307.2c0-13.696-3.072-26.688-8.384-38.4C793.728 274.112 786.048 277.376 777.472 277.376zM715.328 340.928c-18.624 0-33.664-15.104-33.664-33.728 0-18.624 15.04-33.728 33.664-33.728 18.688 0 33.728 15.104 33.728 33.728C749.056 325.824 734.016 340.928 715.328 340.928z"
                  p-id="1644" fill="#ffffff"></path>
        </svg>
      </span>
        <span>开启对讲</span>
    </div>
    <div class="ptp-talk on" id="stopTalk">
      <span title="对讲">
        <svg t="1581930496966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1641" width="16" height="16">
          <path
                  d="M715.648 647.872c-30.208-22.336-61.568 39.36-100.992 77.44-39.36 38.08-34.112 31.488-123.392-17.088S311.488 540.224 280 491.648C248.448 443.072 265.472 424.704 265.472 424.704s78.72-62.976 97.152-81.344c18.368-18.368 13.12-30.208 13.12-30.208l-128.64-190.144c-23.616-5.184-64.32 5.12-128.576 57.6C54.208 233.088 30.592 353.856 151.296 575.68c120.768 221.824 347.84 330.752 485.568 374.08 137.856 43.328 228.416-61.696 249.408-103.68 21.056-41.984 13.12-85.312 13.12-85.312S745.856 670.208 715.648 647.872z"
                  p-id="1642" fill="#ff0000"></path>
          <path
                  d="M715.328 64C580.992 64 472.192 172.864 472.192 307.2s108.8 243.2 243.136 243.2 243.2-108.864 243.2-243.2S849.6 64 715.328 64zM715.328 461.056c-84.992 0-153.856-68.864-153.856-153.856s68.864-153.856 153.856-153.856 153.856 68.928 153.856 153.856S800.32 461.056 715.328 461.056z"
                  p-id="1643" fill="#ff0000"></path>
          <path
                  d="M777.472 277.376c-18.176 0-32.96-14.784-32.96-33.024 0-8.448 3.136-16.064 8.32-21.888-11.52-5.12-24.128-8-37.568-8-51.2 0-92.672 41.472-92.672 92.736s41.472 92.736 92.672 92.736S808.064 358.4 808.064 307.2c0-13.696-3.072-26.688-8.384-38.4C793.728 274.112 786.048 277.376 777.472 277.376zM715.328 340.928c-18.624 0-33.664-15.104-33.664-33.728 0-18.624 15.04-33.728 33.664-33.728 18.688 0 33.728 15.104 33.728 33.728C749.056 325.824 734.016 340.928 715.328 340.928z"
                  p-id="1644" fill="#ff0000"></path>
        </svg>
      </span>
        <span>关闭对讲</span>
    </div>
    <!-- 语音播报 -->
    <div class="broadcast off" id="startBroadcast">
      <span title="语音播报">
        <svg t="1583561695846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1126" width="16" height="16">
          <path
                  d="M513.82044445 964.38044445c-8.192 0-15.47377778-2.73066667-21.84533334-8.192 0 0-46.42133333-41.87022222-99.21422222-86.47111112-89.20177778-73.728-117.41866667-88.29155555-123.79022222-90.112H35.04355555c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666666V271.70133333c0-14.56355555 11.83288889-27.30666667 26.39644444-27.30666666H246.21511111c7.28177778-2.73066667 37.31911111-15.47377778 137.44355556-91.02222222 58.25422222-43.69066667 111.04711111-86.47111111 111.04711111-86.47111112 5.46133333-4.55111111 12.74311111-7.28177778 20.02488889-7.28177778 4.55111111 0 10.01244445 0.91022222 14.56355555 3.6408889 10.92266667 5.46133333 18.20444445 17.29422222 18.20444445 30.03733333v837.40444444c0 12.74311111-7.28177778 25.48622222-19.11466667 30.94755556-5.46133333 1.82044445-10.01244445 2.73066667-14.56355555 2.73066667zM270.79111111 724.992c19.11466667 0 48.24177778 8.192 167.48088889 106.496 16.384 13.65333333 33.67822222 28.21688889 51.88266667 43.69066667l5.46133333 4.55111111V139.71911111l-5.46133333 3.64088889c-22.75555555 17.29422222-44.60088889 34.58844445-65.536 50.06222222C293.54666667 291.72622222 264.41955555 299.008 245.30488889 299.008H82.37511111c-20.02488889 0-21.84533333 12.74311111-21.84533333 26.39644445V694.04444445c0 23.66577778 6.37155555 30.03733333 28.21688889 30.03733333h180.224l1.82044444 0.91022222z m520.64711111 162.01955555c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666666 0-11.83288889 8.192-20.02488889 16.384-24.576 112.86755555-67.35644445 182.04444445-191.14666667 182.04444444-324.03911111 0-132.89244445-70.08711111-256.68266667-182.04444444-324.03911111-10.01244445-5.46133333-15.47377778-14.56355555-15.47377778-24.576 0-14.56355555 11.83288889-27.30666667 26.39644445-27.30666667 5.46133333 0 10.01244445 1.82044445 16.384 5.46133333 128.34133333 76.45866667 207.53066667 218.45333333 207.53066666 369.55022222 0 152.00711111-80.09955555 293.09155555-208.44088889 369.55022223-6.37155555 5.46133333-10.92266667 7.28177778-16.384 7.28177777z m-90.112-152.91733333c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666667 0-10.01244445 4.55111111-18.20444445 12.74311111-23.66577777 61.89511111-34.58844445 100.12444445-100.12444445 100.12444444-171.12177778 0-70.08711111-37.31911111-134.71288889-96.48355555-170.21155555-8.192-4.55111111-12.74311111-13.65333333-12.74311111-23.66577778 0-14.56355555 11.83288889-27.30666667 26.39644444-27.30666667 4.55111111 0 11.83288889 2.73066667 15.47377778 4.55111111 74.63822222 44.60088889 121.96977778 127.43111111 121.96977778 215.72266667 0 90.112-48.24177778 173.85244445-125.61066667 218.45333333-1.82044445 0-9.10222222 4.55111111-15.47377778 4.55111111z"
                  fill="#ffffff" p-id="1127"></path>
        </svg>
      </span>
        <span>语音播报</span>
    </div>
    <div class="broadcast on" id="stopBroadcast">
        <div class="pop-hover">
            <div class="pop-hover-content">
                <div class="vioce-list" id="voice-list">
                    <ul>
                        <!-- <li id="voice-custom">自定义语音</li> -->
                    </ul>
                    <div id="voice-list-end"></div>
                </div>
                <div id="voice-custom" style="text-align: center;">自定义语音</div>
            </div>
        </div>
        <span title="语音播报">
        <svg t="1583561695846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1126" width="16" height="16">
          <path
                  d="M513.82044445 964.38044445c-8.192 0-15.47377778-2.73066667-21.84533334-8.192 0 0-46.42133333-41.87022222-99.21422222-86.47111112-89.20177778-73.728-117.41866667-88.29155555-123.79022222-90.112H35.04355555c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666666V271.70133333c0-14.56355555 11.83288889-27.30666667 26.39644444-27.30666666H246.21511111c7.28177778-2.73066667 37.31911111-15.47377778 137.44355556-91.02222222 58.25422222-43.69066667 111.04711111-86.47111111 111.04711111-86.47111112 5.46133333-4.55111111 12.74311111-7.28177778 20.02488889-7.28177778 4.55111111 0 10.01244445 0.91022222 14.56355555 3.6408889 10.92266667 5.46133333 18.20444445 17.29422222 18.20444445 30.03733333v837.40444444c0 12.74311111-7.28177778 25.48622222-19.11466667 30.94755556-5.46133333 1.82044445-10.01244445 2.73066667-14.56355555 2.73066667zM270.79111111 724.992c19.11466667 0 48.24177778 8.192 167.48088889 106.496 16.384 13.65333333 33.67822222 28.21688889 51.88266667 43.69066667l5.46133333 4.55111111V139.71911111l-5.46133333 3.64088889c-22.75555555 17.29422222-44.60088889 34.58844445-65.536 50.06222222C293.54666667 291.72622222 264.41955555 299.008 245.30488889 299.008H82.37511111c-20.02488889 0-21.84533333 12.74311111-21.84533333 26.39644445V694.04444445c0 23.66577778 6.37155555 30.03733333 28.21688889 30.03733333h180.224l1.82044444 0.91022222z m520.64711111 162.01955555c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666666 0-11.83288889 8.192-20.02488889 16.384-24.576 112.86755555-67.35644445 182.04444445-191.14666667 182.04444444-324.03911111 0-132.89244445-70.08711111-256.68266667-182.04444444-324.03911111-10.01244445-5.46133333-15.47377778-14.56355555-15.47377778-24.576 0-14.56355555 11.83288889-27.30666667 26.39644445-27.30666667 5.46133333 0 10.01244445 1.82044445 16.384 5.46133333 128.34133333 76.45866667 207.53066667 218.45333333 207.53066666 369.55022222 0 152.00711111-80.09955555 293.09155555-208.44088889 369.55022223-6.37155555 5.46133333-10.92266667 7.28177778-16.384 7.28177777z m-90.112-152.91733333c-14.56355555 0-26.39644445-11.83288889-26.39644444-27.30666667 0-10.01244445 4.55111111-18.20444445 12.74311111-23.66577777 61.89511111-34.58844445 100.12444445-100.12444445 100.12444444-171.12177778 0-70.08711111-37.31911111-134.71288889-96.48355555-170.21155555-8.192-4.55111111-12.74311111-13.65333333-12.74311111-23.66577778 0-14.56355555 11.83288889-27.30666667 26.39644444-27.30666667 4.55111111 0 11.83288889 2.73066667 15.47377778 4.55111111 74.63822222 44.60088889 121.96977778 127.43111111 121.96977778 215.72266667 0 90.112-48.24177778 173.85244445-125.61066667 218.45333333-1.82044445 0-9.10222222 4.55111111-15.47377778 4.55111111z"
                  fill="#ff0000" p-id="1127"></path>
        </svg>
      </span>
        <span>语音播报</span>
    </div>
    <div class="time-area" id="time-area">
        00:00
    </div>
    <!-- 按住说话 -->
    <div class="speak off" id="startSpeak">
      <span title="按住说话">
        <svg t="1581994757678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1639" width="16" height="16">
          <path
                  d="M757.059829 393.846154v-52.512821h262.564103v52.512821H757.059829z m-420.102564 481.367521v96.273504h175.042735a8.752137 8.752137 0 0 1 8.752137 8.752137v35.008547a8.752137 8.752137 0 0 1-8.752137 8.752137H109.401709a8.752137 8.752137 0 0 1-8.752136-8.752137v-35.008547a8.752137 8.752137 0 0 1 8.752136-8.752137h175.042735v-96.273504C129.767932 875.213675 4.376068 749.821812 4.376068 595.145299V463.863248a26.25641 26.25641 0 1 1 52.512821 0v113.777778c0 140.174222 113.637744 253.811966 253.811966 253.811965s253.811966-113.637744 253.811966-253.811965V463.863248a26.25641 26.25641 0 1 1 52.51282 0v131.282051c0 154.676513-125.391863 280.068376-280.068376 280.068376z m-26.25641-96.273504c-111.178393 0-201.299145-90.120752-201.299146-201.299145V201.299145C109.401709 90.120752 199.522462 0 310.700855 0s201.299145 90.120752 201.299145 201.299145v376.341881c0 111.178393-90.120752 201.299145-201.299145 201.299145z m691.418803-280.068376H757.059829v-52.512821h245.059829v52.512821z m-17.504273 105.025641H757.059829v-52.512821h227.555556v52.512821z m-17.504274 105.025641H757.059829v-52.512821h210.051282v52.512821z m-8.752137 105.025641H757.059829v-52.512821h201.299145v52.512821z m-17.504273 105.025641H757.059829v-52.512821h183.794872v52.512821z m-26.25641 105.025641H757.059829v-52.512821h157.538462v52.512821z"
                  p-id="1640" fill="#ffffff"></path>
        </svg>
      </span>
        <span>按住说话</span>
    </div>
    <div class="speak on" id="stopSpeak">
      <span title="按住说话">
        <svg t="1581994757678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1639" width="16" height="16">
          <path
                  d="M757.059829 393.846154v-52.512821h262.564103v52.512821H757.059829z m-420.102564 481.367521v96.273504h175.042735a8.752137 8.752137 0 0 1 8.752137 8.752137v35.008547a8.752137 8.752137 0 0 1-8.752137 8.752137H109.401709a8.752137 8.752137 0 0 1-8.752136-8.752137v-35.008547a8.752137 8.752137 0 0 1 8.752136-8.752137h175.042735v-96.273504C129.767932 875.213675 4.376068 749.821812 4.376068 595.145299V463.863248a26.25641 26.25641 0 1 1 52.512821 0v113.777778c0 140.174222 113.637744 253.811966 253.811966 253.811965s253.811966-113.637744 253.811966-253.811965V463.863248a26.25641 26.25641 0 1 1 52.51282 0v131.282051c0 154.676513-125.391863 280.068376-280.068376 280.068376z m-26.25641-96.273504c-111.178393 0-201.299145-90.120752-201.299146-201.299145V201.299145C109.401709 90.120752 199.522462 0 310.700855 0s201.299145 90.120752 201.299145 201.299145v376.341881c0 111.178393-90.120752 201.299145-201.299145 201.299145z m691.418803-280.068376H757.059829v-52.512821h245.059829v52.512821z m-17.504273 105.025641H757.059829v-52.512821h227.555556v52.512821z m-17.504274 105.025641H757.059829v-52.512821h210.051282v52.512821z m-8.752137 105.025641H757.059829v-52.512821h201.299145v52.512821z m-17.504273 105.025641H757.059829v-52.512821h183.794872v52.512821z m-26.25641 105.025641H757.059829v-52.512821h157.538462v52.512821z"
                  p-id="1640" fill="#ff0000"></path>
        </svg>
      </span>
        <span>松开发送</span>
    </div>
    <div class="contros">
        <!--  高清 -->
        <span id="video-hd"></span>
        <span title="全屏">
        <svg id="fullScreen" t="1578020167938" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="5035" width="16" height="16">
          <path
                  d="M348.373333 625.706667l-128 128-64 64v-128a33.28 33.28 0 0 0-35.413333-35.413334A33.493333 33.493333 0 0 0 85.333333 689.706667v213.333333A33.706667 33.706667 0 0 0 120.96 938.666667h213.333333a35.626667 35.626667 0 0 0 0-71.04h-128l64-64 128-128a35.2 35.2 0 0 0-49.92-49.92zM206.293333 156.373333h128a33.28 33.28 0 0 0 35.413334-35.413333A33.493333 33.493333 0 0 0 334.293333 85.333333H113.706667c-7.04 0-14.08 7.04-21.333334 14.293334a26.026667 26.026667 0 0 0-7.04 21.333333v213.333333a33.493333 33.493333 0 0 0 35.626667 35.413334 33.28 33.28 0 0 0 35.413333-35.413334v-128l192 192a35.2 35.2 0 0 0 49.92-49.92zM903.04 85.333333h-213.333333a33.493333 33.493333 0 0 0-35.413334 35.626667 33.28 33.28 0 0 0 35.413334 35.413333h128l-64 64-128 128a35.2 35.2 0 0 0 49.92 49.92l128-128 64-64v128a35.626667 35.626667 0 0 0 71.04 0v-213.333333A33.706667 33.706667 0 0 0 903.04 85.333333zM903.04 654.293333a33.28 33.28 0 0 0-35.413333 35.413334v128l-64-64-128-128a35.2 35.2 0 0 0-49.92 49.92l128 128 64 64h-128a35.626667 35.626667 0 0 0 0 71.04h213.333333A33.706667 33.706667 0 0 0 938.666667 903.04v-213.333333a33.493333 33.493333 0 0 0-35.626667-35.413334z"
                  p-id="5036" fill="#ffffff"></path>
        </svg>
      </span>
    </div>

</div>
<script>
    var url = ezuikitTalkData.ezopen;
    var accessToken = ezuikitTalkData.accessToken;
    addJs(ezuikitPath, function () {
        $("#stopSave").hide();
        $("#closeZoom").hide();
        var userName = 'aa';

        function handleError(e) {
            console.log("捕获到错误", e);
            // log(JSON.stringify(e),'error');
            //layer.msg(e)
        }

        function handleSuccess() {
            console.log("播放成功回调函数，此处可执行播放成功后续动作");
            playing = true;
            console.log("默认开启声音");
            decoder.openSound(0);
        }

        var autoplay = 1;
        var audioId = 0;
        var templete = 2;
        var deviceSerial = url.split('/')[3];
        var channelNo = url.split('/')[4].split('.')[0];
        // 查询设备名称
        // $.ajax({
        //   url: "http://open.ys7.com/api/lapp/device/info",
        //   type: 'POST',
        //   data: {
        //     accessToken: accessToken,
        //     deviceSerial: deviceSerial
        //   },
        //   dataType: 'json',
        //   success: function (data) {
        //     if (data.code == 200 && data.data) {
        //       // 设备序列号
        //       $("#deviceSerial").text(data.data.deviceName);
        //     }
        //   },
        //   error: function (err) {
        //     console.log("err", err);
        //   }
        // });
        // 查询设备名称
        //  $.ajax({
        //   url: "https://open.ys7.com/api/lapp/device/capacity",
        //   type: 'POST',
        //   data: {
        //     accessToken: accessToken,
        //     deviceSerial: deviceSerial
        //   },
        //   dataType: 'json',
        //   success: function (data) {
        //     if (data.code == 200 && data.data) {
        //       // 设备序列号
        //       var isSupportTalk = data.data.support_talk;
        //       if(isSupportTalk == '0'){
        //         layer.msg("该设备不支持全双工对讲，无法使用语音模板");
        //         // layer.msg("该设备不支持全双工对讲，无法使用语音模板")
        //       }
        //     }
        //   },
        //   error: function (err) {
        //     console.log("err", err);
        //   }
        // });
        if (autoplay == '1') {
            init();
        }

        // var validCode = getQueryString('validCode');
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        $("#playWind").height(height - (48 * 2));
        $("#video-hd").text(url.indexOf('hd') === -1 ? '标清' : '高清');

        function init() {
            try {
                decoder && decoder.stop();
            } catch (e) {
                console.log("E", e);
            }
            $("#video-hd").text(url.indexOf('hd') === -1 ? '标清' : '高清')
            setTimeout(() => {
                decoder = new EZUIKit.EZUIPlayer({
                    id: "playWind",
                    autoplay: true,
                    audioId: audioId,
                    url: url,
                    accessToken: ezuikitTalkData.accessToken,
                    decoderPath: ezuikitTalkData.decoderPath,
                    width: width,
                    height: height - (48 * 2),
                    handleError: handleError,
                    handleSuccess: handleSuccess,
                    // env: {
                    //   domain: window.location.protocol + "//" + window.location.host
                    // }
                    // loading: {svg: '<svg t="1567688443823" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="64" height="64"><path d="M490.766 47.13C247.531 67.91 50.692 251.203 10.699 494.152c-10.701 64.999-9.326 99.794 5.062 128.192 44.677 88.182 170.83 87.708 214.77-0.805 10.384-20.912 12.048-31.802 11.744-76.871-0.801-118.767 51.882-218.607 149.086-282.532 201.695-132.639 476.291-24.392 545.849 215.177 70.275 242.029-107.591 493.681-364.481 515.682-25.367 2.174-18.056 3.428 16.083 2.757 310.027-6.081 520.19-314.986 418.493-615.128-72.561-214.16-287.678-353.047-516.54-333.493z" fill="#ffffff" p-id="1561"></path></svg>'},
                });
            }, 100);
            // 延时函数 -- iframe未加载完成，宽高获取不到
        }

        $("#capturePicture").click(function () {
            /*截图方法1*/
            // decoder.capturePicture(0,'default');
            /*截图方法2*/
            var capturePicturePromise = decoder.capturePicture(0, 'default');
            capturePicturePromise.then(function (data) {
                console.log("截图成功，用户执行关闭成功后的操作", data);
            })
        })
        $("#startSave").click(function () {
            // decoder.startSave(0, (new Date().getTime() + 'video'));
            /*开始录制方法2*/
            var startSavePromise = decoder.startSave(0, (new Date().getTime() + 'video'));
            startSavePromise.then(function (data) {
                console.log("start save success", startSavePromise);
                $("#startSave").hide();
                $("#stopSave").show();
            })
                .catch(function (error) {
                    console.log("start Save error", error)
                })
        })
        $("#stopSave").click(function () {
            /*结束录制方法1*/
            // decoder.stopSave(0);
            /*结束录制方法2*/
            var stopSavePromise = decoder.stopSave(0);
            stopSavePromise.then(function (data) {
                console.log("stop save success", stopSavePromise)
                $("#stopSave").hide();
                $("#startSave").show();
            })
                .catch(function (error) {
                    console.log("stop Save error", error)
                })
        })
        $("#enableZoom").click(function () {
            decoder.enableZoom();
            $("#enableZoom").hide();
            $("#closeZoom").show();
        })
        $("#closeZoom").click(function () {
            decoder.closeZoom();
            $("#closeZoom").hide();
            $("#enableZoom").show();
        })
        $("#fullScreen").on('click', function () {
            decoder.fullScreen();
        });
        $("#video-hd").on('click', function () {
            if (url.indexOf('hd') === -1) {
                url = url.replace('.live', '.hd.live');
                $("#video-hd").text('高清');
            } else {
                url = url.replace('.hd.live', '.live');
                $("#video-hd").text('标清');
            }
            //   var options = {
            //     accessToken: accessToken,
            //     url: url,
            //   }
            init();
        })

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        function actionLog(e) {
            var extra = "";
            if (e && e.currentTarget && e.currentTarget.getAttribute("data-click-dclog")) {
                extra = e.currentTarget.getAttribute("data-click-dclog");
            }
        }

        function dclog(dclogUrl) {
            // 上报一次本地统计信息
            const img = new Image();
            img.src = dclogUrl;
        }
    })
</script>
<script>
    $(function () {
        // 初始化
        $("#stopTalk").hide();
        $("#stopBroadcast").hide();
        $("#stopSpeak").hide();
        $("#startSpeak").hide();
        var countTimer;
        // 录音时长
        var recodeTime = 0;
        var recodeTimer;
        var padding = false; // 是否等待接口响应

        $("#startTalk").on('click', function () {
            if (padding) {
                layer.msg("等待服务响应，请稍后重试")
                return false;
            }
            if (countTimer) {
                layer.msg("语音设备正忙，请稍后重试")
                return false;
            } else {
                $("#startTalk").hide();
                $("#stopTalk").show();
                countTime('add', 0);
                console.log("开始对讲，关闭声音")
                decoder && decoder.closeSound(0);
                EZUITalk.startTalk();
            }
        })
        $("#stopTalk").on('click', function () {
            $("#startTalk").show();
            $("#stopTalk").hide();
            countTime('destory', 0);
            console.log("结束对讲，开启声音")
            EZUITalk.stopTalk();
            decoder && decoder.openSound(0);
        })

        $("#startBroadcast").on('click', function () {
            $("#startBroadcast").hide();
            $("#stopBroadcast").show();
        })
        $("#stopBroadcast").on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            $("#startBroadcast").show();
            $("#stopBroadcast").hide();
        })

        document.getElementById('startSpeak').addEventListener('mousedown', function (e) {
            console.log("鼠标按下");
            if (padding) {
                layer.msg("等待服务响应，请稍后重试")
                return false;
            }
            if (countTimer) {
                layer.msg("语音设备正忙，请稍后重试")
                return false;
            }
            $("#startSpeak").hide();
            $("#stopSpeak").show();
            countTime('add', 0);
            voiceInit();
            console.log("开始录音，关闭音频");
            decoder && decoder.closeSound(0);
            setTimeout(() => {
                recodeTime = 0;
                startRecording();
                if (recodeTimer) { // 先清空计数器
                    clearInterval(recodeTimer);
                }
                recodeTimer = setInterval(function () {
                    if (recodeTime >= 59) {
                        stopSpeakFun()
                        layer.msg("不超过1分钟")

                    } else {
                        recodeTime = recodeTime + 1;
                    }
                }, 1000);
            }, 1000);
        })
        document.getElementById('stopSpeak').addEventListener('mouseup', function (e) {
            console.log("鼠标松开");
            stopSpeakFun()
        })

        function stopSpeakFun() {
            countTime('destory', 0);
            $("#startSpeak").show();
            $("#startSpeak").hide();
            $("#stopSpeak").hide();
            if (recodeTime < 1) {
                layer.msg("说话时间过短");
                clearInterval(recodeTimer);
                return false;
            }
            wavUpload();
            clearInterval(recodeTimer);
        }

        // 时间计数
        function countTime(type, start = 0) {
            clearInterval(countTimer);
            if (type === 'add') {
                var i = start;
                countTimer = setInterval(function () {
                    ++i;
                    document.getElementById("time-area").innerHTML = formatSeconds(i);
                }, 1000);

            } else if (type === 'sub') {
                var i = start;
                countTimer = setInterval(function () {
                    if (i > 0) {
                        i--;
                        document.getElementById("time-area").innerHTML = formatSeconds(i);
                    } else {
                        clearInterval(countTimer);
                        countTimer = undefined;
                        console.log("倒计时结束，开启声音");
                        decoder.openSound(0);
                    }
                }, 1000);
            } else if (type === 'destory') {
                clearInterval(countTimer);
                countTimer = undefined;
                document.getElementById("time-area").innerHTML = '00:00';
            }

            //将秒数转换为时分秒格式
            function formatSeconds(value) {

                var theTime = parseInt(value);// 秒
                var middle = 0;// 分
                var hour = 0;// 小时
                var secondV = '00';
                var minV = '00';
                var hourV = '00'

                if (theTime > 59) {
                    middle = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
                    if (middle > 59) {
                        hour = parseInt(middle / 60);
                        middle = parseInt(middle % 60);
                    }
                }
                secondV = parseInt(theTime) > 9 ? parseInt(theTime) : ('0' + parseInt(theTime));
                minV = parseInt(middle) > 9 ? parseInt(middle) : ('0' + parseInt(middle));
                hourV = (parseInt(hour) > 9 ? parseInt(hour) : ('0' + parseInt(hour)));
                if (hour > 0) {
                    return hourV + ':' + minV + ':' + secondV;
                } else if (middle > 0) {
                    return minV + ':' + secondV;
                } else {
                    return '00:' + secondV;
                }
            }
        }
    })
</script>
<script>
    var hasMore = false;
    var pageSize = 5;
    var page = 0;
    var loading = false;
    var fetchDefaultList = false;
    fetchVoiceList(0);
    $("#voice-custom").on("click", function () {
        console.log("点击自定义语音");
        // console.log
        $("#startSpeak").show();

    })

    function fetchVoiceList(page) {
        console.log("fetchVoiceList", page)
        loading = true;
        $.ajax({
            url: "https://open.ys7.com/api/lapp/voice/query",
            type: 'POST',
            data: {
                accessToken: ezuikitTalkData.accessToken,
                pageStart: page,
                pageSize: 5,
                default: fetchDefaultList ? 'true' : 'false'
            },
            dataType: 'json',
            success: function (data) {
                console.log("data.data", data.data)
                if (data.code == 200) {
                    randerVoliceList(data.data, 5);
                    page = data.page.page;
                    if (page == 0 && data.data.length == 0 && !fetchDefaultList) {// 获取用户语音为空
                        fetchDefaultList = true;
                        fetchVoiceList(0);
                    }
                }
            },
            error: function (err) {
                console.log("err", err);
            }
        });
    }

    function randerVoliceList(data, pageSize) {
        console.log("renderVoliceList")
        if (data && data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                $("#voice-list ul").append("<li class='voice-item' id='voice-item-" + i + "' data-time=" + (data[i]["duration"] || 20) + " data-url=" + data[i]["fileUrl"] + ">" + (data[i]["voiceName"].length > 10 ? (data[i]["voiceName"].substr(0, 10) + "...") : data[i]["voiceName"]) + "</li>");
            }
        }
        $(".voice-item").on('click', function (e) {
            //   console.log("d点击voice-item",e,e.target,e.target.dataset.url);
            if (padding) {
                layer.msg("等待服务响应，请稍后重试")
                return false;
            }
            if (countTimer) {
                layer.msg("语音设备正忙，请稍后重试")
                return false;
            }
            var voiceUrl = e.target.dataset.url;
            var time = e.target.dataset.time;
            playListOfVoice(voiceUrl, time);
        })
        if (data.length === pageSize) {
            $("#voice-list-end").html("向下滚动加载更多")
        } else {
            $("#voice-list-end").html("没有更多数据了")
        }
    }

    $("#voice-list").unbind("scroll").bind("scroll", function (e) {
        // console.log("e",e,this.scrollHeight, $(this).scrollTop() + $(this).height())
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
            console.log("拖动到底，执行加载", page);
            fetchVoiceList(++page);
        }
        loading = false;
    });

    function playListOfVoice(voiceUrl, time) {
        console.log("播放语音", voiceUrl, time);
        console.log("播放语音,关闭音频");
        decoder && decoder.closeSound(0);
        padding = true;
        $.ajax({
            url: "https://open.ys7.com/api/lapp/voice/send",
            type: 'POST',
            data: {
                accessToken: accessToken,
                deviceSerial: deviceSerial,
                channelNo: channelNo,
                fileUrl: voiceUrl,
            },
            dataType: 'json',
            success: function (data) {
                console.log("data.data", data.data)
                if (data.code == 200) {
                    $("#startBroadcast").show();
                    $("#stopBroadcast").hide();

                    countTime('sub', parseInt(time));
                } else if (data.code == "10001") {
                    layer.msg("未找到当前语音")
                } else {
                    layer.msg(data.msg || '发送失败，请稍后再试')
                }
                padding = false;
            },
            error: function (err) {
                console.log("err", err);
                padding = false;
                layer.msg("网络异常，请稍后再试");
            }
        });
    }
</script>
</body>

</html>