其他分享
首页 > 其他分享> > vue+vue-video-player+sockjs完成直播和聊天室(PC+h5)

vue+vue-video-player+sockjs完成直播和聊天室(PC+h5)

作者:互联网

 

 需要安装的第三方包

  npm install vue-video-player --save // 直播播放插件(注意不能同时安装videojs,也不能使用cnpm安装否则会报“The "flash" tech is undefined. Skipped browser support check for that tech”,)

  注意:

  1. 如果需要播放 HLS 流,需要安装 videojs-contrib-hls 插件,非原生支持的浏览器,直播服务端需要开启 CORS
  2. 如果需要播放 RTMP 流,需要安装 videojs-flash 插件
  3. 如果两个流都需要播放,flash 插件需要安装到 hls 插件之前

  npm install--save videojs-flash // 启用flash进行播放,有兼容问题(火狐),所以我们项目中只使用了hls进行播放

  npm i videojs-contrib-hls // 解决ios播放问题

  npm i jquery // 用于解决移动端自动全屏问题

  

  // 聊天室用到的sockjs

  npm i sockjs

  npm i stompjs

 

  在main.js中引入

 

import 'video.js/dist/video-js.css'
import './components/video-player/custom-theme.css'

 

  class使用  vjs-custom-skin    videoPlayer

<template>
    <videoPlayer 
    class="vjs-custom-skin videoPlayer"
    options="playerOptions"
    @click.native=onPlayerPlay($event)>
    @canplay="onPlayerCanplay($event)"
    playsinline="playsinline"
  </videoPlayer>
</template>

  组件中引入

import 'video.jsdistvideo-js.css'
import {videoPlayer} from 'vue-video-player'
//  import 'videojs-flash'

// ios import 'videojs-contrib-hls' // 避免flash兼容问题,所以都使用pc和h5都使用hls播放 // SockJS // import SockJS from 'sockjs-client'; // import Stomp from 'stompjs'; import {Stomp} from '@/assets/js/stomp.js'; // 因为我使用的是后台给我的Js文件,所以直接引入的

  注册组件

  components: {
    videoPlayer
  },

  

//  直播配置(还有很多配置,百度可以搜到)
      playerOptions: {
         height: '529',
         width: '940',
        sources: [
          //  {
          //     // src: rtmp58.200.131.21935livetvhunantv, // 湖南台的直流地址
          //    type: 'rtmpmp4',
          //  },
          //  {
          //    type: 'applicationx-mpegURL',
          //    src: 'httpivi.bupt.edu.cnhlscctv1hd.m3u8',
          //  }
        ], // 表示组件会按顺序自动识别,如果第一个不能播放,则使用下一个(流配置,数组形式,会根据兼容顺序自动切换)
        notSupportedMessage: '请刷新页面', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。//有些提示不生效,直接去node_modules里去改源文件
        autoplay: false, // 是否自动播放
        controls: true, // 控制条
        // poster , 你的封面地址
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: false,// 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 全屏按钮
        }
      },

 

  1.如何隐藏进度条(这是源文件里)

 

  

  需要写在全局style中,在mainjs中引入

 

 

 

  2.解决移动端自动全屏的问题(微信)

 

 

 

  computed: {
    playsinline(){
      var ua = navigator.userAgent.toLocaleLowerCase();
      console.log(ua)
       //x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false
      }else{
        //ios端
        return true       
      }
    },

  

  //  在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调

  

 onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
        //解决自动全屏
        var ua = navigator.userAgent.toLocaleLowerCase();
        //x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        
          $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
      }else{
        //ios端
          $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true") 
      }
    }
  },

  

    //sockjs

  

//  sockjs(在mounted中调用this.initWebSocket())
    initWebSocket() {
      this.connection();
      let self = this;
      //  断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setTimeout(() => {
        try {
          self.stompClient.send(test);
        } catch (err) {
          // console.log(断线了  + err);
          self.connection();
        }
      }, 5000);
    },
    removeTab(targetName) {
      console.log(targetName)
    },
    connection() {
      console.log(this.detailsObj)
      //  建立连接对象(${l_url}liveLesson后台给的地址)
      this.socket = new SockJS(`${l_url}liveLesson`);//连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息
      console.log(this.socket)
      //  获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(this.socket);
      console.log(this.stompClient)
      //  延迟重连时间
      this.stompClient.reconnect_delay = 3000
      //  定义客户端的认证信息,按需求配置
      var headers = {
        userId: this.$store.state.user_info.userId,
        liveStreamId: this.detailsObj.liveStreamId
      };
      let fid = this.detailsObj.liveStreamId
      console.log(this.$store.state.user_info.userId,fid)
      //  向服务器发起websocket连接
      this.stompClient.connect(headers,(frame) => {
        console.log('连接成功',frame)
      }, (err)=> {
               // 连接发生错误时的处理函数               console.log(2222,err);           })
    }
    //  断开连接     disconnect() {        if (this.stompClient != null) {          this.stompClient.disconnect();          console.log(Disconnected);        }       if (this.socket != null) {         this.socket.close();         this.socket = null;       }     }  

  

标签:vue,console,log,PC,sockjs,video,import,true,playsinline
来源: https://www.cnblogs.com/js-liqian/p/12487895.html