vue+webrtc(騰訊雲) 實現直播功能的實踐

Posted on by

1.直播效果

1.pc端

太醜，不露臉

2.移動端

在這裡插入圖片描述

2.開直播步驟

2.1引入騰訊web端(快直播)腳本

腳本必須引入在 index.heml的body中

 <body style="padding:0;margin:0">
    //騰訊快直播腳本
    <script src="https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.2.min.js" charset="utf-8"></script>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

2.2在需要使用直播的界面 添加一個視頻容器(開啟直播後，顯示視頻的位置)

在.vue文件中直接使用即可,容器的樣式可以自己調,但是id不能丟棄(也可以使用name)

<div id="id_local_video" style="margin:0 auto;width:80%;display:flex;align-items:center;justify-content:center;"></div>

2.3創建直播對象，開啟直播

點擊開啟直播按鈕 對應的method中寫下方法
註意:推流地址中的協議頭rtmp，一定要換成webrtc,而且推流地址中一定不能出現中文，否則即使推流成功也會報錯

      //創建視頻對象 livePusher變量我寫在瞭data中 不再復制瞭 ，也可以直接在methods中直接聲明變量
      this.livePusher=new TXLivePusher()
      this.livePusher.setRenderView('id_local_video');
      // 設置音視頻流    
      this.livePusher.setVideoQuality('720p');
      // 設置音頻質量
      this.livePusher.setAudioQuality('standard');
      // 自定義設置幀率
      this.livePusher.setProperty('setVideoFPS', 25);   
        
      // 開啟直播
      // 打開攝像頭       
      this.livePusher.startCamera();
      // 打開麥克風
      this.livePusher.startMicrophone();    
      //這裡我延時瞭4秒進行推流 推流地址需要從後端接收。
       setTimeout(() => {          this.livePusher.startPush(推流地址);
       }, 4000);

推流成功

2.4關閉直播

直接在對應的方法中使用即可
註意，關閉直播時，一定要銷毀視頻容器

      // 1.停止推流
      this.livePusher.stopPush();
      // 2.關閉攝像頭
      this.livePusher.stopCamera();
      // 3.關閉麥克風
      this.livePusher.stopMicrophone();      
      // 4.銷毀容器對象
      this.livePusher.destroy();

到此這篇關於vue+webrtc(騰訊雲) 實現直播功能的實踐的文章就介紹到這瞭,更多相關vue+webrtc騰訊雲直播內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：