小程序實時音視頻自定義組件webrtc-room

時間  2019-12-26
標籤 程序 實時 音視頻 自定義 組件 webrtc room 简体版
原文   原文鏈接

標籤說明
<webrtc-room> 標籤是基於 <live-pusher> 和 <live-player> 實現的用於 WebRTC 互通的自定義組件。若是您但願直接使用 <live-pusher> 和 <live-player> 標籤完成對接，或者想要了解 <webrtc-room> 的內部原理，能夠參考 <live-pusher> 標籤。web

標籤詳解
屬性定義
屬性 類型 默認值 說明
template String 'float' 必要，標識組件使用的界面模版，demo 中內置 bigsmall，float 和 grid 三種佈局（用戶若是須要自定義界面，請看 界面定製）
sdkAppID String 必要，開通實時音視頻服務建立應用後分配的 sdkAppID
userID String 必要，用戶 ID
userSig String 必要，身份簽名，至關於登陸密碼的做用
roomID Number 必要，房間號
privateMapKey String 可選，房間權限 key，至關於進入指定房間 roomID 的鑰匙，若是 trtc 控制檯開啓了權限密鑰，則須要傳 privateMapKey（trtc 控制檯>選擇您的應用>帳號信息）
beauty Number 0 可選， 美顏指數，取值0 - 9，數值越大效果越明顯
whiteness String 0 可選， 美白指數，取值0 - 9，數值越大效果越明顯
muted Boolean false 可選，true 靜音 false 不靜音
debug Boolean false 可選，true 打印推流 debug 信息 fales 不打印推流 debug 信息
bindRoomEvent Function 必要，監聽 <webrtc-room> 組件返回的事件
enableIM Boolean false 可選，是否啓用 IM
bindIMEvent Function 當 IM 開啓時必要，監聽 IM 返回的事件
aspect String 9:16 可選， 寬高比3:4，9:16
minBitrate String 200 可選，最小碼率，該數值決定了畫面最差的清晰度表現
maxBitrate String 400 可選，最大碼率，該數值決定了畫面最好的清晰度表現
autoplay Boolean false 可選，進入房間後是否自動播放房間中其餘的遠程畫面，true：自動播放，false：不自動播放
enableCamera Boolean true 可選，開啓/關閉攝像頭
pureAudioPushMod Number 可選，純音頻推流模式，須要旁路直播和錄製時須要帶上此參數
1 => 本次是純音頻推流,不須要錄製 mp3 文件
2 => 本次是純音頻推流,錄製文件爲 mp3
recordId Number 可選，自動錄製時業務自定義 ID，將在錄製完成後經過直播錄製回調接口通知業務方（控制檯 - 直播錄製回調），相關文檔：直播錄製文件獲取，事件消息通知 注意：若是小程序與小程序或者小程序與 Web 端互通，且傳了 recordId，必須保證 web 端和小程序傳遞的值一致
smallViewLeft String '1vw' 小窗口距離大畫面左邊的距離，只在 template 設置爲 bigsmall 有效
smallViewTop String '1vw' 小窗口距離大畫面頂部的距離，只在 template 設置爲 bigsmall 有效
smallViewWidth String '30vw' 小窗口寬度，只在 template 設置爲 bigsmall 有效
smallViewHeight String '40vw' 小窗口高度，只在 template 設置爲 bigsmall 有效
waitingImg String 當微信切到後臺時的墊片圖片
loadingImg String 畫面 loading 圖片
小程序實時音視頻與 WebRTC 互通只須要保證兩端的 sdkAppID 與 roomID 一致json

操做接口
<webrtc-room> 組件包含以下操做接口，您須要先經過 selectComponent 獲取 <webrtc-room> 標籤的引用，以後就能夠進行相應的操做了。小程序

函數名 說明
start() 啓動
pause() 暫停
resume() 恢復
stop() 中止
switchCamera() 切換攝像頭
sendC2CTextMsg(receiveUser, msg, succ, fail) 發送 C2C 文本消息
sendC2CCustomMsg(receiveUser, msgObj, succ, fail) 發送 C2C 自定義消息
sendGroupTextMsg(msg, succ, fail) 發送羣組文本消息
sendGroupCustomMsg(msgObj, succ, fail) 發送羣組自定義消息
var webrtcroom = this.selectComponent("#webrtcroomid")
webrtcroom.pause();
sendC2CTextMsg
發送C2C文本消息微信小程序

