Comment accéder à la diffusion en direct de Qiniu sur uniapp

Ces dernières années, la diffusion en direct est devenue un sujet brûlant dans le monde en ligne, et de plus en plus d'entreprises et de particuliers ont commencé à s'engager dans l'industrie de la diffusion en direct. Qiniu Live, en tant que principal fournisseur de services cloud de diffusion en direct en Chine, est naturellement devenu le premier choix de nombreux développeurs. Cet article explique comment utiliser Uniapp pour accéder à Qiniu Live.

1. Préparation

Avant de commencer à accéder à Qiniu Live, vous devez effectuer quelques préparatifs :

1 Enregistrez un compte développeur Qiniu et obtenez une AccessKey et une SecretKey.

2. Installez l'environnement de développement uniapp et créez un projet uniapp.

3. Installez le plug-in RTMP SDK dans l'environnement uni-app.

2. Configurez le SDK

1. Recherchez le fichier manifest.json dans uniapp et ajoutez les autorisations liées à rtmp à "uni-app" - "Autorisations":

"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. un fichier config.js dans le répertoire racine pour stocker les paramètres liés à la diffusion en direct de Qiniu :

export const config = {

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

}

3. Écrivez le code

1. Créez un fichier nommé sous le dossier pages live et créez-le. un fichier nommé index.vue sous le dossier.

2. Ajoutez un canevas à la balise modèle d'index.vue pour afficher la diffusion en direct :

3. Ajoutez le code suivant :

import { config } from '../../config.js'; // Importez les paramètres liés à Qiniu Live
const qiniuLive = requirePlugin('qiniuLivePlugin');

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. Exécutez le test

Après avoir terminé les étapes ci-dessus, vous pouvez exécuter le test dans l'environnement de développement uniapp. Vous pouvez d'abord utiliser votre téléphone mobile pour tester et installer l'application en scannant le code QR. Si tout se passe bien, vous pouvez voir l'écran de test de Qiniu Live.

L'accès à Qiniu Live peut nécessiter une configuration et un débogage supplémentaires, mais les étapes présentées dans cet article sont suffisantes pour que vous puissiez démarrer une application de diffusion en direct qui peut essentiellement s'exécuter. Dans le même temps, nous espérons que les développeurs continueront à explorer et à apprendre, à innover dans le domaine de Qiniu Live et à promouvoir le développement de l'ensemble de l'industrie de la diffusion en direct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!