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}; //您的频道idconst 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 后台的appIdsocket: 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; //您的频道idconst 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 后台的appIdsocket: 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(不适合普通直播)相关推荐

保利威视polyv的Api调用
官方接口文档 https://dev.polyv.net/2017/videoproduct/v-api/v-api-vmanage/v-api-vmanage-info/get-video-msg/ ...
保利威Polyv云直播、点播官方uni-app插件
一.适合HBuilderx 2.8.6版本的云打包(高于HBuilderx 3.0+时候云打包复现到,会拉取httpdns库失败) Uni-app 云课堂直播: 插件地址:https://ext.dc ...
阿里云，腾讯云，保利威视，金山云，七牛云的视频云方案的不同之处。
前几年,国内的视频云竞争确实超级火爆,以公共云为代表的阿里云.腾讯云等大力投入视频云研发及市场推广,都取得了不错的成绩:金山云.七牛云等也纷纷推出了自家的视频云平台. 阿里云由于初期承诺只做底层,而视 ...
保利威视平台：视频远程同步工具
对于远程服务器上的视频文件,Polyv有一个远程抓取接口, 不过批量视频抓取,可以采用视频远程同步工具. 导入任务先用文本编辑器创建文件,整理好视频的链接和对应的标题逗号分隔,每一行一条列表,保存为 ...
阿里云、保利威的点播有什么区别，哪个更好？
谢邀,居然碰到个咨询云服务的知友哈哈,有缘就答了互联网教育从业者,二线城市,开了家线上小培训公司,接触和使用过阿里云和保利威视频云,目前公司点播直播保利威和阿里两边都有用. 简单了解楼主情况,我这人 ...
【科创人独家】保利威董事长谢晓昉：不做无效直播，帮助企业打通直播营销全链路
保利威是国内视频云行业的领导品牌,专注企业直播.点播,成立多年以来深耕在线教育和企业培训领域,服务过包括中央电视台.建设银行.工商银行.彭博社.太平洋保险.新东方.好未来.中信证券等知名企业在内,多达 ...
职教视频云：保利威、百家云与巨头对垒
配图来自Canva可画作为当下备受青睐的转型赛道之一,职业教育正在开启新的发展窗口,结合直播来打造玩法更多.互动更全的云课堂成为了众多职业教育玩家抢占先机的竞争高地. 面对职业教育线上化趋势,越来越 ...
第三方直播云平台（保利威和阿里云）直播集成demo
第三方直播云平台(保利威和阿里云)直播集成文档整理. 保利威: 保利威帮助中心 js demo <div id="player"></div> <sc ...
讲好元宇宙故事保利威开启MR直播新时代
关注云报洞察深一度一位女士,眼中充满好奇,身体却稍显犹豫,最终还是坐在了绿幕为背景的双人沙发上,不知道接下来会发生什么? 另一边,一个工作人员好像在机器前调试着什么,瞬间一块显示屏上"神 ...
技术赋能教育直播，保利威玩转“5G+AI”
更多精彩内容请关注我们俗话说,人无远虑,必有近忧. 直播作为在线教育的重要手段之一,近几年在我国快速崛起,2018年出现了一个发展高潮.无论是1对1还是1对多,也无论职业教育还是传统的管理培训,在线 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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