參數 類型 是否必填 描述
receiveUser String 是 接收人的 userid
msg String 是 消息內容
succ Function 否 發送成功的回調
fail Function 否 發送失敗的回調
sendC2CCustomMsg
發送C2C自定義消息服務器

參數 類型 是否必填 描述
receiveUser String 是 接收人的 userid
msgObj Object 是 {data: '消息內容', ext: '', desc: ''}
succ Function 否 發送成功的回調
fail Function 否 發送失敗的回調
sendGroupTextMsg
發送羣組文本消息微信

參數 類型 是否必填 描述
msg String 是 消息內容
succ Function 否 發送成功的回調
fail Function 否 發送失敗的回調
sendGroupCustomMsg
發送羣組自定義消息xss

參數 類型 是否必填 描述
msgObj Object 是 {data: '消息內容', ext: '', desc: ''}
succ Function 否 發送成功的回調
fail Function 否 發送失敗的回調
事件通知
<webrtc-room> 標籤經過 onRoomEvent 返回內部事件，經過 onIMEvent 返回 IM 消息事件，事件參數格式以下:tcp

若是 enableIM 關閉了，則能夠忽略 onIMEventide

"detail": {
"tag": "事件tag標識，具備惟一性",
"code": "事件代碼",
"detail": "對應事件的詳細參數"
}
示例代碼函數

// Page.wxml 文件
<webrtc-room id="webrtcroom"
    roomID="{{roomID}}"
    userID="{{userID}}"
    userSig="{{userSig}}"
    sdkAppID="{{sdkAppID}}"
    privateMapKey="{{privateMapKey}}"
    template="1v3"
    beauty="{{beauty}}"
    muted="{{muted}}"
    debug="{{debug}}"
    bindRoomEvent="onRoomEvent"
    enableIM="{{enableIM}}"
    bindIMEvent="onIMEvent">
</webrtc-room>


// Page.js 文件
Page({
    data: {
        //...
        roomID: '',
        userID: '',
        userSig: '',
        sdkAppID: '',
        beauty: 3,
        muted: false,
        debug: false,
        enableIM: false
    },
    onRoomEvent: function(e){
        switch(e.detail.tag){
            case 'error': {
                //發生錯誤
                var code = e.detail.code;
                var detail = e.detail.detail;
                break;
            }
        }
    },
    onIMEvent: function(e){
        switch(e.detail.tag){
            case 'big_group_msg_notify': 
                //收到羣組消息
                console.debug( e.detail.detail )
                break;
            case 'login_event': 
                //登陸事件通知
                console.debug( e.detail.detail )
                break;
            case 'connection_event': 
                //鏈接狀態事件
                console.debug( e.detail.detail )
                break;
            case 'join_group_event': 
                //進羣事件通知
                console.debug( e.detail.detail )
                break;
        }
    },

  onLoad: function (options) {
        self.setData({
            userID: self.data.userID,
            userSig: self.data.userSig,
            sdkAppID: self.data.sdkAppID,
            roomID: self.data.roomID,
            privateMapKey: res.data.privateMapKey
        }, function() {
            var webrtcroomCom = this.selectComponent('#webrtcroom');
            if (webrtcroomCom) {
                webrtcroomCom.start();
            }
        })
    },

})

使用指引
step1: 下載自定義組件源碼
<webrtc-room> 並不是微信小程序原生提供的標籤，而是一個自定義組件，因此您須要額外的代碼來支持這個標籤。單擊 小程序 Demo 源碼 下載源碼包。

step2: 在工程中引入組件
在 page 目錄下的 json 配置文件內引用組件，這一步是必須的，由於 <webrtc-room> 並不是原生標籤。

"usingComponents": {
  "webrtc-room": "/pages/webrtc-room/webrtc-room"
}

在 page 目錄下的 wxml 文件中使用標籤

