視頻會議初探 -- 騰訊雲直播+小程序推流+h5拉流

最近要加會議功能，然后大體看了下，決定用騰訊雲直播+小程序的live-pusher組件+騰訊雲的h5拉流sdk來做

對接口這種工作一直都不難，大體記錄下流程以備不時之需

首先我們開通雲直播，https://console.cloud.tencent.com/live/livestat

常用的推流軟件有obs，像斗魚這種直播平台，我用的就是obs+斗魚直播伴侶推流

開通完之后，我們先看域名管理

域名管理

默認自帶一個推流域名

后面要添加自己的域名，注意cname要填好記錄，舉個例子，我在阿里雲申請的域名，techny.cn，我想用他的二級域名作為一個推流域名（播放域名也可以），那該怎么操作呢

首先在域名管理中添加域名 test.techny.cn

 

 然后在CNAME這一列可以看到一個記錄，我這邊配過，所以是綠色的對號，一般來說是紅色的❌

 然后去阿里雲添加二級域名，並解析CNAME記錄

這樣就可以了，我們等待一會，就會看到變成綠色的對號了

手動測試推流

我們可以先打開輔助工具，查找地址生成器，生成一個推流地址看看

 

 

可以先用obs自行測試一下，服務器就填推流地址，串流密鑰填推流名稱

 

然后我們點擊開始推流

 進入流管理，點擊測試，觀看直播畫面

 

正常情況下是能看到畫面的

這樣手動測試過沒問題后，推流地址的生成參考官方示例，我們只需要在前端去請求這個接口，獲取每個客戶端自己的推流地址就可以了

     /**
      * 獲取推流地址
      * 如果不傳key和過期時間，將返回不含防盜鏈的url
      * @param domain 您用來推流的域名
      * @param streamName 您用來區別不同推流地址的唯一流名稱
      * @param key 安全密鑰
      * @param time 過期時間 sample 2016-11-12 12:00:00
      * @return String url
      */
      function getPushUrl($domain, $streamName, $key = null, $time = null){
          if($key && $time){
              $txTime = strtoupper(base_convert(strtotime($time),10,16));
              //txSecret = MD5( KEY + streamName + txTime )
              $txSecret = md5($key.$streamName.$txTime);
              $ext_str = "?".http_build_query(array(
                  "txSecret"=> $txSecret,
                  "txTime"=> $txTime
              ));
          }
      return "rtmp://".$domain."/live/".$streamName . (isset($ext_str) ? $ext_str : "");
}
            
echo getPushUrl("123.test.com","123456","69e0daf7234b01f257a7adb9f807ae9f","2016-09-11 20:08:07");

小程序推流

這個小程序用的uni-app，不過和原生的沒什么區別，uni封裝的和原生的api其實一模一樣的，里面有個坑，算是自己的疏忽吧

官方文檔地址 https://uniapp.dcloud.io/component/live-pusher?id=live-pusher

官方例子

<template>
    <view>
        <live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
        mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
        aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
        ></live-pusher>
        <button class="btn" @click="start">開始推流</button>
        <button class="btn" @click="pause">暫停推流</button>
        <button class="btn" @click="resume">resume</button>
        <button class="btn" @click="stop">停止推流</button>
        <button class="btn" @click="snapshot">快照</button>
        <button class="btn" @click="startPreview">開啟攝像頭預覽</button>
        <button class="btn" @click="stopPreview">關閉攝像頭預覽</button>
        <button class="btn" @click="switchCamera">切換攝像頭</button>
    </view>
</template>

<script>
    export default {
        data: {
            fil: true
        },
        onReady() {
            // 注意：需要在onReady中 或 onLoad 延時
            this.context = uni.createLivePusherContext("livePusher", this);
        },
        methods: {
            statechange(e) {
                console.log("statechange:" + JSON.stringify(e));
            },
            netstatus(e) {
                console.log("netstatus:" + JSON.stringify(e));
            },
            error(e) {
                console.log("error:" + JSON.stringify(e));
            },
            start: function() {
                this.context.start({
                    success: (a) => {
                        console.log("livePusher.start:" + JSON.stringify(a));
                    }
                });
            },
            close: function() {
                this.context.close({
                    success: (a) => {
                        console.log("livePusher.close:" + JSON.stringify(a));
                    }
                });
            },
            snapshot: function() {
                this.context.snapshot({
                    success: (e) => {
                        console.log(JSON.stringify(e));
                    }
                });
            },
            resume: function() {
                this.context.resume({
                    success: (a) => {
                        console.log("livePusher.resume:" + JSON.stringify(a));
                    }
                });
            },
            pause: function() {
                this.context.pause({
                    success: (a) => {
                        console.log("livePusher.pause:" + JSON.stringify(a));
                    }
                });
            },
            stop: function() {
                this.context.stop({
                    success: (a) => {
                        console.log(JSON.stringify(a));
                    }
                });
            },
            switchCamera: function() {
                this.context.switchCamera({
                    success: (a) => {
                        console.log("livePusher.switchCamera:" + JSON.stringify(a));
                    }
                });
            },
            startPreview: function() {
                this.context.startPreview({
                    success: (a) => {
                        console.log("livePusher.startPreview:" + JSON.stringify(a));
                    }
                });
            },
            stopPreview: function() {
                this.context.stopPreview({
                    success: (a) => {
                        console.log("livePusher.stopPreview:" + JSON.stringify(a));
                    }
                });
            }
        }
    }
</script>

api的官方文檔  https://uniapp.dcloud.io/api/media/live-pusher-context?id=createlivepushercontext

其實已經很全面了，我們只需要改一下ui，調整一下css就好了，但是我做這塊遇到了一個問題，攝像頭一直黑屏，

剛開始我以為是生命周期的問題，在onLoad中這個組件的api無法加載，放在onReady中還是一樣，搞得我很懵逼，問了一個廣東的前端也是看不懂，他說之前沒遇到過這種情況

后來我打算用小程序的原生api來做，結果看到文檔中這么一段

 然后就去公眾號后台開通了一下，結果live-pusher組件就可以用了！ 所以基本的學習能力還是很重要的，畢竟文檔里都有

 我們只需要動態綁定url就可以了，別的都很簡單

Web拉流

官方文檔  https://cloud.tencent.com/document/product/454/7503

文檔很詳細，注意幾點就可以了

• 因為跨域，不能在本地調試，可以通過反向代理代理服務器到本地，進行本地調試
• 谷歌瀏覽器不支持flash
• web拉流兼容性問題還是蠻大的

我用谷歌瀏覽器調試會出現這種畫面，而且暫時不持支手機端

 后面幾天要做成一對多的聊天室，做的過程中看看還有什么問題，持續更新