Vue+uniapp直播参考资料

前端世界的蒋小姐

已于 2022-04-06 14:58:47 修改

阅读量2.3k

点赞数

分类专栏： uniapp+vue直播文章标签：前端

于 2022-04-02 17:48:34 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_51258044/article/details/123896554

版权

uniapp+vue直播专栏收录该内容

3 篇文章 2 订阅

订阅专栏

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
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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