<webrtc-room id="webrtcroomid"
  roomID="{{roomID}}"
  userID="{{userID}}"
  userSig="{{userSig}}"
  sdkAppID="{{sdkAppID}}"
  privateMapKey="{{privateMapKey}}"
  template="float"
  beauty="{{beauty}}"
  muted="{{muted}}"
  debug="{{debug}}"
  bindRoomEvent="onRoomEvent"
  enableIM="{{enableIM}}"
  bindIMEvent="onIMEvent">
</webrtc-room>

step3: 獲取 key 信息
按照以下表格獲取關鍵的 key 信息，這是使用騰訊雲互通直播服務所必須的幾個信息：

KEY 示例 做用 獲取方案
sdkAppID 1400087915 用於計費和業務區分 step1 中獲取
userID xiaoming 用戶名 能夠由您的服務器指定，或者使用小程序的 openid
userSig 加密字符串 至關於 userid 對應的登陸密碼 由您的服務器 簽發
roomID 12345 房間號 能夠由您的服務器指定，數據類型爲 uint32
privateMapKey 加密字符串 當開啓權限密鑰時須要傳。進房票據：至關因而進入 roomid 的鑰匙 由您的服務器 簽發
step4: 進入房間

self.setData({
    userID: userID,
    userSig: userSig,
    sdkAppID: sdkAppID,
    roomID: roomID,
    privateMapKey: privateMapKey
}, function() {
    var webrtcroomCom = this.selectComponent('#webrtcroomid');
    if (webrtcroomCom) {
        webrtcroomCom.start();
    }
})

界面定製
建立界面模版

//第一步：新建 /pages/templates/mytemplate 文件夾，並建立 mytemplate.wxml 和 mytemplate.wxss 文件

//第二步：編寫 mytemplate.wxml 和 mytemplate.wxss 文件
//mytemplate.wxml
<template name='mytemplate'>
    <view class='videoview'>
        <view class="pusher-box">
            <live-pusher
                id="rtcpusher"
                autopush
                mode="RTC"
                url="{{pushURL}}"
                aspect="{{aspect}}"
                min-bitrate="{{minBitrate}}"
                max-bitrate="{{maxBitrate}}"
                audio-quality="high"
                beauty="{{beauty}}"
                muted="{{muted}}"
                waiting-image="https://mc.qcloudimg.com/static/img/
                                     daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
                background-mute="{{true}}"
                debug="{{debug}}"
                bindstatechange="onPush"
                binderror="onError">
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>我</cover-view>
            </live-pusher>
        </view>
        <view class="player-box" wx:for="{{members}}" wx:key="userID"> 
            <view class='poster'>
                <cover-image class='set'
                   src="https://miniprogram-1252463788.file.myqcloud.com/roomset_{{index + 2}}.png">
                </cover-image>
            </view>
            <live-player
                id="{{item.userID}}"
                autoplay
                mode="RTC"
                wx:if="{{item.accelerateURL}}"
                object-fit="fillCrop"
                min-cache="0.1"
                max-cache="0.3"
                src="{{item.accelerateURL}}"
                debug="{{debug}}"
                background-mute="{{true}}"
                bindstatechange="onPlay">
                <cover-view class='loading' wx:if="{{item.loading}}">
                    <cover-image src="/pages/Resources/loading_image0.png"></cover-image>
                </cover-view>
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>{{item.userName}}</cover-view>
            </live-player>  
        </view> 
    </view>
</template>

//mytemplate.wxss
.videoview {
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

webrtc-room 組件引入模版

//爲 <webrtc-room> 組件中的 webrtcroom.wxml 文件添加自定義模版
<import src='/pages/templates/mytemplate/mytemplate.wxml'/>
<view class='conponent-box'>
    <view styles="width:100%;height=100%;" wx:if="{{template=='1v3'}}">
        <template is='mytemplate' data="{{pushURL, aspect, 
                      minBitrate, maxBitrate, beauty, muted, debug, members}}"/>
    </view>
</view>

//爲 <webrtc-room> 組件中的 webrtcroom.wxss 文件添加自定義樣式
@import "../templates/mytemplate/mytemplate.wxss";
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程