1. 首页
  2. 文章中心
  3. thinkphp5

tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)

77 阅读 0 评论
我是靠谱客的博主 舒心音响，最近开发中收集的这篇文章主要介绍tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

云课堂三分屏的场景,可以在云课堂客户端, 网页开播, ipad端(AppStore搜应用"讲课啦")发起直播

不适合普通直播

 

一、模板代码

1.1 修改过TP5.1模板代码

<!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" />
  <title>cloud</title>
  <link rel="stylesheet" href="https://player.polyv.net/jssdk/polyv-chatroom.min.css" />
  <style>
    html,
    body {
      margin: 0;
      height: 100%;
      background: #111c2d;
    }

    .container {
      display: flex;
      justify-content: space-between;
      width: 1200px;
      height: 678px;
      margin: 0 auto;
      padding-top: 40px;
    }

    .main {
      width: 840px;
    }

    .side {
      width: 340px;
      font-size: 0;
    }

    #ppt {
      width: 840px;
      height: 630px;
    }

    #player {
      width: 340px;
      height: 225px;
    }

    #ppt .ppt-h5-setting-nav {
      bottom: 48px;
    }
  </style>
</head>

<body>
 <div class="container">
    <div class="main">
      <div id="ppt"></div>
    </div>
    <div class="side">
      <div id="player"></div>
      <div id="chatroom"></div>
    </div>
  </div>
  <script src="https://player.polyv.net/livesdk/polyv-live.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.min.js"></script>
  <script src="https://player.polyv.net/jssdk/polyv-chatroom.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
  <script src="https://player.polyv.net/resp/rtc-sdk/latest/polyv-rtc.min.js"></script>
  <script>
    const channelId = {$channelId}; //您的频道id
    const appId = '{$appId}';
    const timestamp = {$ts};
    //const appSecret = "your appSecret";
    const sign = '{$sign}';
    const nickName = '{$username}';
    const pic = 'https://livestatic.videocc.net/assets/wimages/missing_face.png';
    const userId = {$uid};

    const getToken = '{$token}';

    window.onload = function () {
//    getToken(Qs.stringify({ appId, timestamp, channelId, sign })).then(
//      res => {
          const chatroom = new PolyvChatRoom({
            roomId: channelId,
            userId: userId,
            pic: pic,
            nick: nickName,
            container: "#chatroom",
            width: 340,
            height: 405,
            userType: "",
            token: getToken,
            tabData: [
              {
                name: '互动聊天',
                type: 'chat'
              },
              {
                name: '在线列表',
                type: 'user-list'
              },
              {
                name: '提问',
                type: 'ask'
              }
            ],
            roomMessage: function (data) {
              // TODO
              // data为聊天室socket消息，当有聊天室消息时会触发此方法
              console.log(data);
            }
          });
          const liveSdk = new PolyvLiveSdk({
            channelId: channelId,
            sign: sign, // 频道验证签名
            timestamp: timestamp, // 毫秒级时间戳
            appId: appId, // polyv 后台的appId
            socket: chatroom.chat.socket,
            user: {
              userId: userId,
              userName: nickName,
              pic: pic
            }
          });
          liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
            liveSdk.setupPlayer({
              pptEl: "#ppt",
              el: "#player",
              type: "auto",
              controllerPosition: "ppt"
            });

            // 监听流状态变化刷新播放器
            liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, function () {
              liveSdk.reloadPlayer();
            });
          });
//      }
//    );
    };
  </script>
</body>

</html>

官方代码：

