更新记录

1.0.1(2021-08-02)

直播


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.22 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

推流

推流地址 urls: rtmp://live.mulanmakeup.ltd/live/test?txSecret=64ec99e91c8f4c3a907cea03b9e54b6f&txTime=612D98B5


<template>
    <view class="content">
        <live-pusher
            id="livePusher"
            ref="livePusher"
            :style="{width: width + 'px',height:height + 'px'}"
            :url="urls"  
            :mode="mode"
            :muted="false"
            :enable-camera="true"
            :auto-focus="true"
            :beauty="beauty"
            :whiteness="whiteness"
            @statechange="statechange"
            @netstatus="netstatus"
            @error="error"
        >
        </live-pusher>
        <view class="utils">
            <view class="beauty" @click="stop">
                停止
            </view>
            <view class="beauty" @click="start">
                开始
            </view>
            <view class="beauty" @click="switchCamera">
                切换
            </view>
        </view>

<!--        <button class="btn" @click="start">开始推流</button>
        <button class="btn" @click="pause">暂停推流</button>
        <button class="btn" @click="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>
        <button class="btn" @click="bofang">去播放</button> -->

    </view>
</template>

<script>
export default {
    data() {
        return {
            width: '350px',
            height: '1500px',
            mode: 'SD', //流视频模式,可取值:SD(标清), HD(高清), FHD(超清)
            beauty: 9, //美颜,取值范围 0-9(iOS取值范围为1) ,0 表示关闭
            whiteness: 9, // 美白,取值范围 0-9(iOS取值范围为1) ,0 表示关闭
            context: [],
            urls: `rtmp://live.mulanmakeup.ltd/live/test?txSecret=64ec99e91c8f4c3a907cea03b9e54b6f&txTime=612D98B5`
        };
    },
    onReady() {
        // 注意:需要在onReady中 或 onLoad 延时
        this.context = uni.createLivePusherContext('livePusher', this);
        //获取手机信息,并设置高度和宽度
        try {
            const res = uni.getSystemInfoSync();
            this.width = res.windowWidth;
            this.height = res.windowHeight;
        } catch (e) {
            // error
        }
    },
    onLoad() {

    },
    onBackPress(e){
      console.log("监听返回按钮事件",e);
      uni.switchTab({
        url:"/pages/index/index"
      })
      // 此处一定姚要return为true,否则页面不会返回到指定路径
      return true;
    },
    onShow() {
        //开启预览
        this.startPreview();
    },
    methods: {
        statechange(e) {
            console.log('状态变化事件:' + JSON.stringify(e));
        },
        netstatus(e) {
            console.log('网络状态通知事件:' + JSON.stringify(e));
        },
        error(e) {
            console.log('渲染错误事件:' + JSON.stringify(e));
        },
        start(){
            this.context.start({
                success: a => {
                    console.log('开始推流:' + JSON.stringify(a));
                },
                error:err=>{
                    console.log(err)
                }
            });
        },
/*        close() {
            this.context.close({
                success: a => {
                    console.log('livePusher.close:' + JSON.stringify(a));
                }
            });
        }, */
        snapshot() {
            this.context.snapshot({
                success: e => {
                    console.log('快照:' +JSON.stringify(e));
                }
            });
        },
        resume() {
            this.context.resume({
                success: a => {
                    console.log('恢复推流:' + JSON.stringify(a));
                }
            });
        },
        pause() {
            this.context.pause({
                success: a => {
                    console.log('暂停推流:' + JSON.stringify(a));
                }
            });
        },
        stop() {
            this.context.stop({
                success: a => {
                    console.log('停止推流:' + JSON.stringify(a));
                }
            });
        },
        switchCamera() {
            this.context.switchCamera({
                success: a => {
                    console.log('切换前后摄像头:' + JSON.stringify(a));
                }
            });
        },
        startPreview() {
            this.context.startPreview({
                success: a => {
                    console.log('开启摄像头预览:' + JSON.stringify(a));
                }
            });
        },
        stopPreview() {
            this.context.stopPreview({
                success: a => {
                    console.log('关闭摄像头预览:' + JSON.stringify(a));
                }
            });
        }
    }
};
</script>

<style scoped>
    .utils{
        position: fixed;
        bottom: 0rpx;
        width: 375px;
        background-color: #FFFFFF;
        text-align: center;
        flex-direction: row;
        opacity: 0.7;
    }
    .beauty{

    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问