更新记录

1.0.0（2025-10-31）

• 支持webrtc格式
• 支持禁止/开启音频和视频
• 支持视频截图

平台兼容性

uni-app(3.6.12)

uni-app x(3.6.12)

其他

七牛云低延时直播播放器webrtc://

功能

• 支持webrtc格式
• 支持禁止/开启音频和视频
• 支持视频截图

集成步骤

1. 拷贝demo里的AndroidManifest.xml文件到项目根目录
2. 集成插件，集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027
3. 如需定制或增加功能请点击插件标题下方的"进入交流群"私聊作者

文档

import {
    UTSQNplayer
} from '@/uni_modules/wrs-uts-qnplayer'

组件

        <!--  #ifdef  APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="videoplayer" :options="options"
    @onevent="onEvent"></embed>
<!--  #endif -->
<!--  #ifndef  APP-HARMONY -->
<wrs-uts-qnplayer ref='videoplayer' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onEvent="onEvent"></wrs-uts-qnplayer>
<!--  #endif -->

• 使用了该组件的页面需要用nvue或uvue
• 属性params是json格式的字符串

data() {
    const {
        windowWidth,
        windowHeight,
        statusBarHeight
    } = uni.getSystemInfoSync();
    var height = windowWidth / (16 / 9);
    height = windowHeight / 2
    let urlArray = [
        "webrtc://xxx/xx/xxx",

    ]
    let index = urlArray.length - 1
    index = 0
    let url = urlArray[index]
    let params = {}
    params.businessArray = [{
        business: "setUrl", // 设置播放地址
        params: { // 业务参数
            url: url,
            supportHttps: true
        }
    }]
    var isAndroid = false
    switch (uni.getSystemInfoSync().platform) {
        // android
        case 'android':
            isAndroid = true
            break;
            // ios
        default:
            isAndroid = false
            break;
    }
    let paramsStr = JSON.stringify(params)
    return {
        isAndroid: isAndroid,
        width: windowWidth,
        height: height,
        urlArray: urlArray,
        params: paramsStr,
        imageSrc: null,
        index: 0,
        showControlUI: true,
        msg: null,
        options: {
            params: paramsStr
        },
        title: 'Hello'
    }
},

params.businessArray数组里支持的业务对象有：

• 设置播放地址，其他业务接口需要放到setUrl业务后面

let url = "webrtc://xxx/xxx"
// 本地视频地址如：/xxx/xxx/xxx.mp4

{
    business: "setUrl", // 设置播放地址
    params: { // 业务参数
        url: url, // 视频地址，支持本地绝对路径或远程地址
        supportHttps: true // 是否支持https
    }
}

• 截屏，结果在onEvent回调

// 本地图片保存路径
let path = "/xxx/xx/xx.jpg"
{
    business: "getImage", // 业务
    params: {
        path: path
    }
}

• 开启/禁止音频

let mute = true
let newParams = {}
newParams.businessArray = [{
    business: "setMuteAudio", // 业务
    params: {
        mute: mute
    }
}]

let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 开启/禁止视频

let mute = true
let newParams = {}
newParams.businessArray = [{
    business: "setMuteVideo", // 业务
    params: {
        mute: mute
    }
}]

let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• onEvent回调事件

onEvent(e) {
    // this.showMsg("onEvent :" + JSON.stringify(e))
    let params = {}
    let detail = e.detail
    let opt = detail.opt
    switch (opt) {
        case "getImage": {
            console.log("onEvent:" + JSON.stringify(detail))
            let suc = detail.flag
            if (suc) {
                let path = detail.params.path
                this.imageSrc = "file://" + path
            } else {
                this.showMsg("截图失败:" + JSON.stringify(detail))
            }
        }
        break;
        case "onError": {
            this.showMsg("播放失败:" + JSON.stringify(detail))
        }
        break;
        default:
            break;
    }
}