浏览器端直播推流实现——系统篇

        浏览器端用vue3.5.12写,服务器端用php8.2+swoole5.1.4+thinkphp8写,流媒体服务器使用nginx-rtmp模块,拉流App端用uniapp(其他端各自实现吧,这里以App端为例)

        操作系统基于opencloudos8,还用到了ffmpeg,该安装就安装,这里不啰嗦安装步骤

        以下是vue的代码,比较简陋,各自整理

<template>
  <div>
    <video ref="videoElement" autoplay></video>
  </div>
  <div>
      <button @click="startMediaStream">开始获取媒体流</button>
    </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted  } from 'vue';
 
const videoElement = ref(null);
const ws = ref(null);
const localStream = ref(null);
 
onMounted( () => {
    ws.value = new WebSocket('ws://192.168.0.113:9502');
      ws.value.onopen = function(event) {
        console.log('WebSocket 连接已打开', event);
      };
      ws.value.onerror = function(error) {
        console.log('WebSocket 出错', error);
      };
      ws.value.onmessage = function(event) {
          console.log('收到消息', event.data);
          // 处理接收到的数据
        };
    ws.value.onclose = function(event) {
        console.log('WebSocket 连接已关闭', event);
      };
  
});

function startMediaStream() {
  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(function(stream) {
      localStream.value = stream;
            // 将音视频流发送到服务器(通过WebSocket)
            startSendingStream();
            
            if ("srcObject" in videoElement.value) {
              videoElement.value.srcObject = stream;
        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/467106.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RK3568平台开发系列讲解(设备树篇)设备树中CPU描述

🚀返回专栏总目录 文章目录 一、CPU节点1.1、节点结构:1.2、处理器属性:1.3、 处理器拓扑关系:二、cpu-map、 socket、 cluster 节点三、core、 thread 节点沉淀、分享、成长,让自己和他人都能有所收获!😄 一、CPU节点 设备树的 cpus 节点是用于描述系统中的处理器的一…

element plus中修改el-table的样式

文章目录 前情提要相关环境package.jsonvue代码结果 方式一直接看代码 方式二直接看代码 前情提要 因为项目中用到el-table的时候&#xff0c;需要将el-table表格的样式进行修改&#xff0c;将整个表格的背景颜色从白色变成透明&#xff0c;使得表格变得透明之后&#xff0c;展…

【启程Golang之旅】一站式理解Go语言中的gRPC

在本文中将深入探讨如何使用Go语言构建基于gRPC的高效服务通信&#xff0c;无论你是刚刚接触gRPC还是已经有一定基础的开发者&#xff0c;这篇文章都将带你从理论到实践&#xff0c;全面理解如何借助Go和gRPC提升应用程序的性能与可维护性。 目录 初识gRPC gRPC基本使用 初识…

Ubuntu22.04安装DataEase

看到DataEase的驾驶舱&#xff0c;感觉比PowerBI要好用一点&#xff0c;于是搭建起来玩玩。Dataease推荐的操作系统是Ubuntu22.04/Centos 7。 下载了Ubuntu22.04和DataEase 最新版本的离线安装包 一.安装ubuntu22.04 在安装的时候&#xff0c;没有顺手设置IP地址信息&#xff…

IDEA加载通义灵码插件及使用指南

安装通义灵码插件 登录通义灵码IDE插件 下载登录参考教程 https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide 本地工程和企业知识库准备 请下载本地工程和知识库压缩包&#xff0c;并在本地解压缩&#xff0c;其中包含demoProject和知识库文件…

第二届开放原子大赛-开源工业软件算法集成大赛即将启动!

第二届开放原子大赛-开源工业软件算法集成大赛作为开放原子开源基金会组织举办的开源技术领域专业赛事&#xff0c;聚焦开源底座框架平台建设&#xff0c;通过组件化集成的开发模式&#xff0c;丰富平台功能模块&#xff0c;拓展其应用场景&#xff0c;以此促进工业软件生态的繁…

帮你快速理解并巧记设计模式

经常因为记不住或不能理解设计模式而苦恼的童鞋们注意了&#xff0c;闲暇之余总结了常用的22中设计模式&#xff0c;并一一举例&#xff0c;帮助大家快速理解、牢记&#xff0c;如有不对的地方&#xff0c;欢迎大家指正哈 创建型模式 单例模式&#xff08;Singleton Pattern&…

甘肃高校大数据实验室建设案例分享

随着信息技术的快速发展&#xff0c;大数据技术已成为推动经济社会发展的重要引擎。甘肃省高度重视教育信息化建设&#xff0c;并积极支持省内高校建立大数据相关实验室&#xff0c;以促进学科交叉融合及创新人才培养。在此背景下&#xff0c;泰迪携手多所甘肃高校共同打造了一…

成都睿明智科技有限公司共赴抖音电商蓝海

在这个短视频风起云涌的时代&#xff0c;抖音作为现象级的社交媒体平台&#xff0c;不仅改变了人们的娱乐方式&#xff0c;更悄然间重塑了电商行业的格局。在这片充满机遇与挑战的蓝海中&#xff0c;成都睿明智科技有限公司凭借其敏锐的市场洞察力和专业的服务能力&#xff0c;…

【前端】JavaScript 方法速查大全-对象(二)

&#x1f525; 前言 在现代Web开发中&#xff0c;JavaScript已经成为不可或缺的编程语言。无论是前端开发还是后端服务&#xff0c;JavaScript都扮演着重要角色。为了帮助开发者更高效地使用JavaScript&#xff0c;本文将为您提供一个全面、系统的JavaScript方法参考&#xff…

右旋圆极化散射后的stocks矢量 与T3矩阵的关系

T3矩阵如下 斯托克斯与T3的关系如下。 斯托克斯与T3均没有平均处理&#xff0c;即斯托克斯是完全极化波的&#xff08;一种琼斯矢量得到&#xff09;&#xff0c;T3是由一个散射矩阵得到&#xff0c;只有一个特征值。

电子电气架构 -- 智能汽车电子电气架构开发关键技术

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

Windows下mysql数据库备份策略

Windows下mysql的增量备份和全量备份&#xff0c;并利用schtasks设置定时任务执行bat脚本。 一、备份要求 序号 备份类型 备份频次 备份时间 1 增量备份 每周一-每周六各一次 18:00:00 2 全量备份 每周日一次 18:00:00 二、备份方法 2.1增量备份 2.1.1准备工作…

使用CentOS宝塔面板docker搭建EasyTier内网穿透服务

0. 前言 EasyTier是一个简单、安全、去中心化的内网穿透 VPN 组网方案&#xff0c;部署方便&#xff0c;支持 MacOS/Linux/Windows/FreeBSD/Android平台&#xff0c;而且作者搭建了一个公共服务器&#xff0c;不想折腾自建服务&#xff0c;可以使用默认的公共服务器地址 tcp:/…

Moment.js、Day.js、Miment,日期时间库怎么选?

一直以来&#xff0c;处理时间和日期的JavaScript库&#xff0c;选用的都是Momment.js。它的API清晰简单&#xff0c;使用方便灵巧&#xff0c;功能还特别齐全。 大师兄是Moment.js的重度使用者。凡是遇到时间和日期的操作&#xff0c;就把Moment.js引用上。 直到有天我发现加…

AOSP去特征|AOSP导入android-studio|AOSP导入clion

什么是AOSP 开源性&#xff1a;AOSP的源代码公开&#xff0c;任何人都可以获取和修改&#xff0c;适合想要开发或自定义安卓系统的开发者。 灵活性&#xff1a;AOSP提供了基本的安卓功能&#xff0c;制造商可以基于AOSP开发出自己的定制系统&#xff08;如三星的One UI、小米的…

JavaScript 网页设计详解教程

JavaScript 网页设计详解教程 引言 JavaScript 是一种广泛使用的编程语言&#xff0c;主要用于网页开发。它使得网页具有动态交互性&#xff0c;能够响应用户的操作。随着前端开发的不断发展&#xff0c;JavaScript 已成为现代网页设计中不可或缺的一部分。本文将详细介绍 Ja…

Android关机流程知多少?

在 Android 中&#xff0c;关机流程涉及系统各个组件的协同工作&#xff0c;确保设备在断电之前能够安全地关闭所有活动并保存数据。以下是 Android 系统中关机流程的详细介绍&#xff1a; 1. 用户触发关机请求 关机流程由用户的操作触发&#xff0c;通常有以下几种方式&#…

【Mac】PD报错:无法为“Windows” 完成操作,虚拟机ID无效的解决办法

Parallels Desktop是Mac上一款非常常用的虚拟机软件&#xff0c;但是在使用过程中&#xff0c;可能会遇到一些问题不知道如何处理。比如有时会遇到PD报错&#xff1a;无法为“Windows 11”完成操作&#xff0c;虚拟机ID无效。 错误原因 电脑上安装过虚拟机&#xff0c;虚拟机被…

51c大模型~合集17

我自己的原文哦~ https://blog.51cto.com/whaosoft/11599989 #关于大模型「越狱」的多种方式 此项目是由伊利诺伊大学香槟分校&#xff08;UIUC&#xff09;的汪浩瀚教授主导&#xff0c;汇集了多名intern的共同努力而成。长久以来&#xff0c;这个跨学科的团队一直在前沿科…