前端直播与SRS视频流服务的使用

已于 2022-03-03 08:17:19 修改
阅读量648 收藏
点赞数
文章标签： 直播 SRS 大疆
于 2022-03-02 16:30:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujianxun111/article/details/123233193
版权
本文介绍了大疆无人机的DJI GO应用，包括如何增强图传距离和缓解卡顿，以及御系列无人机的图传特性。讨论了无人机直播时的常见问题，如FPS较低和推流失败，并提供了官方直播教程。此外，还阐述了无人机如何通过GB28181标准接入内网，利用SRS服务实现直播。
摘要由CSDN通过智能技术生成

二、无人机

1、大疆DJI GO

【教程】
https://bbs.dji.com/forum.php?mod=viewthread&tid=38219
1、简介
横坐标：信道的编号
纵坐标：信号噪声强度
dBm一定是负值显示的，，dBm的绝对值越大，表示其噪声信号强度越低！
即-100噪声信号最小
噪声小了——说明干扰小——图传效果更好，更稳定
即那个【柱子】越矮越好
总结：纵坐标越低的噪声信号越小——信号干扰越小
在这里插入图片描述

2、通过现有的app如何设置如何增强图传距离，并缓解卡顿呢？
–距离
1）选择【自动选择】，图传距离和app设置基本上无关了
2）选择【自定义】，可以把【图传传输质量】调低一点,从而增强图传距离
–卡顿
开启【硬件解码】（有的直播APP中可以进行设置：相机–>启用硬件解码）

3、补充：图传还和哪些因素有关呢？
1）飞行环境
2）遥控器天线摆放
【论坛前辈帖子】
Phantom 2/3遥控器的天线应如何摆放的分析
http://bbs.dji.com/thread-16565-1-1.html
(出处: 大疆社区)
–（天线与遥控器呈160度，基本水平，保持不变）飞

