WebSocket和h5直播（FLV&m3u8） - 《技术文档笔记》

一、WebSocket
// 封装各个阶段函数
let Socket = ''
let setIntervalWesocketPush = null
/**建立连接 */
export function createSocket(id) {
  if (!Socket) {
    const WSS_URL = "ws://socket链接"
    console.log('建立websocket连接')
    Socket = new WebSocket(WSS_URL)
    Socket.onopen = onopenWS
    Socket.onmessage = onmessageWS
    Socket.onerror = onerrorWS
    Socket.onclose = oncloseWS
  } else {
    console.log('websocket已连接')
  }
}
/**打开WS之后发送心跳 */
export function onopenWS() {
  sendPing() //发送心跳
}
/**连接失败重连 */
export function onerrorWS() {
  clearInterval(setIntervalWesocketPush)
  Socket.close()
  createSocket() //重连
}
/**WS数据接收统一处理 */
export function onmessageWS(e) {
  window.dispatchEvent(new CustomEvent('onmessageWS', {
    detail: {
      data: e.data
    }
  }))
}
/**发送数据
 * @param eventType
 */
export function sendWSPush(eventTypeArr) {
  const obj = {
    appId: 'airShip',
    cover: 0,
    event: eventTypeArr
  }
  if (Socket !== null && Socket.readyState === 3) {
    Socket.close();
    createSocket() //重连
  } else if (Socket.readyState === 1) {
    Socket.send(JSON.stringify(obj))
  } else if (Socket.readyState === 0) {
    setTimeout(() => {
      Socket.send(JSON.stringify(obj))
    }, 30000)
  }
}
/**关闭WS */
export function oncloseWS() {
  clearInterval(setIntervalWesocketPush)
  console.log('websocket已断开')
}
/**发送心跳 */
export function sendPing() {
  Socket.send('ping')
  setIntervalWesocketPush = setInterval(() => {
    Socket.send('ping')
  }, 60000)
}
// 使用
createSocket(roomId) //创建
sendWSPush() //发送数据
const getDataFunc = function(e) {
    console.log(e) // Socket实时连接返回信息
});
// 监听
window.addEventListener('onmessageWS', getDataFunc);
二、h5直播
1.使用CyberPlayer播放flv格式
// 引用js
<script src="cyberplayer.js"></script> // 查看或下载附件
// 模板
<video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay></video>
// 使用
var player = cyberplayer("myPlayer").setup({
  backcolor : "#FFFFFF",
  stretching : "fill",
  file : 'http://live-dev.shareitgames.com/live/stream_1_100_191115190445.flv',  //视频url
  ak : "88abcbd72fbc4b809dfe9e5bc97ad759", // 公有云平台注册即可获得accessKey
  autoStart : true,
  repeat : false,
  volume : 100, 
  controls : true,
  controlbar: {
      barLogo: false
  }
});
//播放事件监听方法
 player.on('play', function(e) {
  console.log(e)
     if (e.type == "playing") {
   // 正在播放
    };
});
// 类似事件还有ready, setupError, playlist, playlistItem, playlistComplete, bufferChange, play, pause, buffer, idle, complete, error, seek, seeked, time, mute, volume, fullscreen, resize, levels, levelsChanged, captionsList, captionsChange, controls, displayClick, meta
//监听直播流状态
// 成功建立连接
player.onConnection(function(){ 
   console.log("连接成功");
});
// 有直播流时
player.onAlive(function(){});
// 无直播流时
player.onNoLiveStream(function(){});
// 直播暂停时
player.onLiveStop(function(){});
2.播放mus8直播视频
// 引入js
<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
// 模板
<video class="video-js vjs-default-skin" id="hls-video" width="100%" height="100%"
  controls="controls" autoplay="autoplay"
  x-webkit-airplay="true" x5-video-player-fullscreen="true"
  preload="auto" playsinline="true" webkit-playsinline
  x5-video-player-typ="h5">
  <source type="application/x-mpegURL" src="http://live-dev.shareitgames.com/live/p3/playlist.m3u8">
</video>
// 使用
var player = videojs('hls-video');
player.play();
    //影藏多余控件以及文本消息
document.getElementsByClassName('vjs-modal-dialog')[0].setAttribute('style','display:none');
document.getElementsByClassName('vjs-modal-dialog')[1].setAttribute('style','display:none');
document.getElementsByClassName('vjs-control-bar')[0].setAttribute('style','display:none');
document.getElementsByClassName('vjs-big-play-button')[0].setAttribute('style','display:none');
// 监听播放状态(m3u8)
player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate', 'loadeddata', 'loadedmetadata'], function(e) {
    console.log(e)
  if (e.type == "playing") {};
});
3.播放Flv直播视频
// 引入js
<script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.min.js"></script>
// 模板
<video id="videoElement"> </video>
// 使用(1)
if (flvjs.isSupported()) {
  //检查flvjs能否正常使用
  var videoElement = document.getElementById("videoElement"); //使用id选择器找到第二步设置的dom元素
  var flvPlayer = flvjs.createPlayer({
      //创建一个新的flv播放器对象
      type: "flv", //类型flv
      url: "http://live-dev.shareitgames.com/live/p3.flv" //flv文件地址
  });
  flvPlayer.attachMediaElement(videoElement); //将flv视频装载进video元素内
  flvPlayer.load(); //载入视频
  flvPlayer.play(); //播放视频，如果不想要自动播放，去掉本行
}
// 使用(2) 解决高延时（跳帧方法）
if (flvjs.isSupported()) {
  var videoElement = document.getElementById('videoElement');
  var video = videoElement
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    isLive: true,
    url: 'http://live-dev.shareitgames.com/live/p3.flv',
    }, {
    enableStashBuffer: false
  });
  flvPlayer.attachMediaElement(videoElement);
  flvPlayer.load();
  setTimeout(() => {
      flvPlayer.play();
  }, 2000)
  setInterval(() => {
    if (!video.buffered.length) {
        return;
    }
    let end = video.buffered.end(0);
    let diff = end - video.currentTime;
    if (diff >= 1.5) {
        video.currentTime = end;
    }
  }, 3000);
}
// 监听flv视频流信息
 flvjs.LoggingControl.addLogListener(function(type, str) {
  // 开始播放
  if (str == '[FLVDemuxer] > Parsed AudioSpecificConfig') {};
  // 播放结束
  if (str == '[MSEController] > MediaSource onSourceEnded') {};
});
cyberplayer.js