Vue+uniapp直播参考资料

已于 2022-04-06 14:58:47 修改
阅读量2.2k 收藏 7
点赞数
分类专栏： uniapp+vue直播 文章标签： 前端
于 2022-04-02 17:48:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51258044/article/details/123896554
版权

1.APP推送到PC

通过Uniapp打开摄像头向pc端推流：（可以实现，但是没有声音，原因未知“？）

【干货篇】Vue+UniApp实现直播功能_破烂码农的博客-CSDN博客_uniapp 直播uniapp(推流)+vue（拉流）+nginx+OBS实现直播一、先看效果vue拉流uniapp推流https://blog.csdn.net/weixin_43848873/article/details/1189687262.PC推送到APP

(1)vue打开摄像头：（成功打开摄像头，如何推流？）

vue调用摄像头pc+移动端_Ponnenult的博客-CSDN博客_vue调用摄像头前言： vue调用本地摄像头目录:pc部分：pc效果图:实现代码：移动端部分：通过input开启手机前置摄像头， accept='image/*'是开启摄像头capture实现代码：pc部分：pc效果图:实现代码：<template> <div> <!--开启摄像头--> <Button type="primary" @click="callCamera...https://blog.csdn.net/weixin_44727080/article/details/108094965

(2)webrtc打开摄像头，webrtc推流，跳转到html文件显示（成功打开摄像头，推流rtsp地址从何而来？资料不完整）

初步认识WebRTC，实现网页调起摄像头实时显示功能_Etwases的博客-CSDN博客实现一个web网页调用摄像头并实时显示在网页的video标签中的功能这里有WebRTC官网，直接有更多功能的例子参考~~还有在线的例子=>传送门WebRTC相关的文档可以参考=>传送门话不多说开始抛砖引玉WebRTC是什么WebRTC（Web实时通信）是一个免费的开源项目，它通过简单的应用程序编程接口（API）为Web浏览器和移动应用程序提供实时通信（RTC ）。它允许直接的对等通信，从而允许音频和视频通信在网页内运行，而无需安装插件或下载本机应用程序。由Apple，Google.https://blog.csdn.net/luweibin19/article/details/106883362?ops_request_misc=&request_id=&biz_id=102&utm_term=%E9%A1%B5%E9%9D%A2webrtc%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-3-106883362.142%5Ev5%5Econtrol,157%5Ev4%5Econtrol&spm=1018.2226.3001.4187

后续---简单WebRTC快速推送RTSP流视频 - 哔哩哔哩抱歉拖更这么久...决定考研了，现在更忙了。之前的所有视频推送都会有一些延迟， 海康自己的网站（输入IP地址登陆的那个网站）也是基于插件开发的，我们这次就是以这个网站作为标准来比较其它方法。之前写的node.js推送的rtsp视频流相比来说有几十毫秒的延迟，一般无伤大雅，但是对那种实时性高的安检产品就很尴尬了，所以这次又尝试了WebRTC，废话说完上正题：结论：WebRTC更快，甚至视觉上可能比插件版本还快一点点...难度：原理很难，但是咱们是拿来主义，用别人写好工具的很简单费用：免费免费，开源https://www.bilibili.com/read/cv14070290

公网视频流访问之webrtc-streamer_本然酋长的博客-CSDN博客_webrtc-streamer前言之前两篇帖子视频流调试过程（海康威视+Kurento）使用Kurento提供公网视频流分别解决了从rstp视频流转码到页面播放和kurento的网络穿透的问题。但是吧，在我这次的具体方案中，它还是有个很讨厌的地方，就是需要https。而因为是政府项目，政府又因为很多麻烦的审核问题不想申请域名，这里就总是会出现一个看上去很吓人的安全警告。虽然无伤大雅，但是领导看见了总是会想一想的，说不定就给不少人找了很多麻烦。后来，我的同事发现了另一个项目webrtc-streamer 这个项目也是基于webhttps://blog.csdn.net/linghuanxu/article/details/122473654?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164886925516780271549104%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164886925516780271549104&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-122473654.142%5Ev5%5Econtrol,157%5Ev4%5Econtrol&utm_term=webrtcstreamer.js&spm=1018.2226.3001.4187

(3)通过脚本推流，成功打开摄像头，无报错，但一直显示推流地址不正确

