uniapp がライブブロードキャストを実装する方法

Uniapp のライブ ブロードキャストの実装方法: まずストリームをプッシュします。コードは [Start Push] です。 ]; 次に、video タグを使用してストリームをプルします。

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

uniapp のライブ ブロードキャストの実装方法:

1. プッシュ ストリーミング

<template>
    <view class="content">
        <template>
            <view>
                <live-pusher
                    id="livePusher"
                    ref="livePusher"
                    class="livePusher"
                    url=""  **这里需要请求后端接口，拿到推流地址**
                    mode="SD"
                    :muted="true"
                    :enable-camera="true"
                    :auto-focus="true"
                    :beauty="1"
                    whiteness="2"
                    aspect="9:16"
                    @statechange="statechange"
                    @netstatus="netstatus"
                    @error="error"
                ></live-pusher>
                <button class="btn" @click="start">开始推流</button>
                <button class="btn" @click="pause">暂停推流</button>
                <button class="btn" @click="resume">resume</button>
                <button class="btn" @click="stop">停止推流</button>
                <button class="btn" @click="snapshot">快照</button>
                <button class="btn" @click="startPreview">开启摄像头预览</button>
                <button class="btn" @click="stopPreview">关闭摄像头预览</button>
                <button class="btn" @click="switchCamera">切换摄像头</button>
                <button class="btn" @click="bofang">去播放</button>
            </view>
        </template>
    </view>
</template>
<script>
export default {
    data() {
        return {
            context:[]
        };
    },
    onReady() {
        // 注意：需要在onReady中 或 onLoad 延时
        this.context = uni.createLivePusherContext(&#39;livePusher&#39;, this);
    },
    methods: {
        statechange(e) {
            console.log(&#39;statechange:&#39; + JSON.stringify(e));
        },
        netstatus(e) {
            console.log(&#39;netstatus:&#39; + JSON.stringify(e));
        },
        error(e) {
            console.log(&#39;error:&#39; + JSON.stringify(e));
        },
        start(){
            this.context.start({
                success: a => {
                    console.log(&#39;livePusher.start:&#39; + JSON.stringify(a));
                },
                error:err=>{
                    console.log(err)
                }
            });
        },
        close() {
            this.context.close({
                success: a => {
                    console.log(&#39;livePusher.close:&#39; + JSON.stringify(a));
                }
            });
        },
        snapshot() {
            this.context.snapshot({
                success: e => {
                    console.log(JSON.stringify(e));
                }
            });
        },
        resume() {
            this.context.resume({
                success: a => {
                    console.log(&#39;livePusher.resume:&#39; + JSON.stringify(a));
                }
            });
        },
        pause() {
            this.context.pause({
                success: a => {
                    console.log(&#39;livePusher.pause:&#39; + JSON.stringify(a));
                }
            });
        },
        stop() {
            this.context.stop({
                success: a => {
                    console.log(JSON.stringify(a));
                }
            });
        },
        switchCamera() {
            this.context.switchCamera({
                success: a => {
                    console.log(&#39;livePusher.switchCamera:&#39; + JSON.stringify(a));
                }
            });
        },
        startPreview() {
            this.context.startPreview({
                success: a => {
                    console.log(&#39;livePusher.startPreview:&#39; + JSON.stringify(a));
                }
            });
        },
        stopPreview() {
            this.context.stopPreview({
                success: a => {
                    console.log(&#39;livePusher.stopPreview:&#39; + JSON.stringify(a));
                }
            });
        },
        bofang(){
            this.$u.route({
                url: &#39;pages/index/index&#39;
            })
        }
    }
};
</script>
<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}
.text-area {
    display: flex;
    justify-content: center;
}
.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>
**

2. プル ストリーミング

これは、video タグを使用したアプリのストリーミングです。コードは次のとおりです。

<template>
    <view>
        <video src="" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>
    </view>
</template>
 
<script>
    export default {}
</script>

src は、リクエスト インターフェイスから取得したストリーミング アドレスです。

関連する無料学習の推奨事項: php プログラミング (ビデオ)

推奨事項 (無料): ユニアプリ開発チュートリアル

#

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