vue 嵌入 TXLivePusher，做直播（ 自己开直播给别人看 ）（亲测可用，目前已应用到项目中）

template

 

备注：直播的时候 只能 走 localhost file（ 单文件：html ）， https （ 线上部署 ）

 

例子：webrtc://livepush.wing4123.top/live/test?txSecret=35a215684d3c7b88190fb22618e2b534&txTime=60DE7EF2

 

<!-- 自己直播给别人看 -->
      <div v-if="type == 1 && this.role == 'teacher'"  style="margin-top:10px;">
        <div id="id_local_video" style="width:100%;height:700px;border:1px solid red;" ></div>
        <input id='pushUrl' value=' 请替换成实际可用地址，建议 webrtc 开头的地址 ' style='width: 400px;' />

　　　　<button @click="startCamera(0)">打开摄像头</button>

        <button @click="startCamera(1)">关闭摄像头</button>

        <button @click="startCamera(2)">共享屏幕</button>

        <button @click="startCamera(3)">打开麦克风</button>

        <button @click="startCamera(4)">开始直播</button>

        <button @click="startCamera(5)">停止直播</button>

      </div> 

 

 

由于 vue 文件是 单例文件，所以不能支持俩个 script，这个script 只能通过 动态创建来引入 js ，另外： 这个JS不支持 本地引入，也就是不支持下载

<script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js" charset="utf-8"></script>

 

data :

livePusher: null,

 

create:

this.newTxList()

 

methods:

这个方法直接挂在 create 或者 mounted 都行。 区别在于 一个 还没创建 dom 的时候创建，一个是创建了 dom 再去创建，效果都一样

//动态创建引入js
    getScript(){
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js";
      document.getElementsByTagName("head")[0].appendChild(script);
    },

//初始化对象
    newTxList(){
      this.livePusher = new TXLivePusher();
    },


    // 打开摄像头
    startCamera( type ){



      // 指定本地视频播放器容器：
      this.livePusher.setRenderView('id_local_video');
      // 设置视频质量
      this.livePusher.setVideoQuality('720p');
      // 设置音频质量
      this.livePusher.setAudioQuality('standard');
      // 自定义设置帧率
      this.livePusher.setProperty('setVideoFPS', 25);



      if( type == 0 ){
        this.livePusher.startCamera();
      }else if( type == 1 ){
        this.livePusher.stopCamera();
      }else if( type == 2 ){
        this.livePusher.stopCamera();
        this.livePusher.startScreenCapture();
      }else if( type == 3 ){
        this.livePusher.startMicrophone();
      }else if( type == 4 ){
        this.livePusher.startPush(document.querySelector('#pushUrl').value);
      }else if( type == 5 ){
        this.livePusher.stopPush();
      }



    },