使用EasyPusher实现移动端的RTSP直播

二、电脑端通过OBS Studio进行RTSP直播推流 OBS Studio默认不支持RTSP协议，需要先安装OBS-RTSPServer插件，才能实现RTSP推流功能。 有兴趣的朋友可以自行配置OBS Studio以便实现电脑端的RTSP直播推流。 三、手机端通过EasyPusher-Android进行RTSP直播推流 由于EasyPusher仅支持RTSP推流，而SRS不支持RTSP协议，因此服务端只能采用ZLMediaKit。 接着启动手机上的直播录制软件EasyPusher-Android，具体的操作步骤详见之前的文章《移动端的国产直播录制工具EasyPusher》。 matcher.matches(); Log.d(TAG, "matches = " + matches); String ip = matcher.group(1); String port = matcher.group(2)

实战Flutter+SRS移动端低延迟直播

Flutter是移动端跨平台开发框架，可以快速实现多个跨平台的App开发，Flutter+SRS轻松实现移动端直播，如何做到低延迟直播请看视频。

直播视频网站源码，实现移动端的按钮拖动

iPhone-6_cfiOfPyTVzKC.jpeg Html <button id="btnFS" class="btn btn-success" >开始体验</button> Js var flag, btnEle, cur, nx, ny, dx, dy, x, y; flag = false; btnEle = document.getElementById("btnFS"); cur = {x: 0,y: 0 }; function down() {     var touch = ev

java移动端开发_移动端开发

1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。 我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。 < meta name=”viewport” content=”width=device-width”> 2.移动端误触解决办法 < meta name=”viewport” content=”width 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？

移动端重构实战系列2——line list

这个UI应该是每个移动端网页都必备的，而且使用场景也是非常的丰富，所以这里我们采用一步步循序渐进的方式去重构。 display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform:

移动端重构实战系列2——line list

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载 的名字是我自己起的（大概的意思是单行列表），要实现的东西为sheral的line list，对应的scss组件为_line-list.scss，下图为line-list的一个缩影： 这个UI应该是每个移动端网页都必备的 display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform:

vite2+vant+postcss搭建移动端

Button) app.mount('#app') <van-button type="primary">主要按钮</van-button> 安装px转rem插件 npm install postcss-px2rem-exclude lib-flexible -s 新建postcss.config.js module.exports = { plugins: { "postcss-px2rem-exclude ": { remUnit: 75, remPrecision: 2, exclude: /node_modules|folder_name

移动端重构实战系列2——line list

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 ”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析， 这个UI应该是每个移动端网页都必备的，而且使用场景也是非常的丰富，所以这里我们采用一步步循序渐进的方式去重构。 display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform:

Vue3.0+Vant3移动端短视频+聊天+直播实战

未标题-pp2.png 前一段时间有分享一个vue3.0网页端聊天实例，今天继续给大家分享一个最新开发的vue3.0小视频+直播实战项目。 vue-Router^4.0.3 UI组件库：vant^3.0.4 (有赞手机端vue3组件库) 弹框组件：v3popup（基于vue3自定义手机端弹出层组件） 字体图标：阿里iconfont图标 007360 360截图20210202094849957.png 有赞vue3移动端组件库 vant3 是有赞前端团队率先开发的一款vue3.0移动端UI组件库。 vue3.x自定义mobile版弹窗组件|vue3对话框 vue3实现小视频/直播效果 项目中的小视频和直播页面有些功能是公用的，小视频页可以上下左右滑动切换，直播页上下滑动并新增弹幕/滚动消息/送礼物等功能 * 100) } ok，基于vue3+vite2开发短视频/直播实例就分享到这里。

移动端安全攻防那些事儿，看这场直播就够了！

随着移动互联网的不断发展，移动终端不管是在设备持有量，还是在用户数量上，都已经超越了传统PC端，成为第一大入口端。其中，以手机为代表的移动终端反而变成了最大的威胁存在。 不难看出，移动安全在未来很长一段时间都将成为网络安全的重点。那么，移动端的安全风险有哪些？黑灰产给移动安全攻防带来了哪些挑战？针对代码逆向、模拟器等黑灰产工具如何做攻防？ 安全厂商们在移动端安全攻防方面又该做哪些努力呢？9月28 日下午 15:00 ，顶象移动安全专家邱寅峰将就移动端安全面临的威胁和挑战讲起，详细讲述如何在移动端进行安全攻防。 超多精彩，不容错过，直播现场更有多重好礼等你来拿！ 9月 28日 下午15:00，锁定顶象视频号&CSDN顶象技术直播间，一起来看看移动端安全攻防那些事儿。

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法

陌陌移动端直播P2P技术

简要介绍 1.1 传统直播模式 传统的直播技术尤其是一些最简单的直播技术，其主要依赖于主播端推送的RTMP流，或者其他流媒体格式的流数据至CDN进行转化分发，在观众端一般使用HLS、RTMP等各种协议 架构介绍 2.1 服务器架构介绍 假设直播房间里有1000个观众，如果客户端使用CDN拉流那么就算1人1MB的带宽，核算后整体下行带宽消耗也是个不小的数字；如果使用P2P技术，那么相当于原本从CDN拉流的 我们把每个接入P2P的观众看作是一个Node节点，当用户进入系统或进入直播间时，用户端的信息会被上传至DiscoverService用于Node的注册、认证、查询与分类，DiscoverService主要用于用户的发现 NormalNode：普通节点 目前不能提供分享不过可以向discover请求p2p连接的节点，例如用户使用上行带宽资源非常受限的移动网络，不能作为资源分享节点但可以正常获取数据。 P2P技术融入直播场景 下图展示的就是P2P技术融入直播场景下某个直播间的分享信息，其中蓝色区域代表P2P拉流，绿色区域代表CDN拉流。

陌陌移动端直播P2P技术

简要介绍 1.1 传统直播模式 传统的直播技术尤其是一些最简单的直播技术，其主要依赖于主播端推送的RTMP流，或者其他流媒体格式的流数据至CDN进行转化分发，在观众端一般使用HLS、RTMP等各种协议 架构介绍 2.1 服务器架构介绍 假设直播房间里有1000个观众，如果客户端使用CDN拉流那么就算1人1MB的带宽，核算后整体下行带宽消耗也是个不小的数字；如果使用P2P技术，那么相当于原本从CDN拉流的 我们把每个接入P2P的观众看作是一个Node节点，当用户进入系统或进入直播间时，用户端的信息会被上传至DiscoverService用于Node的注册、认证、查询与分类，DiscoverService主要用于用户的发现 NormalNode：普通节点 目前不能提供分享不过可以向discover请求p2p连接的节点，例如用户使用上行带宽资源非常受限的移动网络，不能作为资源分享节点但可以正常获取数据。 P2P技术融入直播场景 下图展示的就是P2P技术融入直播场景下某个直播间的分享信息，其中蓝色区域代表P2P拉流，绿色区域代表CDN拉流。

移动端爬坑记 --- （2）移动端访问设备判断 (user-agent) 及实现流程

ali F2(移动端数据展示) 入门

F2 安装 // yarn yarn add @antv/f2 // npm npm i --save @antv/f2 基本使用 Chart 创建图表实例 // html // 图表装载容器 <canvas id='chart'/> import F2 from '@antv/f2' const chart = new F2.Chart({ id: 'chart' // 挂载容器 进阶概念 度量 chart.source(data, defs) 设置数据源时，通过提供第二个参数， 可以设置数据中单一数据值的展示属性 分类 identity 常量 linear 连续数字 [1, 2,

Vant+px2rem搭建移动端项目

第一步 安装px转rem的插件 npm i lib-flexible postcss-px2rem --s 在根目录添加postcss.config.js文件 module.exports = { plugins : { autoprefixer: {}, "postcss-px2rem": { remUnit: 75, // 设计图为750 * height remPrecision : 2 // rem的小数点后位数 } } }; 在main.js添加 import 'lib-flexible/flexible' px2rem插件安装完成 第二步 安装vant vant文档 这里有个坑，px2rem会把第三方库也跟着转成了rem 卸载之前的postcss-px2rem npm uninstall postcss-px2rem --save-dev 安装postcss-px2rem-exclude { autoprefixer: {}, "postcss-px2rem-exclude": { remUnit: 75, remPrecision: 2,

10-移动端开发教程-移动端事件

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能 1.2 dblclick事件失效 由于双击缩放的存在，pc端的dblclick事件也失效了。 2. 移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。 封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。

10-移动端开发教程-移动端事件

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能 1.2 dblclick事件失效 由于双击缩放的存在，pc端的dblclick事件也失效了。 2. 移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。 封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。

移动端基础

移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。 通过设备判断，如果是移动端打开，则自动跳转到移动端页面。 ，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。 2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值 修复了浏览器bug 是模块化的 拥有详细文档 官网地址:

移动端基础

移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 2、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 4.1单独移动端页面（主流） 通常情况下，网址域名前面加m（mobile）可以打开移动端。 通过设备判断，如果是移动端打开，则自动跳转到移动端页面。 ，需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，所以就考虑webkit兼容性问题。