<!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" />
  <title>cloud</title>
  <link rel="stylesheet" href="https://player.polyv.net/jssdk/polyv-chatroom.min.css" />
  <style>
    html,
    body {
      margin: 0;
      height: 100%;
      background: #111c2d;
    }

    .container {
      display: flex;
      justify-content: space-between;
      width: 1200px;
      height: 678px;
      margin: 0 auto;
      padding-top: 40px;
    }

    .main {
      width: 840px;
    }

    .side {
      width: 340px;
      font-size: 0;
    }

    #ppt {
      width: 840px;
      height: 630px;
    }

    #player {
      width: 340px;
      height: 225px;
    }

    #ppt .ppt-h5-setting-nav {
      bottom: 48px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">
      <div id="ppt"></div>
    </div>
    <div class="side">
      <div id="player"></div>
      <div id="chatroom"></div>
    </div>
  </div>
  <script src="https://player.polyv.net/livesdk/polyv-live.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.min.js"></script>
  <script src="https://player.polyv.net/jssdk/polyv-chatroom.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
  <script src="https://player.polyv.net/resp/rtc-sdk/latest/polyv-rtc.min.js"></script>
  <script>
    const channelId = 66666; //您的频道id
    const appId = "you appId";
    const timestamp = new Date().getTime();
    const appSecret = "your appSecret";
    const sign = md5(
      `${appSecret}appId${appId}channelId${channelId}timestamp${timestamp}${appSecret}`
    ).toLocaleUpperCase();
    const nickName = 'polyvtest';
    const pic = 'http://livestatic.videocc.net/assets/wimages/missing_face.png';
    const userId = +new Date();

    const getToken = params =>
      axios.post(
        "http://api.polyv.net/live/v3/channel/common/get-token",
        params
      );

    window.onload = function () {
      getToken(Qs.stringify({ appId, timestamp, channelId, sign })).then(
        res => {
          const chatroom = new PolyvChatRoom({
            roomId: channelId,
            userId: userId,
            pic: pic,
            nick: nickName,
            container: "#chatroom",
            width: 340,
            height: 405,
            userType: "",
            token: res.data.data.token,
            tabData: [
              {
                name: '互动聊天',
                type: 'chat'
              },
              {
                name: '在线列表',
                type: 'user-list'
              },
              {
                name: '提问',
                type: 'ask'
              }
            ],
            roomMessage: function (data) {
              // TODO
              // data为聊天室socket消息，当有聊天室消息时会触发此方法
              console.log(data);
            }
          });
          const liveSdk = new PolyvLiveSdk({
            channelId: channelId,
            sign: sign, // 频道验证签名
            timestamp: timestamp, // 毫秒级时间戳
            appId: appId, // polyv 后台的appId
            socket: chatroom.chat.socket,
            user: {
              userId: userId,
              userName: nickName,
              pic: pic
            }
          });
          liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
            liveSdk.setupPlayer({
              pptEl: "#ppt",
              el: "#player",
              type: "auto",
              controllerPosition: "ppt"
            });

            // 监听流状态变化刷新播放器
            liveSdk.on(PolyvLiveSdk.EVENTS.STREAM_UPDATE, function () {
              liveSdk.reloadPlayer();
            });
          });
        }
      );
    };
  </script>
</body>

</html>

二、获取保利威视授权和连麦的token

官方教程：http://dev.polyv.net/2019/liveproduct/l-api/zbglgn/pdcz/get-channel-token/

<?php
//引用config.php
include 'config.php';

$params = array(
  'appId' => $appId,
  'timestamp' => $timestamp,
  'channelId' =>  195770
);

//生成sign
$sign = getSign($params); //详细查看config.php文件的getSign方法
$params['sign'] = $sign;

$url = "http://api.polyv.net/live/v3/channel/common/get-token?".http_build_query($params);

$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, 1);
$res = curl_exec($curl);
curl_close($curl);

echo $res;
?>

修改成适合自己的

 

 

最后

以上就是舒心音响为你收集整理的tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)的全部内容，希望文章能够帮你解决tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(51)

相关文章

【产品】USB设备VID和PID查询
【产品】USB设备VID和PID查询
POLYV上传客户端实现批量上传视频功能的介绍
POLYV上传客户端实现批量上传视频功能的介绍
php 视频播放加密,如何在HTML5页面播放加密视频
php 视频播放加密,如何在HTML5页面播放加密视频
简单视频加密与授权
简单视频加密与授权
tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)
tp5.1 保利威视 云课堂 三分屏 PC直播DEMO(不适合普通直播)
Java 使用blob对H5视频播放进行加密《java视频加密》 Java 使用blob对H5视频播放进行加密《java视频加密》
Java 使用blob对H5视频播放进行加密《java视频加密》 Java 使用blob对H5视频播放进行加密《java视频加密》
如何实现视频加密全平台播放
如何实现视频加密全平台播放
视频点播播放器如何实现加密下载?1、概述2、下载实现流程
视频点播播放器如何实现加密下载?1、概述2、下载实现流程

评论列表共有 0 条评论

立即
投稿
返回
顶部