下面就以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》。
移动端进阶之选:移动端开发者也能轻松搭建的服务器 前言: 笔者最近收到了挺多客户端的留言,客户端在等待后台接口的时候遥遥无期,其实客户端只需要几步就能简单搭建一个后台,用于调试接口的,本期就简单搭建一个后台 ,用于客户端调试接口。 * @date 2018-11-12 */ public enum ResponseEnum { SUCCESS("0000","成功"), ERROR("9999","服务器异常 * @date 2018-11-9 */ public class LoginRequestDTO { @NotNull private String mobile; * @date 2018-11-9 */ public class LoginResponseDTO { private String mobile; private String
然而,一个长期困扰行业的痛点始终存在——如何在Web浏览器中直接播放RTSP流? 传统方案中,开发者需依赖服务器端转码(如将RTSP转为HLS、RTMP或WebRTC),通过中间层技术适配浏览器兼容性。这一模式虽能勉强实现播放,却带来了高昂的隐性成本与性能损耗。 服务器转码的四大致命劣势1. 高延迟:体验的不可承受之重转码过程涉及视频解码、格式转换、协议封装等多环节,导致端到端延迟通常超过3秒,极端情况下可达10秒以上。 猿大师播放器:颠覆传统,定义Web端RTSP直播新标准面对行业痛点,猿大师播放器以“零转码、低延迟、全兼容”为核心突破点,实现RTSP流在Web端的原生级播放体验,彻底告别服务器转码的枷锁。 原生RTSP协议直连,无需服务器转码彻底摒弃传统转码方案,直接在网页端播放RTSP流,减少中间环节,避免因转码导致的服务器资源消耗与带宽浪费。
下面就以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.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意:在移动端,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动端看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?
在当今时代,任何人都可以通过移动设备而非台式机访问您的网站,因此,拥有一个出色的移动网站,对于企业成功至关重要。 但是,创建一个出色的移动网站,对于屌丝SEO而言,可能会很棘手,因为您需要考虑很多重要的细微差别。 101.png 那么,移动端页面设计,常见的9个策略有哪些? 4、版本切换 无论您的移动网站设计多么出色,有时访客都只是希望看到您网站的完整PC端版本。 移动设备用户在访问您的网站时经常出门在外,因此他们对于需要较长时间加载的网站的耐心甚至更低。 9、信息配置 在制作一个出色的移动网站时,您应该记住的最后一个提示是,您应该始终优先考虑最重要的信息。 总结:针对移动端网页设计,仍然有诸多细节需要讨论,而上述内容,仅供参考! 蝙蝠侠IT https://www.batmanit.com/h/881.html 转载需授权!
一、移动端浏览器 ---- 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配 专栏 ; 【Android Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ; 三、移动端网页调试方法
上一篇我们讲了RTSP PAUSE消息,本篇我们来看下RTSP TEARDOWN消息! 该TREADOWN消息中,消息序列号为10,用户代理为LibVLC/3.0.11,这是我们使用VLC播放器rtsp流的一个代理,消息序列号为10, Session为之前SETUP请求后服务端返回的session 发出去请求后,服务端同样也会回馈response的消息,response的格式如下: ? 从抓包文件中可以看出,服务端回复200 Ok的消息,表示正常回复;同时也返回CSeq和Session,CSeq和Session的值与TEARDOWN请求中的值是一致的;另外返回了结束的日期和时间! ", realm="bcad28138995", nonce="a1a5b9d3865180dccbaffb1cb2eb2a27", uri="rtsp://192.17.1.73:554/Streaming
在前端的移动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等整理
移动端 移动端就不推荐那么多眼花缭乱的应用或者小程序了。就拿我们常用的微信、QQ等就可以满足我们移动端用户的日常需求。 1. 网页端 1. Catocr Catocr 这是一款完全免费的网页端文字识别工具,支持图片、PDF等输入源,可以在电脑端用,也可以在移动端用。 PearOCR界面简洁,所有过程均在网页端完成,无需下载任何软件,点开即用。 官方地址:https://pearocr.com/ PC端 1.
移动端基础 移动端浏览器我们主要针对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. 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动端1像素的问题。也是老马推荐大家使用的方式。
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 优点:布局快速简单方便、在移动设备中水平表现良好差异不大。 缺点:由于垂直方向像素恒定,可能水平很宽的屏幕会被拉伸变形严重,另外在高倍屏幕上1像素可能被多倍的物理像素显示,会变的非常粗。 2.1 横向百分比 + 纵向高度固定 首先看案例: 拉勾网移动端首页顶部的logo区域,不管如何变化浏览器的宽度,高度不变化,宽度自适应。 ? 这样优点非常多,首先开发人员直接像素还原,开发效率很高,也没有移动端1像素的问题。也是老马推荐大家使用的方式。
1、选择浏览器的最后一个选项(设置web服务器)或者边改边看模式 ----> 设置按钮 ----> 设置web服务器 ? 2、web服务器 ----> 外置web服务器 ----> 新建 ? 3、外置web服务器名称 ----> 浏览器运行路径 ----> 确定 ? ? 注意:浏览器运行路径必须和IP4的IP相同,端口好hbuilder默认的为8020 4、运行:web服务器 ----> HTML类文件 ----> 选择你刚刚新建的外置服务器地址 ----> 确定 ?