Web直播iFrameUI

1. 概述

直播iFrameUI为在您的网页中，通过Iframe方式，直接嵌套获得场景视频直播观看页面，快速实现直播观看功能。

资源下载

下载地址：https://dl.csslcloud.net/live/sdk/web/liveIframeUI/demo.zip

压缩包内包Demo

浏览器支持

- Chrome  60+
- Firefox  52+
- IE9+
- Edge
- Safari  10+

1.1 功能特性

iFrameUI目前包含播放器、文档功能、聊天功能、问答功能、以及随堂测、广播等互动功能

1.1.1 主要功能描述

2.快速集成

2.1 采用iFrameUI

通过iframe方式，在您的网页中，引入获得场景视频直播观看页面地址

<iframe allow="geolocation; microphone; camera; midi; encrypted-media;" src="您在获得场景视频平台的云直播观看地址" width="100%" height="1000" sandbox="allow-same-origin allow-scripts" allow="autoplay" scrolling="no" allow-scripts="" allowfullscreen="true" allowusermedia=""></iframe>

3.iFrameUI核心回调事件监听及说明

通过浏览器的onmessage窗口事件，监听iFrameUI的各回调事件，简易代码示例如下：

// toJson解析工具函数
function toJson (data) {
  if (!data) return {}
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data)
    } catch (e) {
      data = data.replace(/[\n|\t|\s|\r|\f]/g, "")
      data = JSON.parse(data)
    }
  }
  return data
}
// 挂载iFrame消息监听事件, 监听消息通知
window.hdMessage = function (event) {
  const msg = toJson(event.data)
  const {from, action, data} = msg
  console.log('from: ', from) // 消息来源 'hd-live'
  console.log('action: ', action}) // 消息事件
  console.log('type: ', type}) // 消息类型
  console.log('data: ', data) // 事件的具体内容
  console.log('iFrameMsg: ', msg) // 完整的消息体
}
if (window.attachEvent){
  window.attachEvent('onmessage', window.hdMessage, false)
} else {
  window.addEventListener('message', window.hdMessage, false)
}

其中，from 统一为hd-live , 代表消息由获得场景直播页面发出； 具体各action 及对应的 data和type详细说明如下：