crm/app/sys/view/broad/course_links.html

{extend name="public/layout"}
{block name="body"}
<style>
  html,body {
    background-color: #fff;
  }
  .firstpoint{
    display: inline-block;
    background-color: #009688;
    color:#fff;
    width:30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .wxsbox,.wxsecondBox,.wxthirdBox{
    display: inline-block;
    padding: 10px 10px 0;
    height: 220px;
    border: 1px solid #ccc;
    width: 200px;
    float: left;

  }
  .wxsbox{
    /*text-align: center;*/
  }
  .wxsbox img{
    display: block;
    width: 100px;
    margin:10px auto 0;
  }
  .wxsecondBox img{
    display: block;
    width: 100px;
    margin:10px auto 0;
  }
  .wxsecondBox{
    position: relative;
    left: 42px;
  }
  .wxthirdBox{
    float: right;
  }
  .wxthirdBox div{
    margin-bottom: 10px;
  }
  .firstBox{
    width: 100%;
    margin-bottom: 20px;
    margin-top: 260px;
  }
  .firstNum{
    position: relative;
    left: 100px;
  }
  .secondNum{
    position: relative;
    left:330px;
  }
  .thirdNum{
    float: right;
    position: relative;
    right:100px;
  }
  .firstNum::before,.secondNum::before{
    content: ' ';
    display: block;
    height: 1px;
    width: 240px;
    background: #009688;
    position: absolute;
    top: 15px;
    left: 25px;
  }
  .coloryellow{
    color: #f7b500;
  }
  .layui-tab-item.layui-show{
    overflow: hidden;
    clear: both;
  }

  a{
    color: rgb(0, 0, 238);
  }
  div{
    word-wrap: break-word;
    word-break:break-all;
  }
  .myliveBox .wxsbox img{
    margin: 0 auto;
  }
  .myliveBox .wxsbox,.myliveBox .wxthirdBox{
    height: 250px;
  }
  .myliveBox .firstBox{
    margin-top: 287px;
    margin-bottom: 0;
  }
  .myliveBox .firstNum::before{
    content: ' ';
    display: block;
    height: 1px;
    width: 500px;
    background: #009688;
    position: absolute;
    top: 15px;
    left: 25px;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items:center;
  }
  .block{
    display: block;
  }
  .myliveBox .wxsbox{
    position: relative;
    left:100px;
  }
  .myliveBox .wxthirdBox{
    position: relative;
    right:100px;
  }
  .myliveBox .firstBox .firstNum{
    left: 200px;
  }
  .myliveBox .firstBox .thirdNum{
    right: 200px;
  }
  .myliveBox .firstBox .firstNum::before{
    width: 300px;
  }
  .wxtitle{
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 50px;
    color: #009688;
  }
  .obsBox{
    position: relative;
    padding-left: 50px;
  }
  .obsBox .wxtitle{
    margin-bottom: 25px;
    padding-left: 0px;
  }
  .obsBox .wxsbox{
    text-align: left;
  }
  .obsBox .obswxsbox, .obsBox .obswxsecondBox,.obsBox .obswxthirdBox{
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
  }
  .obsBox .obsfirstBox{
    position: absolute;
    top: 0;
    left:0;
  }
  .obsBox .obsfirstNum{
    position: absolute;
    left:0;
    top: 80px;
  }
  .obsBox .obssecondNum{
    position: absolute;
    left:0;
    top: 175px;
  }
  .obsBox .obsthirdNum{
    position: absolute;
    left:0;
    top: 235px;
  }
  .obsBox .obsfirstNum::before{
    content: " ";
    position: absolute;
    width:1px;
    height:100px;
    background: #009688;
    top:28px;
    right: 14px;
  }
  .obsBox .obssecondNum::before{
    content: " ";
    position: absolute;
    width:1px;
    height:60px;
    background: #009688;
    top:25px;
    right: 14px;
  }
  .playliveBox .wxsecondBox{
    display: block;
    float: inherit;
    margin: 30px auto;
    left: 0;
    height: 240px;
  }
  .playliveBox .wxsecondBox img{
    width: 150px;
  }
  .dashBtn{
    position: relative;
    left: 130px;
  }
  .layui-tab-title li.dashBtn a{
    display: inline-block;
  }
  .layui-tab-title {
    height: 41px;
  }
  .layui-tab-title .layui-this {
    background-color: #249EFB;
    color: #fff;
  }

  .layui-tab-title .layui-this:after {
    border-bottom: none;
    border: none;
  }

  .layui-tab-title li {
    background-color: #F2F2F2;
    margin: 0px 5px;
  }
</style>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12" style="background-color:#ffffff">
      <div class="tplay-body-div">
        <div class="layui-tab" lay-filter="test">
          <ul class="layui-tab-title">
            <li class="layui-this" style="margin-left: 0px;">腾讯视频云推流</li>
            <li>OBS推流</li>
            <li>威云小程序推流</li>
            <li>直播间分享</li>
            <li class="dashBtn">
              <a class="layui-btn layui-btn-xs" title="直播控制台" lay-event="dashboard">我已设置完毕，打开控制台</a>
            </li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="wxtitle">“本直播方式适用于携带手机来回行走的场景”</div>
              <div class="wxsbox">
                <br/>
                ①微信扫描以下二维码；<br/>
                <img src="https://imglive.yx-cdn.com/liveimg/wxqoce.png" alt="腾讯视频云"  />
                ②点击底部的：“通信”；<br/>
                ③选择：“RTMP推流”。
              </div>
              <div class="wxsecondBox">
                <br/>
                ①“扫码读取”下面二维码；<br/>
                <img src="{:url('broad/course_apilinkpushQr',['cid'=>$courseId])}" />
                ②画面质量选择：“HD”；<br/>
                ③画面方向选择：“横屏推流”。
                ④点击“开始”即可直播。
              </div>
              <div class="wxthirdBox">
                <br/>
                <p class="coloryellow"> 注：因直播需占用所在网络的上行带宽，直播时如画面卡顿，可返回设置界面降低画面质量，或暂时禁止同网络内其他人上网。</p>
              </div>
              <div class="firstBox">
                <div class="firstpoint firstNum">1</div>
                <div class="firstpoint secondNum">2</div>
                <div class="firstpoint thirdNum">3</div>
              </div>
            </div>

            <div class="layui-tab-item obsBox">
              <div class="wxtitle">“本直播方式适用于推流多幅画面、PPT、3D效果图的场景”</div>
              <div class="obswxsbox">
                <div><a href="https://dl.softmgr.qq.com/original/Video/OBS-Studio-24.0.3-Full-Installer-x86.exe" style="color:#009688;">下载OBS</a>，安装后点击右下角“设置”，选择窗口左边的“流”按钮，输入以下内容后保存。</div><br/>
                <div>URL：<span>{$pushlinks['obs_addr']}</span><a class="layui-btn layui-btn-xs layui-btn-radius copy" data-clipboard-text="{$pushlinks['obs_addr']}">一键复制</a></div>
                <div>流名称：<span>{$pushlinks['obs_name']}</span><a class="layui-btn layui-btn-xs layui-btn-radius copy" data-clipboard-text="{$pushlinks['obs_name']}">一键复制</a></div>
              </div>
              <div class="obswxsecondBox center">
                <div class="">在主界面左下角的“来源”窗口，添加您所要播放的媒体类型。</div>
              </div>
              <div class="obswxthirdBox center">
                <div>点击“开始推流”后，主界面右下角亮起绿色图形，表示已经在正常直播中。</div>
              </div>
              <div class="obsfirstBox">
                <div class="firstpoint obsfirstNum">1</div>
                <div class="firstpoint obssecondNum">2</div>
                <div class="firstpoint obsthirdNum">3</div>
              </div>
            </div>
            <div class="layui-tab-item myliveBox">
              <div  class="wxtitle">“本直播方式适用于携带手机来回行走的场景。”（内测中，不建议正式直播使用）</div>
              <div class="wxsbox">
                <div>微信扫描以下二维码</div>
                <img src="{$imgsrc}" width="180px">
                <div>打开“威云”小程序。</div>
              </div>
              <div class="wxthirdBox center">
                <div>
                  点击“开始推流”即可直播。
                  <span class="coloryellow block">注：内测中，不建议正式直播使用。</span>
                </div>
              </div>

              <div class="firstBox">
                <div class="firstpoint firstNum">1</div>
                <!-- <div class="firstpoint secondNum">2</div> -->
                <div class="firstpoint thirdNum">2</div>
              </div>
            </div>
            <div class="layui-tab-item playliveBox" style="text-align: center;">
              <div class="wxtitle">您的直播间二维码为：</div>
              <!-- <div class="wxsecondBox">
                  <img src="{$wylinks}"><br/>
                  <div class="coloryellow">注：小程序分享二维码。</div>
              </div> -->
              <div class="wxsecondBox">
                <img src="{$sharelink}"><br/>
                <div class="coloryellow">注：直播分享二维码。</div>
                <br/>
                <a class="layui-btn layui-btn-xs copy"  data-clipboard-text="{$sharelinkUrl}" style="margin: 0 auto;">复制到浏览器观看直播</a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script src="__STATIC__/js/clipboard.min.js"></script>
<script>
  var clipboard = new ClipboardJS('.copy');
  var sharelink = '{$sharelinkUrl}';
  layui.use(['layer', 'element','table', 'form'], function(){
    var $ = layui.jquery
            ,element = layui.element;

    element.on('tab(test)', function(elem){
      // location.hash = 'test='+ $(this).attr('lay-id');
    });
    clipboard.on('success', function(e) {
      layer.msg('复制成功');
    });

    clipboard.on('error', function(e) {
      layer.msg('复制失败');
    });

    $('.dashBtn .layui-btn').on('click', function () {
      var index = parent.layer.getFrameIndex(window.name);
      parent.layer.close(index);
      parent.layer.open({
        title:'{$courseTitle}-直播控制台'
        ,type: 2
        ,content:"{:url('broad/dashboard')}"
        ,area: ['1015px', '634px']
      });
    });

  });
</script>
{/block}