vue+webrtc(騰訊云) 實現(xiàn)直播功能的實踐

更新時間：2021年11月22日 10:40:19 作者：南工gjl

本文主要介紹了vue+webrtc(騰訊云) 實現(xiàn)直播功能的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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文件中直接使用即可,容器的樣式可以自己調(diào),但是id不能丟棄(也可以使用name)

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

2.3創(chuàng)建直播對象，開啟直播

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

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

推流成功

2.4關(guān)閉直播

直接在對應(yīng)的方法中使用即可
注意，關(guān)閉直播時，一定要銷毀視頻容器

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

到此這篇關(guān)于vue+webrtc(騰訊云) 實現(xiàn)直播功能的實踐的文章就介紹到這了,更多相關(guān)vue+webrtc騰訊云直播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: