How to access Qiniu live broadcast on uniapp

In recent years, live broadcast has become a hot topic in the online world, and more and more companies and individuals have begun to engage in the live broadcast industry. Qiniu Live, as the leading live broadcast cloud service provider in China, has naturally become the first choice of many developers. This article will introduce how to use uniapp to access Qiniu Live.

1. Preparation work

Before you start to access Qiniu Live Broadcast, you need to do some preparation work:

1. Register a Qiniu developer account and obtain a AccessKey and SecretKey.

2. Install the uniapp development environment and create a uniapp project.

3. Install the RTMP SDK plug-in in the uni-app environment.

2. Configure SDK

1. Find the manifest.json file in uniapp and add rtmp related permissions to "uni-app" - "Permissions":

"android": {

    "permission": [
       "android.permission.RECORD_AUDIO",
       "android.permission.CAMERA",
       "android.permission.MODIFY_AUDIO_SETTINGS",
       "android.permission.INTERNET"
    ]
},
"ios": {
    "permission": [
        "camera",
        "microphone",
        "photo",
        "storage",
        "location",
        "notification",
        "calendar",
        "contacts",
        "reminder",
        "bluetooth",
        "motion",
        "speech",
        "background",
        "fetch"
    ]
}

2. Create a config.js file in the root directory of the project to store Qiniu live broadcast related parameters:

export const config = {

rtmpUrl: "[推流地址]", // 推流地址
playUrl: "[播流地址]", // 播流地址
accessKey: "[AccessKey]", // 七牛AccessKey
secretKey: "[SecretKey]", // 七牛SecretKey
hub: "[空间名称]", // 存储空间名称
publish: "[流名]", // 推流流名
playback: "[流名]" // 播放流名

}

3. Write code

1. Create a folder named live under the pages folder, and create a folder named index.vue under the folder document.

2. Add a canvas to the template tag of index.vue to display the live broadcast:

3. Add the following code in the script tag of index.vue:

import { config } from '../../config.js'; // Import Qiniu live broadcast related parameters
const qiniuLive = requirePlugin('qiniuLivePlugin'); // Import Qiniu Live Plugin

export default {

onLoad() {
    this.initPlayer(); // 初始化播放器
},
data() {
    return {
        context: null
    }
},
methods: {
    initPlayer() {
        qiniuLive.init({
            rtmpUrl: config.rtmpUrl, // 推流地址
            playUrl: config.playUrl, // 播流地址
            accessKey: config.accessKey, // 七牛AccessKey
            secretKey: config.secretKey, // 七牛SecretKey
            hub: config.hub, // 存储空间名称
            publish: config.publish, // 推流流名
            playback: config.playback, // 播放流名
            canvasId: 'canvas', // canvas元素的id
            success: () => {
                this.context = uni.createCanvasContext('canvas', this); // 创建canvas对象
                qiniuLive.startPlay(); // 开始播放
            },
            fail: (error) => {
                uni.showToast({ // 显示错误提示信息
                    title: error,
                    icon: 'none'
                })
            }
        });
    }
}

}

4. Run the test

After completing the above steps, you can run the tests in the uniapp development environment. You can use your mobile phone to test first and install the application by scanning the QR code. If everything goes well, you can see the test screen of Qiniu Live.

Accessing Qiniu Live may require some additional configuration and debugging, but the steps introduced in this article are enough for you to start a live broadcast application that can basically run. At the same time, we hope that developers will continue to explore and learn, continue to innovate in the field of Qiniu Live, and promote the development of the entire live broadcast industry.

The above is the detailed content of How to access Qiniu live broadcast on uniapp. For more information, please follow other related articles on the PHP Chinese website!