Bagaimana untuk mengakses siaran langsung Qiniu di uniapp

Dalam beberapa tahun kebelakangan ini, siaran langsung telah menjadi topik hangat dalam dunia dalam talian, dan semakin banyak syarikat serta individu telah mula melibatkan diri dalam industri siaran langsung. Qiniu Live, sebagai penyedia perkhidmatan awan siaran langsung terkemuka di China, secara semula jadi telah menjadi pilihan pertama banyak pembangun. Artikel ini akan memperkenalkan cara menggunakan uniapp untuk mengakses Qiniu Live.

1. Persediaan

Sebelum anda mula mengakses Qiniu Live, anda perlu melakukan beberapa persediaan:

1. Daftar akaun pembangun Qiniu dan dapatkan AccessKey dan SecretKey.

2. Pasang persekitaran pembangunan uniapp dan cipta projek uniapp.

3. Pasang pemalam RTMP SDK dalam persekitaran uni-apl.

2. Konfigurasikan SDK

1 Cari fail manifest.json dalam uniapp dan tambahkan kebenaran berkaitan rtmp pada "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. Cipta fail config.js dalam direktori akar projek untuk menyimpan parameter berkaitan siaran langsung Qiniu:

eksport const config = {

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

}

3. Tulis kod

1 Buat folder bernama live di bawah folder pages dan buat folder bernama live di bawah folder .

2. Tambahkan kanvas pada teg templat index.vue untuk memaparkan siaran langsung:

3. Tambahkan kod berikut dalam teg skrip index.vue:

import { config } daripada '../../config.js'; // Import parameter berkaitan siaran langsung Qiniu
const qiniuLive = requirePlugin('qiniuLivePlugin'); // Import Qiniu Live Plugin

eksport lalai {

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

Selepas melengkapkan langkah di atas, anda boleh menjalankan ujian dalam persekitaran pembangunan uniapp. Anda boleh menggunakan telefon bimbit anda untuk menguji dahulu dan memasang aplikasi dengan mengimbas kod QR. Jika semuanya berjalan lancar, anda boleh melihat skrin ujian Qiniu Live.

Mengakses Qiniu Live mungkin memerlukan beberapa konfigurasi dan penyahpepijatan tambahan, tetapi langkah yang diperkenalkan dalam artikel ini sudah cukup untuk anda memulakan aplikasi siaran langsung yang pada asasnya boleh dijalankan. Pada masa yang sama, kami berharap pembangun akan terus meneroka dan belajar, terus berinovasi dalam bidang Qiniu Live, dan mempromosikan pembangunan keseluruhan industri siaran langsung.

Atas ialah kandungan terperinci Bagaimana untuk mengakses siaran langsung Qiniu di uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!