下面就以RTSP协议为例,介绍如何通过EasyPusher-Android向流媒体服务器做RTSP直播推流。 二、电脑端通过OBS Studio进行RTSP直播推流 OBS Studio默认不支持RTSP协议,需要先安装OBS-RTSPServer插件,才能实现RTSP推流功能。 有兴趣的朋友可以自行配置OBS Studio以便实现电脑端的RTSP直播推流。 三、手机端通过EasyPusher-Android进行RTSP直播推流 由于EasyPusher仅支持RTSP推流,而SRS不支持RTSP协议,因此服务端只能采用ZLMediaKit。 接着启动手机上的直播录制软件EasyPusher-Android,具体的操作步骤详见之前的文章《移动端的国产直播录制工具EasyPusher》。
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动端特有的touch事件 由于移动端设备大都具备触摸功能,所以移动端浏览器都引入了触摸(touch)事件。 封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能 移动端特有的touch事件 由于移动端设备大都具备触摸功能,所以移动端浏览器都引入了触摸(touch)事件。 封装移动端tap事件 由于点击事件经常使用,如果用click会有延迟问题,一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件,仅供参考。 ---- 参考文章: 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端进阶之选:移动端开发者也能轻松搭建的服务器 前言: 笔者最近收到了挺多客户端的留言,客户端在等待后台接口的时候遥遥无期,其实客户端只需要几步就能简单搭建一个后台,用于调试接口的,本期就简单搭建一个后台 ,用于客户端调试接口。 * @date 2018-11-12 */ public enum ResponseEnum { SUCCESS("0000","成功"), ERROR("9999","服务器异常 RequestBody LoginRequestDTO requestDTO) throws Exception{ //todo 校验账号密码 //校验好了,返回用户信息给到客户端 ; name = test; }; responseCode = 0000; responseDesc = "\U6210\U529f"; } 至此,一个完整的、简单的后台搭建完成,客户端的朋友们
传统方案中,开发者需依赖服务器端转码(如将RTSP转为HLS、RTMP或WebRTC),通过中间层技术适配浏览器兼容性。这一模式虽能勉强实现播放,却带来了高昂的隐性成本与性能损耗。 服务器转码的四大致命劣势1. 高延迟:体验的不可承受之重转码过程涉及视频解码、格式转换、协议封装等多环节,导致端到端延迟通常超过3秒,极端情况下可达10秒以上。 猿大师播放器:颠覆传统,定义Web端RTSP直播新标准面对行业痛点,猿大师播放器以“零转码、低延迟、全兼容”为核心突破点,实现RTSP流在Web端的原生级播放体验,彻底告别服务器转码的枷锁。 原生RTSP协议直连,无需服务器转码彻底摒弃传统转码方案,直接在网页端播放RTSP流,减少中间环节,避免因转码导致的服务器资源消耗与带宽浪费。 毫秒级超低延迟,最低300ms响应依托硬件解码与网络自适应技术,延迟低至300毫秒,较传统转码方案(延迟3-15秒)提升10倍实时性,满足交通应急指挥、事故快速响应等场景的严苛需求。3.
下面就以RTSP协议为例,介绍如何通过EasyPusher-Android向流媒体服务器做RTSP直播推流。 二、电脑端通过OBS Studio进行RTSP直播推流OBS Studio默认不支持RTSP协议,需要先安装OBS-RTSPServer插件,才能实现RTSP推流功能。 有兴趣的朋友可以自行配置OBS Studio以便实现电脑端的RTSP直播推流。 三、手机端通过EasyPusher-Android进行RTSP直播推流由于EasyPusher仅支持RTSP推流,而SRS不支持RTSP协议,因此服务端只能采用ZLMediaKit。 接着启动手机上的直播录制软件EasyPusher-Android,具体的操作步骤详见之前的文章《移动端的国产直播录制工具EasyPusher》。
1.移动端视口问题 视口是指浏览器的可视区域,移动端的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。 (注:实际上,这里说的375像素不是真实的物理像素,至于这个375像素是怎么来的,以及为什么大部分移动端的默认视口宽度是980,这就是另一个更加复杂的话题了,在此我们先不做讨论。) 我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意:在移动端,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动端看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 2.视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 2、视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 2、视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
判断移动端或pc端 经常在项目中会有支持 pc 与手机端需求。并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 先写个方法: ? _isMobile()) { alert("移动端"); //移动端跳转路由 } else { alert("pc端"); //Pc端跳转路由
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端 : 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用 m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式 , 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面 ; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 space-between; line-height: 40px; } </style>
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ? space-between; line-height: 40px; } </style>
选自hopinfirst.com 作者:James Tredwell 机器之心编译 参与:路雪、黄小天 本文介绍了适用于移动端的 10 个机器学习框架,包括针对计算机的机器学习框架和针对手机端的优化性能的框架 这就是为什么本文列表分为两部分:针对计算机的更强大的机器学习框架和针对移动端的优化性能的框架。 计算机机器学习框架 该列表包含运行在适当硬件上的一般框架,可以处理海量的数据集。 大量内置功能简便了验证、API 和服务器本地化设置。 移动端机器学习框架 谷歌 TensorFlow Lite 目前最完整的免费移动端解决方案就是 TensorFlow Lite,它最初适用于安卓机,不过一些人也在 iOS 设备上实现了该框架。 其主要特征是移动端部署,允许开发者在手机上实时运行不同的神经网络计算。 Bender 该框架很有前景,使用了不同的方法和苹果自己的 Core ML。
1、选择浏览器的最后一个选项(设置web服务器)或者边改边看模式 ----> 设置按钮 ----> 设置web服务器 ? 2、web服务器 ----> 外置web服务器 ----> 新建 ? 3、外置web服务器名称 ----> 浏览器运行路径 ----> 确定 ? ? 注意:浏览器运行路径必须和IP4的IP相同,端口好hbuilder默认的为8020 4、运行:web服务器 ----> HTML类文件 ----> 选择你刚刚新建的外置服务器地址 ----> 确定 ?
原文链接:10 Steps to a Successful Flutter Mobile App Launch - 原文作者 Vlad Prudnikov 本文采用意译的方式 在快速发展的数字化时代 ,开发一个移动端的应用不再是单纯的编码和测试。 我们在进入怎么开启一个移动端应用话题前,先来了解为什么 Flutter 正在成为开发者社区的宠儿。 创建个强大的应用程序启动策略 为了有效开启移动端应用,我们需要了解 Flutter 技术的多个方面。它需要对目标市场有清晰的愿景,对用户期望有深入理解,以及为我们应用程序有战略努力。 10. 培养社区 建立和培养一个用户社区可以引导一个更好用户参与,让用户提供有价值的反馈,宣传我们的应用程序,并促进积极的应用文化。这可能需要内置社区特性的方式,社交媒体组织,用户论坛或者线下会议。
1、移动端web页面显示图片在ios下回出现图片透明非常浅的问题,使用如下代码解决: Element{ opacity: 1; } 2、iphone及ipad下输入框默认内阴影 Element{