Rumah > hujung hadapan web > uni-app > uniapp如何实现直播

uniapp如何实现直播

coldplay.xixi
Lepaskan: 2023-01-13 00:44:28
asal
13029 orang telah melayarinya

 

uniapp实现直播的方法:首先通过推流,代码为【】;然后使用video标签实现拉流即可。

uniapp如何实现直播

本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。

uniapp实现直播的方法:

1、推流

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<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>

**

Salin selepas log masuk

2、拉流

这里是app拉流,用的是video标签,代码如下

1

2

3

4

5

6

7

8

9

<template>

    <view>

        <video src="" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>

    </view>

</template>

  

<script>

    export default {}

</script>

Salin selepas log masuk

src是请求接口得到的拉流地址

相关免费学习推荐:php编程(视频)

推荐(免费):uni-app开发教程

Atas ialah kandungan terperinci uniapp如何实现直播. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan