小程序播放视频流（直播流）

目录

• 一、前言
• 二、微信小程序
• 三、钉钉小程序

一、前言

最近写小程序的过程中需要播放监控视频流的功能。

原先主要是在微信小程序中使用的。这次也要在钉钉上面实现，还是有一些差异的。

二、微信小程序

微信小程序是单独的一个直播的组件。这个组件的使用：

<live-player class="player" :src="videoSrc" autoplay @statechange="statechange" @error="playError" orientation="vertical">

监控用的是 rtmp 流，取到流后直接绑定到 src 就可以播放。

使用的时候要注意两个问题：

1、小程序类目的选择

可以根据自己小程序的定位选择合适的类目。

其中大部分的需要提交一些资质文件，其中有一个不需要：工具 > 视频客服，可以直接使用直播权限。

2、全屏

没有全屏按钮，需要自己实现

直播组件有自己的全屏方法可以直接调用（但是一直有问题，已解决，第二个参数加 this）

下面是实现代码：

// 初始化组件上下文（在 vue 组件中使用，第二个参数需要加上 this，否则无法全屏）
this.playerCtx = uni.createLivePlayerContext('monitorPlayer',this);

// 全屏
fullScreen(){
    if(this.isFullScreen){
        this.playerCtx.exitFullScreen({
            success: res => {
                this.isFullScreen = false;
                console.log('fullscreen success');
            },
            fail: res => {
              console.log('exit fullscreen success');
            }
          });
    } else{
        this.playerCtx.requestFullScreen({
            direction: 90,
            success: res => {
                this.isFullScreen = true;
                console.log('我要执行了');
            },
            fail: res => {
              console.log('fullscreen fail',res);
            },
            complete: res=>{
                console.log('全屏调用完成返回：',res);
            }
          });
    }
    
}

 

3、cover-view

由于要自己实现全屏，把放大按钮放在 live-player 上面，就去了解了 cover-view。

官方文档是：为了更好的体验使用原生组件进行的渲染（native）。

所以为了解决有时候需要在这些原生组件上面放一些要素可以使用 cover-view 放置在这些组件上。

三、钉钉小程序

钉钉小程序播放视频流（直播）是直接用 video 组件的。相对来说比较简单。

对应的这个 video 有直接全屏等的按钮功能（这个比微信方便很多）。

<video class="player" :src="videoSrc" :enableNative="true" autoplay></video>

同样直接绑定 rtmp 流地址给 src 就可以。

注意：

需要设置 enableNative 为 true 否则无法播放。

 

格式问题：

在使用 flv 视频流播放的时候有问题，安卓手机可以正常播放，IOS 无法播放（小程序调用系统原生组件播放，IOS 不支持 flv）