之前的文章《利用RTMP协议构建电脑与手机的直播Demo》介绍了如何使用RTMP Streamer实现完整的RTMP直播流程,另一篇文章《利用SRT协议构建手机APP的直播Demo》介绍了如何使用SRT 二、电脑端通过OBS Studio进行RTSP直播推流 OBS Studio默认不支持RTSP协议,需要先安装OBS-RTSPServer插件,才能实现RTSP推流功能。 有兴趣的朋友可以自行配置OBS Studio以便实现电脑端的RTSP直播推流。 三、手机端通过EasyPusher-Android进行RTSP直播推流 由于EasyPusher仅支持RTSP推流,而SRS不支持RTSP协议,因此服务端只能采用ZLMediaKit。 接着启动手机上的直播录制软件EasyPusher-Android,具体的操作步骤详见之前的文章《移动端的国产直播录制工具EasyPusher》。
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
1.移动端视口问题 视口是指浏览器的可视区域,移动端的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。 (注:实际上,这里说的375像素不是真实的物理像素,至于这个375像素是怎么来的,以及为什么大部分移动端的默认视口宽度是980,这就是另一个更加复杂的话题了,在此我们先不做讨论。) 我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 注意:在移动端,如果使用了背景图(比如雪碧图),记得用同样的方式调整背景图的尺寸。 题外话:移动端看上去是不是很麻烦?视口那么小,还要引入各种东西,里面要添加的又杂又乱,还要计算数值,是不是很麻烦?
前言 随着人们生活品质的提高,5G及手机硬件的快速发展,短视频/直播快速的成为了很多人的娱乐方式。 未标题-pp2.png 前一段时间有分享一个vue3.0网页端聊天实例,今天继续给大家分享一个最新开发的vue3.0小视频+直播实战项目。 Vscode 构建工具:vite.js 技术框架:vue^3.0.5 状态管理:vuex^4.0.0-rc.2 页面路由:vue-Router^4.0.3 UI组件库:vant^3.0.4 (有赞手机端vue3 360截图20210202094849957.png 有赞vue3移动端组件库 vant3 是有赞前端团队率先开发的一款vue3.0移动端UI组件库。 vue3.x自定义mobile版弹窗组件|vue3对话框 vue3实现小视频/直播效果 项目中的小视频和直播页面有些功能是公用的,小视频页可以上下左右滑动切换,直播页上下滑动并新增弹幕/滚动消息/送礼物等功能
随着移动互联网的不断发展,移动终端不管是在设备持有量,还是在用户数量上,都已经超越了传统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 即可 ; 三、移动端网页调试方法
在前端的移动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等整理
移动端基础 移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1、移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 搭建本地 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不尽相同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
移动端浏览器我们主要针对webkit内核进行兼容 现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一 1.移动端调试方法 Charome DevTools(谷歌浏览器) 的模拟手机调试 是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素,但移动端不同 一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比 3.2 4.1单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。 通过设备判断,如果是移动端打开,则自动跳转到移动端页面。 ,需花费很大精力去调兼容性问题 媒体查询 bootstarp 5.移动端技术解决方案 1.移动端浏览器 移动端浏览器基本以webkit内核为主,所以就考虑webkit兼容性问题。
实习期间主要在写微信端H5,遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端,只能自己摸索着来。
EasyNVR前端为了更好的用户体验,不仅仅设有PC客户端,还适应移动客户端; EasyNVR的客户端中PC端和移动端差异有很多。 例如: 由于PC端、移动端自身硬件的差异,所需要展示的样式也会存在一定的差别;在摄像机接入类型是ONVIF时,EasyNVR视频实时播放界面中PC端会提供云台控制界面;而为了用户有一个更好的观感和体验 ,在移动端会隐藏该界面。 ; if(isPC()){ $("#ipcam_div").show(); } 如果需要细分到移动端的具体类型可以根据isPC中agents数组中具体元素来进行区分;区分pc 端的浏览器类型可以根据navigator.userAgent来进行判断区分
判断移动端或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、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局
EasyPusher是一款国产的RTSP直播录制推流客户端工具,它支持Windows、Linux、Android、iOS等操作系统。 点击App界面右下角的设置按钮,打开设置页面如下图所示,注意修改上方编辑框中的服务端推流地址,比如rtsp://124.70.***.***/live/test。 至于服务端的流媒体服务器,可采用ZLMediaKit,有关ZLMediaKit的使用说明详见之前的文章《Linux环境安装ZLMediaKit实现视频推流》。
之前的文章《利用RTMP协议构建电脑与手机的直播Demo》介绍了如何使用RTMP Streamer实现完整的RTMP直播流程,另一篇文章《利用SRT协议构建手机APP的直播Demo》介绍了如何使用SRT 二、电脑端通过OBS Studio进行RTSP直播推流OBS Studio默认不支持RTSP协议,需要先安装OBS-RTSPServer插件,才能实现RTSP推流功能。 有兴趣的朋友可以自行配置OBS Studio以便实现电脑端的RTSP直播推流。 三、手机端通过EasyPusher-Android进行RTSP直播推流由于EasyPusher仅支持RTSP推流,而SRS不支持RTSP协议,因此服务端只能采用ZLMediaKit。 接着启动手机上的直播录制软件EasyPusher-Android,具体的操作步骤详见之前的文章《移动端的国产直播录制工具EasyPusher》。
解答: 移动直播自定义码率,代码如下 TXLivePushConfig *config = [[TXLivePushConfig alloc] init]; [config setEnableAutoBitrate 2、摄像头直播切换录屏直播 场景:开始摄像头直播推流,然后切换成录屏推流。 直播连麦,使用加速流地址播放失败。 5、移动直播,自定义视频采集,能否使用我们的美颜、水印功能? 解决方法:自定义音视频采集是无法使用我们移动直播的美颜,水印功能。需要客户自己进行渲染。我们的sdk只保留负责编码与发送的能力。 viewfile-1.png 7、移动直播,观众端进入房间,再切换到后台,进入抖音看视频,再回到直播App前台,发现没有声音。
最近在腾讯云集成了一下移动直播的SDK,从0到1的整个过程,中途遇到的问题也详细地给大家列举出来,希望对将要用到腾讯云移动直播产品的开发者们,起到一点点作用。 此前,移动直播开发文档有的,我再次就不再复述,大家可以按照文档的步骤,一步一步来。地址:https://cloud.tencent.com/document/product/454/7876。 停止连麦onKickoutJoinAnchor,观众停止推流,改变UI,主播停止 拉流修改UI 这里遇到一个问题:进行连麦的时候,观众端观看主播卡死,而主播端也不能刷出观众的连麦视频页面 (两边的推流都出现了问题 查看了房间监控的直播流量监控,发现看到连麦后,推流就为0帧了。 这里还遇到了一个问题,主播PK一端断开了,另一端退出不了,quitRoomPK:返回错误-6(房间不存在) 原因:没有使用onQuitRoomPK的回调方法,没有移除pk的界面,再次推出pk房间已经不存在了