vue+webrtc(腾讯云) 实现直播功能 pc端+移动端_南工gjl的博客-CSDN博客_vue+webrtc实现直播功能1.直播效果2.开直播步骤2.1引入腾讯web端(快直播)脚本2.2在需要使用直播的界面 添加一个视频容器(开启直播后，显示视频的位置)2.3创建直播对象，开启直播2.4关闭直播如果对你有帮助点个赞吧1.直播效果1.pc端2.移动端2.开直播步骤2.1引入腾讯web端(快直播)脚本脚本必须引入在 index.heml的body中 <body style="padding:0;margin:0"> //腾讯快直播脚本 <script src="hhttps://blog.csdn.net/F_fengzilin/article/details/121111967

(4)通过SRS推流，将srs项目集成到vue项目中，跳转到对应页面（本地需要配置对应https） 

vue 2.0 run dev使用https协议 - 简书产品小哥提需求让修改线上一个低版本的vue项目代码，现在公司接口使用的是https协议，线上的版本是http协议，自此走上了配置vue: https启动的道路 1.image...https://www.jianshu.com/p/078ac85b9458

<div class="pusher">
      <iframe :src="src" frameborder="0" style="width:100%;height:100%;"></iframe>
    </div>

前端世界的蒋小姐
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
共享单车管理系统vue3+uniapp+pinia+node+mongodb.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
WebRTC音频视频通话-支持android、ios、H5
u011007569的博客
09-20 4847
uniapp基于原始WebRTC音视频功能，不依赖任何三方音视频服务及原生插件
uniapp+websocket聊天功能实现（超详细！！附代码，可直接复用）
qq_47044909的博客
08-21 6173
最近项目上用到了聊天的功能，下面来分享一下关于socket，键盘弹出等问题，避免别的朋友踩坑。附整体框架的代码，可直接使用
探索uniapp开发在线直播平台源码及其后台实现
CUgtbffQIe的博客
04-30 902
其次，我们将介绍如何使用UniApp提供的组件和API进行开发，并利用Vue.js的特性实现数据的双向绑定和页面的动态更新。通过UniApp的跨平台特性和后台管理系统的支持，开发者能够快速构建一个功能完善的在线直播平台。通过UniApp框架的开发，实现了跨平台、快速开发的优势，结合后台管理系统，让开发者能够轻松构建一个功能完善的在线直播平台。关键词：UniApp、在线直播、跨平台、后台管理、功能需求、技术选型、架构设计、前后端分离、Node.js、MySQL、后台管理系统、数据交互、功能模块。
【史上最简单webSocket】uniapp＋webSocket 聊天室【客户端】
m0_54965271的博客
09-29 3748
史上最简单的webSocket客户端版本，采用uniapp的API进行讲解，一次便懂！
uniapp的总结
MAYouHeng的博客
08-02 698
官网:https://uniapp.dcloud.net.cn/ 引用:uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 前段时间工作中接到任务,使用uniapp开发一个产品,是一个药房购药审核系统,使用uniapp开发出一款客户端(安卓pad).感想是uniapp虽然很方便,可以将代码发布到各种平台,但是在开发复杂功能的时候显得很笨重,比如我们的产品
uni-app rtc插件集成指南及常见问题--iOS
anyRTC的博客
04-29 728
一、如何跑通示例demo？ 1、前往插件市场下载示例项目anyRTC音视频SDK插件 2、若手动下载示例zip，解压后在mainfest.json中获取DCloud_APPID。通过HBuilderX导入无需获取； 3、前往插件市场anyRTC音视频SDK插件，点击购买(0元)for云打包，选择mainfest.json中获取到的DCloud_APPID，如果没有找到，请刷新界面，点击下一步； 4、填写iOS包名，可在HBuilderX菜单栏中，选择"运行"->“运行到手机或模拟器”->"
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
支持私有化部署的教培行业教务管理系统，教培行业云化管理解决方案，springboot+mysql+vue+uniapp.zip
11-21
2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大作业和毕设项目的学生、或者相关技术学习者作为学习资料参考使用。 3、该资源包括全部源码，需要具备一定基础才能...
毕设-基于springboot+uniapp(vue)的小说阅读app
05-18
包括小说后台管理，小说阅读，阅读历史，书架，榜单，章节目录，小说推荐(推荐算法:协同过滤)，书城首页，书单，小说的基本信息，评论...软件:Xbuilder,idea,mysql(navicat) 技术：springboot，基于Vue的uniapp,mybatis
毕业设计&课设-基于Vue+SpringBoot+MySql+UniApp的前后端分离在线学习平台系统.zip
最新发布
06-09
下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1...
如何在uni-app 平台快速实现一对一音视频通话应用
热门推荐
即构开发者博客
04-13 2万+
“一套代码，多端运行”是很多开发团队的梦想。ZEGO SDK基于uni-app跨平台框架支持iOS、Android、Windows、macOS、HarmonyOS、Web、小程序并支持平台间互通，快速实现搭建多端音视频通话，大大降低开发和学习成本。 本文将引导快速创建和运行第一个uni-app+RTC项目，适合想要快速完成多端共用音视频项目的开发者；...
uniapp引入vue-flv-player导致app白屏报错
weixin_45059824的博客
09-13 918
uniapp引入vue-flv-player导致app白屏报错
uni - app 视频组件 viedeo
qq_25906119的博客
01-31 617
uni - app video视频组件的使用
uniapp原生插件-YL视频播放器
白玉梁的专栏
09-29 7162
YL视频播放器是一款适用于安卓端的高性能原生插件（支持3核心切换（exo，ijk，安卓原生），支持点播录播，小窗播放，支持各种视频播放常用功能，适用于各种常见播放场景如在线教育，小视频，朋友圈等等！
跨平台开发神器如何在Uniapp中使用WebView实现与Web页面的通讯！
码奴一只猿
04-21 4122
Uniapp 是一个跨平台的开发框架，可以同时开发出 iOS、Android、H5 等多个平台的应用。在开发过程中，我们可能需要与 Web 页面进行通讯，这时可以使用 WebView 组件来实现。
【uniapp使用webView播放flv格式直播流视频】
qq_46639390的博客
06-07 1951
uniapp除了使用live-player组件以外进行flv格式的直播流视频播放 webView禁止拖动以及滑动效果
WebRTC - Agora （声网）简介与实现音视频通话
weixin_34075551的博客
10-18 1128
Agora （声网）简介 官网： https://www.agora.io/cn/ 一个专注移动端的高清实时通话云服务解决方案。 SD-RTN（Software Defined Real-time Network）SD-RTN（Software Defined Real-time Network）是依赖于云计算技术并致力于全球实时音视频业...
【多人会议功能】uniapp - 微信小程序 - 腾讯云
qq_39891453的博客
10-20 3262
uniapp微信小程序通过腾讯云实现多人会议功能。
在vue+ts+uniapp医疗预约小程序中想要连接并使用mysql数据库，怎样连接
04-24
您好，要在vue ts uniapp医疗预约小程序中连接并使用MySQL数据库，您需要先在后端服务器上安装和配置MySQL数据库，并确保MySQL服务已经正常启动。然后在前端代码中使用一个支持MySQL的后端框架（如Express.js）发送HTTP请求到后端API，进行数据库的连接和查询。 具体的步骤如下： 1. 在后端服务器上安装和配置MySQL数据库。您可以访问MySQL官网下载并安装MySQL软件，然后按照官方文档指引进行配置。 2. 确保MySQL服务已经正常启动。您可以在命令行输入以下命令，检查MySQL服务的状态： ```shell systemctl status mysql ``` 3. 在后端代码中使用一个支持MySQL的后端框架（如Express.js）创建API接口，用于连接和查询MySQL数据库。您可以使用npm包管理工具安装相应的依赖库。 ```shell npm install mysql express ``` 4. 在API接口中使用MySQL模块进行数据库的连接和查询。例如： ```javascript const mysql = require('mysql'); const express = require('express'); const app = express(); const connection = mysql.createConnection({ host: 'localhost', user: 'username', password: 'password', database: 'database_name' }); connection.connect((err) => { if (err) throw err; console.log('Connected!'); }); app.get('/users', (req, res) => { const sql = 'SELECT * FROM users'; connection.query(sql, (err, result) => { if (err) throw err; console.log(result); res.send(result); }); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 以上是一个简单的Express.js程序，用于连接并查询MySQL数据库中的users表，并将查询结果返回给前端页面。其中，`host`是MySQL服务器的IP地址，`user`和`password`是您在MySQL中设定的用户名和密码，`database`是您要连接的数据库名称。 更多的连接和操作MySQL数据库的代码示例，您可以参考MySQL官方文档或者npm文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值