api文檔：https://developers.weixin.qq.com/miniprogram/dev/api/media/live/wx.createLivePusherContext.html

開通標簽使用權限：live-pusher 和 live-player 是小程序內部用于支持音視頻上行能力的功能標簽

• 目前支持這兩個標簽的類目如下表格所示（只有非個人主體才有以下類目）：

image.png

• 符合類目要求的小程序绊率，需要在小程序管理后臺的【開發(fā)】>【接口設置】中自助開通推拉流標簽的使用權限：

image.png

live-player：是小程序內部用于支持音視頻下行（播放）能力的功能標簽扎酷。 ０硖贰２◎取！（基礎庫 1.7.0 開始支持歧焦，低版本需做兼容處理.

屬性定義

狀態(tài)碼

示例代碼

  <!-- 
    class 動態(tài)選擇誰的屏幕放大
    src 播放地址
    mode 模式 live-直播 RTC-實時通話
    binderrorPusher 渲染錯誤事件通铲，detail = {errMsg, errCode} 
    beauty-style 設置美顏類型 smooth  光滑美顏 nature 自然美顏
    auto-pause-if-open-native 當跳轉到其它微信原生頁面時毕莱，是否自動暫停本頁面的實時音視頻播放
    bindstatechange 狀態(tài)變化事件，detail = {code}
    object-fit 填充模式
    picture-in-picture-mode 設置小窗模式： push, pop颅夺，空字符串或通過數(shù)組形式設置多種模式（如： ["push", "pop"]）
  -->
  <live-player
    id="player"
    src="{{url_user}}" 
    mode="RTC" 
    autoplay 
    bindstatechange="statechangePlayer" 
    beauty-style="smooth" 
    auto-pause-if-open-native="{{false}}"
    object-fit="fillCrop"
    picture-in-picture-mode="['push', 'pop']"
    class="{{is_small == 2 ?'small-window' : 'player'}}" 
    data-class="{{is_small == 2 ?'small-window' : 'pusher'}}"
    bindtap="bindPlayerClick"/>

超低時延

的 RTC 模式支持500ms以內的超低時延鏈路朋截，可以應用在視頻通話和遠程遙控等場景中，要使用超低時延播放吧黄，需要注意如下幾點：
（1）推流端如果是微信小程序部服，請使用 的 RTC 模式。
（2）推流端如果是 iOS 或者 Android SDK拗慨，請使用 setVideoQuality 的 MAIN_PUBLISHER 模式廓八。
（3）推流端如果是 Windows，請不要使用 OBS赵抢，延時太高剧蹂，可以使用我們的 Windows SDK。
（4）min-cache 和 max-cache 請不要自行設置烦却，使用默認值宠叼。
（5）播放地址請使用超低延時播放地址，也就是帶了防盜鏈簽名的rtmp://地址，如下：
普通直播URL rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc >2s
超低延時URL rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc?bizid=bizid&txTime=5FD4431C&txSerect=20e6d865f462dff61ada209d53c71cf9 < 500ms

對象方法

LivePlayerContext

LivePlayerContext 實例冒冬，可通過 wx.createLivePlayerContext 獲取伸蚯。
LivePlayerContext 通過 id 跟一個 live-player 組件綁定，操作對應的 live-player 組件简烤。
wx.createLivePlayerContext('player', this)

LivePlayerContext.play()//播放

LivePlayerContext.stop()//停止

LivePlayerContext.mute()//靜音

LivePlayerContext.pause()//暫停

LivePlayerContext.resume()//恢復

LivePlayerContext.requestFullScreen(Object object)//進入全屏

LivePlayerContext.exitFullScreen()//退出全屏

LivePlayerContext.exitPictureInPicture()//退出小窗剂邮，該方法可在任意頁面調用

LivePlayerContext.snapshot(Object object)//截圖

LivePlayerContext.requestPictureInPicture()//進入小窗

var player = wx.createLivePlayerContext('pusher');
player.requestFullScreen({
  success(){
    console.log('enter full screen mode success!')
  }
  fail(){
    console.log('enter full screen mode failed!')
  }
  complete(){
    console.log('enter full screen mode complete!')
  }
});

小窗特性說明

live-player 小窗支持以下三種觸發(fā)模式（在組件上設置 picture-in-picture-mode 屬性）：
1.push 模式，即從當前頁跳轉至下一頁時出現(xiàn)小窗（頁面棧push）
2.pop 模式横侦，即離開當前頁面時觸發(fā)（頁面棧pop）
3.以上兩種路由行為均觸發(fā)小窗

此外挥萌，小窗還支持以下特性：

• 小窗容器尺寸會根據(jù)原組件尺寸自動判斷
• 點擊小窗，用戶會被導航回小窗對應的播放器頁面
• 小窗出現(xiàn)后丈咐，用戶可點擊小窗右上角的關閉按鈕或調用 context.exitPictureInPicture() 接口關閉小窗
• 當播放器進入小窗模式后瑞眼，播放器所在頁面處于 hide 狀態(tài)(觸發(fā) onHide 生命周期)，該頁面不會被銷毀棵逊。當小窗被關閉時，播放器所在頁面會被 unload (觸發(fā) onUnload 生命周期)银酗。

分割線

live-pusher 實時音視頻錄制（v2.9.1 起支持同層渲染）辆影。需要用戶授權 scope.camera、scope.record黍特。

live-pusher支持的類目同live-player一樣

屬性定義

狀態(tài)碼

示例代碼

  <live-pusher 
    id="pusher"
    url="{{url_doctor}}" 
    mode="RTC" 
    autopush 
    bindstatechange="statechangePusher" 
    beauty-style="smooth"
    binderror="binderrorPusher"
    class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    data-class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    bindtap="bindPusherClick" />

對象方法

LivePusherContext

LivePusherContext 實例稚叹，可通過 wx.createLivePusherContext 獲取焰薄。

LivePusherContext.start() //開始推流，同時開啟攝像頭預覽

LivePusherContext.stop() //停止推流扒袖，同時停止攝像頭預覽

LivePusherContext.pause() //暫停推流

LivePusherContext.resume() //恢復推流

LivePusherContext.switchCamera() //切換前后攝像頭

LivePusherContext.snapshot(Object object) //快照

LivePusherContext.toggleTorch() //切換手電筒

LivePusherContext.playBGM(Object object) //播放背景音

LivePusherContext.stopBGM() //停止背景音

LivePusherContext.pauseBGM() //暫停背景音

LivePusherContext.resumeBGM() //恢復背景音

LivePusherContext.setBGMVolume(Object object) //設置背景音音量

LivePusherContext.setMICVolume(Object object) //設置麥克風音量

LivePusherContext.startPreview() //開啟攝像頭預覽

LivePusherContext.stopPreview() //關閉攝像頭預覽

LivePusherContext.sendMessage(Object object) //發(fā)送SEI消息

Bug & Tip

1. tip：開發(fā)者工具上暫不支持塞茅。
2. tip：live-pusher 默認寬度為100%、無默認高度季率，請通過wxss設置寬高野瘦。
3. tip：waiting-image 屬性在 2.3.0 起完整支持網(wǎng)絡路徑、臨時文件和包內路徑飒泻。
4. tip：請注意原生組件使用限制鞭光。
5. tip: 相關介紹和原理可參考此文章

附上完整示例

！Ｅ⒁拧惰许！要注意兩端推流播放 比如是a端和b端

<!-- wxml-->
<view class="chat">
  <!-- 
    binderrorPusher 渲染錯誤事件，detail = {errMsg, errCode} 
    bindstatechange 狀態(tài)變化事件史辙，detail = {code}
    beauty-style 設置美顏類型 smooth  光滑美顏 nature 自然美顏
    beauty  0    美顏汹买，取值范圍 0-9 ，0 表示關閉
    device-position front   前置或后置聊倔，值為front, back
  -->
  <live-pusher 
    id="pusher"
    class="{{is_small == 1 ?'small-window' : 'pusher'}}" 
    url="{{push_stream}}" 
    mode="RTC" 
    autopush 
    bindstatechange="statechangePusher" 
    beauty-style="smooth"
    binderror="binderrorPusher"
    data-class="{{is_small == 1 ?'small-window' : 'pusher'}}"
    bindtap="bindPusherClick"
    device-position="{{device_position}}" />
  <!-- 
    class 動態(tài)選擇誰的屏幕放大
    src 播放地址
    mode 模式 live-直播 RTC-實時通話
    binderrorPusher 渲染錯誤事件晦毙，detail = {errMsg, errCode} 
    beauty-style 設置美顏類型 smooth  光滑美顏 nature 自然美顏
    auto-pause-if-open-native 當跳轉到其它微信原生頁面時，是否自動暫停本頁面的實時音視頻播放
    bindstatechange 狀態(tài)變化事件方库，detail = {code}
    object-fit 填充模式
    picture-in-picture-mode 設置小窗模式： push, pop结序，空字符串或通過數(shù)組形式設置多種模式（如： ["push", "pop"]）
  -->
  <live-player
    id="player"
    src="{{pull_stream}}" 
    mode="RTC" 
    autoplay 
    bindstatechange="statechangePlayer" 
    beauty-style="smooth" 
    auto-pause-if-open-native="{{false}}"
    object-fit="fillCrop"
    picture-in-picture-mode="['push', 'pop']"
    class="{{is_small == 2 ?'small-window' : 'player'}}" 
    data-class="{{is_small == 2 ?'small-window' : 'pusher'}}"
    bindtap="bindPlayerClick"/>
  <view class="fixed">
    <view class="" style="height: auto;">
      <image src="/images/gd.png" bindtap="hangUp"></image>
      <image src="/images/qh.png" bindtap="cutCamera"></image>
    </view>
  </view>
</view>

//js
const app = getApp()
Page({
  data: {
    player: '',
    pusher: '',
    is_small: 2, // 1-pusher 2-player
    pull_stream: 'https://domain/pull_stream',
    push_stream: 'https://domain/push_stream'
  },
  onLoad() {
    this.setData({
      player: wx.createLivePlayerContext('player', this),
      pusher: wx.createLivePusherContext(),
    })
  },
  onReady() {},
  onShow() {},
  //狀態(tài)變化事件
  statechangePusher(e) {
    const code = e.detail.code
    this.colse(code, 'Pusher')
  },
  //狀態(tài)變化事件
  statechangePlayer(e) {
    const code = e.detail.code
    // 2004 視頻播放開始
    if (code == '2004') {
      // this.data.pusher.pauseBGM()
    }
    this.colse(code, 'Player')
  },
  //掛斷的操作
  colse(code, type) {
    console.log(type)
    // 2006 視頻播放結束
    // -2301網(wǎng)絡斷連，且經(jīng)多次重連搶救無效纵潦，更多重試請自行重啟播放 
    // -1310 錄屏被其他應用打斷了
    // 3001 RTMP -DNS解析失敗
    // 3002 RTMP服務器連接失敗
    // 3003 RTMP服務器握手失敗
    // 3005 RTMP 讀/寫失敗徐鹤，之后會發(fā)起網(wǎng)絡重試
    let code_list = ['2006', '-2301', '-1310', '3001', '3002', '3003', '3005']
    if (code_list.includes(code)) {
      if (type == 'Pusher') {
        //掛斷
        this.hangUp()
      } else {
        //掛斷視頻、不推流邀层、關閉頁面
        //請求后臺接口
        this.hangUp()
      }
    }
  },
  //渲染錯誤事件
  binderrorPusher(errMsg, errCode) {
    // 10001 用戶禁止使用攝像頭
    // 10002 用戶禁止使用錄音
    if (errCode == '10001' || errCode == '10002') {
      api.showToast(errMsg)
    }
  },
  //切換大小屏
  bindPusherClick(e) {
    const _class = e.currentTarget.dataset.class
    if (_class == 'small-window' && this.data.is_small == 1) { // 說明pusher是小屏幕
      this.setData({
        is_small: 2
      })
    }
  },
  //切換大小屏
  bindPlayerClick(e) {
    const _class = e.currentTarget.dataset.class
    if (_class == 'small-window' && this.data.is_small == 2) { // 說明player是小屏幕
      this.setData({
        is_small: 1
      })
    }
  },
  //掛斷 
  hangUp() {
    console.log('掛斷');
    // 停止推流返敬，同時停止攝像頭預覽
    this.data.pusher.stop({
      success() {
        //掛斷視頻、不推流寥院、關閉頁面
        //dosomething
      },
      fail() {}
    })
  },
  //切換攝像頭
  cutCamera() {
    this.data.pusher.switchCamera({
      success() {
        console.log('切換攝像頭 success!')
      },
    })
  },
})

//css
.chat{
  position: relative;
  height: 100vh;
  width: 100%;
}
.player,.pusher{
  width: 100% ;height: 100%
}
.small-window{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  height: 200px;
  z-index: 100;
}
.fixed{
  position: fixed;
  bottom: 50px;
  left: 50px;
  right: 50px;
  z-index: 101;
  text-align: center;
}
.fixed image{
  width: 50px;
  height: 50px;
  margin: 0px 40px;
}