当前位置: 首页 > news >正文

直播推流和拉流--系统篇

        今天实现一下直播推流和拉流。服务器端使用opencloudos8系统。顺便把我之前写的小系统弄上去跑跑,搭建个git服务器,使用ssh协议,密钥方式。

        先展示一下在iphone上推流效果图

        再展示下在谷歌浏览器上的拉流效果图,safari浏览器和微信浏览器效果都是差不多

        再展示下在百度小程序上的拉流效果图

        实现推流,新建uniapp项目,命名为app,为何要新建uniapp项目啊,不想写条件编译,单独出负责app模块更加清晰。新建live-pusher.nvue,同时弄个同名文件夹。在index.vue里面写个跳转

<navigator url="live-pusher/live-pusher" hover-class="navigator-hover">
        <button type="default">实时音视频录制</button>
    </navigator>

        在live-pusher.nvue里面编写

<template>
    <view>
        <live-pusher id='livePusher' ref="livePusher" class="livePusher" url="这里填写服务器访问地址"
        mode="SD" :muted="false" :enable-camera="true" :auto-focus="true"
        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>
    </view>
</template>

<script>
    export default {
            data() {
                return {}
            },
            onReady() {
                // 注意:需要在onReady中 或 onLoad 延时
                this.context = uni.createLivePusherContext("livePusher", this);
            },
            methods: {
                statechange(e) {
                    console.log("statechange:" + JSON.stringify(e));
                },
                netstatus(e) {
                    console.log("netstatus:" + JSON.stringify(e));
                },
                error(e) {
                    console.log("error:" + JSON.stringify(e));
                },
                start: function() {
                    this.context.start({
                        success: (a) => {
                            console.log("livePusher.start:" + JSON.stringify(a));
                        },
                        fail: (err) => {
                            console.log('推流失败:', err);
                        }
                    });
                },
                close: function() {
                    this.context.close({
                        success: (a) => {
                            console.log("livePusher.close:" + JSON.stringify(a));
                        }
                    });
                },
                snapshot: function() {
                    this.context.snapshot({
                        success: (e) => {
                            console.log(JSON.stringify(e));
                        }
                    });
                },
                resume: function() {
                    this.context.resume({
                        success: (a) => {
                            console.log("livePusher.resume:" + JSON.stringify(a));
                        }
                    });
                },
                pause: function() {
                    this.context.pause({
                        success: (a) => {
                            console.log("livePusher.pause:" + JSON.stringify(a));
                        }
                    });
                },
                stop: function() {
                    this.context.stop({
                        success: (a) => {
                            console.log(JSON.stringify(a));
                        }
                    });
                },
                switchCamera: function() {
                    this.context.switchCamera({
                        success: (a) => {
                            console.log("livePusher.switchCamera:" + JSON.stringify(a));
                        }
                    });
                },
                startPreview: function() {
                    this.context.startPreview({
                        success: (a) => {
                            console.log("livePusher.startPreview:" + JSON.stringify(a));
                        }
                    });
                },
                stopPreview: function() {
                    this.context.stopPreview({
                        success: (a) => {
                            console.log("livePusher.stopPreview:" + JSON.stringify(a));
                        }
                    });
                }
            }
        }
</script>

<style>

</style>
 

        注意改写live-pusher组件的url,由于服务器实现方法多样,大家改成各自的服务器地址,另外把声音开了,:muted="false"

        拉流就以百度小程序拉流代码为例

        新建uniapp项目,命名为baidu。再新建live-player.vue文件,也建立同名文件夹。在index.vue里面也写个跳转

<navigator url="live-player/live-player" hover-class="navigator-hover">
        <button type="default">实现音视频播放</button>
    </navigator>

        在live-player.vue文件里面编写

<template>
    <view>
        <live-player
          src="这里写服务器端地址"
          autoplay
          @statechange="statechange"
          @error="error"
          style="width: 300px; height: 225px;"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>
        注意live-player组件的src写入各自服务器地址


http://www.mrgr.cn/news/61857.html

相关文章:

  • wireshark筛选条件整理
  • 如何选择适合自己的 Python IDE
  • Element Plus在Vue3的安装
  • No.23 笔记 | WEB安全 - 任意文件漏洞 part 5
  • vue3+vite5 打包优化
  • Adobe Media Encoder--将可变帧率视频转为固定帧率
  • 【机器学习(二十二)】零代码开发之LightGBM算法-Sentosa_DSML社区版
  • ssm014基于JSP的乡镇自来水收费系统+jsp(论文+源码)_kaic
  • 需求挖掘时,深入访谈5大技巧!
  • 【话题】Midjourney与未来设计:AI绘画工具能否取代人类创造力?
  • Nature子刊丨可再生能源对电力系统天气脆弱性的影响
  • Java面试经典 150 题.P27. 移除元素(002)
  • 【C++】C++预编译头文件、基准测试benchmark
  • QT相机连接与拍照
  • threejs 实现灯光照射模型有阴影
  • MyBatis 读取全局变量
  • 好用的透明加密软件有哪些
  • yolov8训练及测试(ubuntu18.04、tensorrt、ros)
  • 反射机制(简单版)
  • Nature: 一种基于宏基因组序列空间生成无参考的蛋白质家族的计算方法
  • 算法日记 13 day 二叉树
  • 【Java】继承
  • 【名单】科大睿智祝贺企业通过DCMM认证最新公示名单
  • 指令集架构(ISA)
  • 教你详细使用Spring框架中编程式事务
  • Vue3 学习笔记(十二)侦听器详解