uniappでQiniuライブブロードキャストにアクセスする方法-uni-app-php.cn

uniappでQiniuライブブロードキャストにアクセスする方法

PHPz

リリース： 2023-04-20 14:16:55

オリジナル

590 人が閲覧しました

近年、オンラインの世界でライブブロードキャストが注目を集めており、ライブブロードキャスト業界に参入する企業や個人が増えています。 Qiniu Live は、中国の大手ライブブロードキャストクラウドサービスプロバイダーとして、当然のことながら多くの開発者の最初の選択肢となっています。この記事では、uniappを使用してQiniu Liveにアクセスする方法を紹介します。

1. 準備作業

Qiniu ライブブロードキャストへのアクセスを開始する前に、いくつかの準備作業を行う必要があります:

1. Qiniu 開発者アカウントを登録し、AccessKey を取得します。そしてシークレットキー。

2. uniapp 開発環境をインストールし、uniapp プロジェクトを作成します。

3. ユニアプリ環境に RTMP SDK プラグインをインストールします。

2. SDK を設定します

1. uniapp でmanifest.json ファイルを見つけて、rtmp 関連の権限を「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。プロジェクトのルートディレクトリに config.js ファイルを作成して、Qiniu ライブブロードキャスト関連のパラメータを保存します:

export const config = {

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

ログイン後にコピー

}

3. コードを記述します

1. ページフォルダーの下に live という名前のフォルダーを作成し、フォルダー document の下にindex.vue という名前のフォルダーを作成します。

2. ライブブロードキャストを表示するには、index.vue のテンプレートタグにキャンバスを追加します:

3.index.vue の script タグに次のコードを追加します:

import { config } from '../../config.js'; // Qiniu ライブブロードキャスト関連パラメータをインポートします
const qiniuLive = requirePlugin('qiniuLivePlugin'); // Qiniu Live Plugin をインポート

エクスポートデフォルト {

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. テストを実行します

上記の手順を完了すると、uniapp 開発環境でテストを実行できます。携帯電話を使用して最初にテストし、QR コードをスキャンしてアプリケーションをインストールできます。うまくいけば、Qiniu Live のテスト画面が表示されます。

Qiniu Live にアクセスするには、追加の構成とデバッグが必要になる場合がありますが、基本的に実行できるライブブロードキャストアプリケーションを開始するには、この記事で紹介する手順で十分です。同時に、開発者が探究と学習を続け、Qiniu Live の分野で革新を続け、ライブブロードキャスト業界全体の発展を促進することを願っています。

以上がuniappでQiniuライブブロードキャストにアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。