最低0.47元/天 解锁文章
此人很懒，什么都木写
关注
前端应该了解的直播知识
weixin_48109878的博客
07-06 1020
背景在移动互联网时代，涌现了一大波视频直播平台，例如以淘宝、京东为代表的电商直播，以抖音、快手为代表的娱乐互动直播，以斗鱼、YY为代表的游戏直播，以猿辅导、作业帮为代表的教育直播……无论是...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
weixin_42268494的博客
08-07 2137
1.简介srs是一个简单的流媒体开源直播软件，ffmpeg是完整的跨平台解决方案，用于记录，转换和流传输音频和视频。2.相关官网下载页面：点击我到达在线演示播放页面：点击我到达Git页面：点击我到达VLC播放器官方：点击我到达系统版本：CentOS Linux release 7.6.1810 (Core)系统IP：172.20.10.154vlc版本：3.0.8SRS版本：2.0.263SRS下...
SRS学习-部署SRS(GB28181版)
孙霸天的专栏
05-16 9430
SRS学习-部署SRS(GB28181版) 介绍 SRS是一个简单高效的实时视频服务器，支持RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181。 SRS官网 单点版架构图如下所示 需求分析 我现在有个需求，在项目中我们会接入实时的视频监控摄像头，摄像头基本上都是支持RTSP格式推流，但这个格式的RTSP是没办法在谷歌内核的浏览器上使用的，所以我们需要使用一个集中的流转换服务，将流转换成web可以使用的格式，并且还需要保证流的实时性和稳定性。之前我使用过nginx-rtmp推流（.m3
SRS流媒体服务器从入门到精通（其一，环境搭建）
最新发布
weixin_61503529的博客
09-10 2495
SRS（Simple Realtime Server）是一个简单高效的实时视频服务器，支持多种直播和录播场景。SRS由国内开发者创建，是一款开源流媒体服务器软件。它支持RTMP、WebRTC、HLS、HTTP-FLV等多种协议，适用于直播、录播和视频客服等多种场景。高效性能：SRS设计简洁，具有高性能的特点，能够处理大量的并发连接和流媒体数据。多种协议支持：SRS支持多种流媒体协议，包括RTMP、WebRTC、HLS、HTTP-FLV等，能够满足不同场景的需求。易用性。
前端实现直播功能
热门推荐
CSDNzhaojiale的博客
07-08 1万+
前端直播功能实现 直播现在很火，但是直播具体是通过什么方式实现的呢，他是如何通过前端的方式实现的呢？带着这两个问题我们研究一下 一、熟悉我们先了解一下直播的具体流程 通过上图我们可以大致的看到。直播一共分为三个步骤 视频/图像采集 流媒体服务器(做推流和拉流的中转服务器) 拉流/播放 二、具体操作 流媒体服务器搭建 这里我们用的是nodejs+node-media-server来做我们的视频中间件。 你只需要建立一个文件夹，然后在这个文件夹做如下操作: 一、npm i node-media-ser
Web 前端点播直播入门
qq_43479942的博客
04-12 474
Web 前端点播直播入门 360前端先计划-第十四课 主讲：胡尊杰老师 什么是视频 格式与内容 文件扩展名≈媒体封装格式(媒体容器类型) 媒体封装格式≠音视频编码格式(使用了谁家的编码器) 文件内容： 头信息(格式、时长、帧率、码率、分辨率…) 索引信息 视频数据 音频数据 附加增强数据… 视频数据 1，显示器颜色呈现基于RGB(红绿蓝)颜色空间模型 2，视频领域大多基于YUV颜色空间做...
前端实现直播功能_前端直播功能怎么实现
m0_57472099的博客
04-12 841
通过上图我们可以大致的看到。直播一共分为三个步骤推流拉流。
前端videojs实现m3u8格式的直播
weixin_59017683的博客
07-14 1083
在onMounted里获取到数据列表后，就调用一次getVideoList（arguments），此处默认是有数据列表数据的，且arguments对象中即是包含.m3u8地址的，由于此处客户需要全屏至指定框大小，而不是全屏整个屏幕所以没用插件自带的全屏控件。三、template。
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z
12-18
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z 【多人视频在线会议-后端源码】https://download.csdn.net/download/DeepLearning_/87317683 视频会议的前端 使用webrtc实现图像传输...
srs webrtc前端拉流播放（附带测试地址）
03-09
在SRS中，我们可以配置WebRTC服务，将服务器端的流推送到WebRTC网关，然后前端通过RTCPeerConnection对象建立与SRS服务器的连接，拉取流进行播放。SRS支持RTMP、HLS、HTTP-FLV等多种协议，对于WebRTC，通常会使用...
前端使用jswebrtc实现视频流播放
weixin_39891473的博客
12-06 9066
前端页面播放webrtc
jisho-client:DictionarySRS前端。 使用Nuxt.js从头开始重写
04-14
jisho客户端 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production and launch server $ yarn build $ yarn start # generate static project $ yarn generate 有关工作原理的详细说明，请查看 。
直播前端技术预览
weixin_42493393的博客
04-24 528
因为现在直播大行其道，恰逢好友指点，我开始关注直播行业的前端技术。因为没有实际的项目经验，故而先从直播的实现方式来推导前端在直播技术内的所需的知识架构。 话不多说，直接上图。 参考文章 实现流程 难点问题 知识构成 ...
前端&点播+直播
lulchen的博客
04-12 504
文件格式与内容 文件扩展名≈媒体封装格式(媒体容器类型) 媒体封装格式≠音视频编码格式(使用了谁家的编码器) 文件内容： 头信息(格式、时长、帧率、码率、分辨率…) 索引信息 视频数据 音频数据 附加增强数据… 视频数据 显示器颜色呈现基于RGB(红绿蓝)颜色空间模型 视频领域大多基于YUV颜色空间做抽样存储 帧内预测&帧间预测复用进一步有效的压缩数据 P帧(前向预测帧)、B帧(双向...
直播流前端显示基于vue-videojs实现（PC端显示rtmp协议的流，手机端显示hls协议的流，配不出来你砍死我上铺！！）
FalconKkv的博客
06-12 1769
前端显示 rtmp视频流仅能在pc端使用，所以我们在手机端使用hls的m3u8的流 假设你已经有自己的视频流了 先运行npm下载依赖video-js和vue-video-player 之后在vue中，直接运行下方代码（小白福利：直接新建vue项目将下方代码替换到新建项目自带的helloworld.vue里即可），将stream_video变量更改为自己的视频流，即可使用 ps：如果你有现成直接可用的rtmp和hls协议的流，你粘贴搬运完代码以后应该就可以使用了，如果你没有可供测试的流，请你继续往下看下面的步
基于webrtc的前端录屏与直播
chenthe1的专栏
12-27 1794
getDisplayMedia是webrtc整体标准中的一个接口，要了解webrtc的入门信息，可以移步《WebRTC点对点应用架构研究》这篇2018年发表的博文，这篇文章可以作为入门了解webrtc及其基本开发步骤的知识文章。在上述文章之上，我们再去理解webrtc，可以这么理解：webrtc是一套客户端点对点流式信息传播的技术方案。其中我的新认识在于“流式信息”这个点，以前，我把重点放在“点对点”上，但逐渐我发现，但凡基于流式信息的传播，都可以在webrtc标准下去讨论。
2024年年度关于前端学习与工作的心得体会_前端工作学习体会
2401_84413180的博客
04-26 859
在2019年底到2020年底，这一年多的时间里，本人从移动端开发直接转岗到前端开发，俗话说得好：只要是语言都是相通的，尤其是程序语言相似度更高，因为它们的鼻祖是C语言，做程序开发的都学过C语言，but，对于本人来说，不同语言相当于不同的大山，对别人来讲隔行如隔山，而对于本人来讲则是隔语言如隔山，这句话形容太贴切了，前端开发这座大山差一点要了我的老命，其中的酸甜苦辣慢慢道来给你听。
前端实现视频流播放：封装一个可复用的HlsPlayer组件
小金子J的博客
08-15 1150
本文介绍了如何在前端使用Vue框架和hls.js库封装一个视频流播放组件HlsPlayer。通过简单的模板和脚本设置，该组件支持在任何Vue项目中快速引用和播放HLS视频流。组件封装提高了代码复用性，简化了维护工作。
vue如何实现srs的webrtc推流
05-13
要实现SRS的WebRTC推流，可以使用Vue.js结合WebRTC和SRS的API。下面是实现的一些步骤： 1. 首先在Vue.js项目中安装WebRTC和SRS的依赖包。 ``` npm install webrtc-adapter srs-librtmp --save ``` 2. 在Vue.js的组件中引入WebRTC和SRS的依赖库。 ```javascript import adapter from 'webrtc-adapter'; import { SrsRtmpClient } from 'srs-librtmp'; ``` 3. 实现WebRTC的视频采集和编码，以及SRS的RTMP推流。 ```javascript // 初始化SrsRtmpClient const srs = new SrsRtmpClient('rtmp://your-server-ip/app/streamKey'); // 获取视频流 navigator.mediaDevices.getUserMedia({ video: true }) .then((stream) => { // 获取video元素 const videoElement = this.$refs.video; // 将视频流绑定到video元素 videoElement.srcObject = stream; // 创建WebRTC PeerConnection const pc = new RTCPeerConnection(); // 将视频流添加到PeerConnection stream.getTracks().forEach((track) => { pc.addTrack(track, stream); }); // 监听ICE Candidate事件 pc.onicecandidate = (event) => { if (event.candidate) { // 发送ICE Candidate到SRS服务器 srs.sendIceCandidate(event.candidate); } }; // 监听SDP Offer事件 pc.createOffer().then((offer) => { pc.setLocalDescription(offer); // 发送SDP Offer到SRS服务器 srs.sendSdpOffer(offer); }); // 监听SDP Answer事件 srs.on('sdpAnswer', (answer) => { pc.setRemoteDescription(answer); }); }) .catch((error) => { console.error('getUserMedia error: ', error); }); // 开始推流 srs.start(); ``` 4. 在Vue.js的模板中添加video元素。 ```html <template> <div> <video ref="video" autoplay></video> </div> </template> ``` 这样，就可以使用Vue.js实现SRS的WebRTC推流了。需要注意的是，SRS服务器需要支持WebRTC推流功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

此人很懒，什么都木写

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值