基于Tweblive做的视频直播 --- 直播篇

本文主要通过介绍网页版群直播基础功能和实现流程来告诉大家TWebLive 能用来做什么，如何把TWebLive集成到项目中 。

架构设计

说实话鹅厂的东西确实挺好的， 本人也是第一次开发视频直播相关的项目， 遇坑无数， 爬坑无数。 如果你的直播需求有美颜相关的SDK对接的话，建议使用obs去解决视频直播。 因为我没解决这个功能， 当然如果你解决了， 愿意分享的话，那简直万分感谢。

1. TWebLive 的优点 开发者接入此 SDK，可彻底替代 flash 推流方案，大大降低 Web 推流、Web 低延时观看、CDN 观看以及实时聊天互动（或弹幕）的实现复杂度和时间成本

2. Vue接入TWebLive

npm install tweblive
// 全局挂载   main.js
import TWebLive from 'tweblive';
Vue.prototype.TWebLive = TWebLive;

3. 获取远程视频流进行本地播放来实现观看直播

// 创建player对象
this.tweblive = this.$TWebLive.createPlayer(); 
// 设置渲染界面  指定节点ID
this.tweblive.setRenderView({
    elementID: 'videoElement', // 节点ID
    audio: true,        // 音频
    video: true         // 视频
});
// 设置自动播放  和 问题处理
this.tweblive.setCustomConfig({
    autoplay: true,
    live: true,
    controls: 'system',
    wording: {
        1: '网络出小差~'
    }
});
// 播放路径
let url = `https://flv=${encodeURIComponent(ur)}`  // ur 替换成流地址 
// 开始播放
this.tweblive.startPlay(url).then(() => {
    console.log('ok')
    setTimeout(() => {
    this.tweblive.muted = false;
    }, 1000)
}).catch(() => false);

基本实现以上这几步就成功了，可以拉流播放了