视频监控平台web客户端的免密查看视频页:在PC浏览器上如何调试手机上的前端网页(PC上的手机浏览器的开发者工具)

目录

一、手机上做前端页面开发调试

1、背景

2、视频监控平台AS-V1000的视频分享页

3、调试手机前端页面代码的条件

二、手机端的准备工作

1、手机准备

2、手机的开发者模式

3、PC和手机的连接

(1)进入调试模式

(2)选择PC和手机的连接方式

三、在PC端调试手机端的前端页面

1、在PC上,进入调试状态

2、连接上手机及其状态

3、在PC上显示手机上前端网页的调试页面

(1)条件

(2)PC上的操作

(3)PC上显示的调试页面

四、参考文档


一、手机上做前端页面开发调试

1、背景

        基于AS-V1000视频平台制作的视频分享页,可以在手机浏览器和电脑浏览器打开,该视频分享页输入URL后可以免登录观看相应的视频。

        然而电脑网页可以通过开发者工具调试,但是手机网页却无法这么方便地显示调试信息。手机端出现错误,比如看不到视频画面等,一些手机网页端出现的bug问题,非常不好定位;为了解决这个问题,需要能调试手机上的前端页面,因此我们找到了方法可以使用PC远程调试手机端的前端页面。

2、视频监控平台AS-V1000的视频分享页

        视频监控平台的web分享页,实现的功能包括:PTZ控制,免密视频浏览,语音对讲,视频水印等等。如下图所示:

         

        有兴趣的可以参考前面的文章:
        《视频监控平台-web客户端分享页实现PTZ控制,免密视频浏览,语音对讲,实时分享功能介绍》

 

3、调试手机前端页面代码的条件

        远程调试方法需要满足的条件如下:

        (1)手机进入开发者模式和usb调试模式。

        (2)电脑和手机都有相同的浏览器,比如edge,且电脑上的edge版本比手机上的版本更新。

        (3)手机用数据线对接电脑。

二、手机端的准备工作

1、手机准备

        准备的手机是华为MATE40E,OS是鸿蒙4.0.0版本。接下来以它为例介绍手机的配置:如何进开发者模式和打开usb调试模式。

2、手机的开发者模式

        打开设置,选择“关于手机”,连续点击下图所示位置7次,输入密码确认后就能进入开发者模式。如下图示:

3、PC和手机的连接

(1)进入调试模式

        打开开发者模式后,我们才可以打开usb调试模式。

        在上节的界面中,选择返回,进入设置页面,点击“系统与更新”。下拉选择开发人员选项。在调试栏中打开usb调试即可。如下图所示:

(2)选择PC和手机的连接方式

        通过手机的数据线连接调试电脑和手机,在手机上选择“传输文件或者传输照片”都可以;不可选择“仅充电”。如下图所示:

 

三、在PC端调试手机端的前端页面

1、在PC上,进入调试状态

        电脑上打开edge,在地址栏上输入:

        edge://inspect/#devices

       然耨,进入下图所示页面(目前电脑没有连接手机,因此Remote Target 没有任何设备。):

 

2、连接上手机及其状态

        连接上手机后,页面就会显示该手机的型号代码,如下图所示:

 

3、在PC上显示手机上前端网页的调试页面

(1)条件

        手机端已经打开浏览器,并访问了需要调试的视频分享页。

(2)PC上的操作

        在(1)的条件完成后,在PC上显示如下页面:

 

        其中新增加的部分为最下面的网页url和几个连接,其中网页url就是手机浏览器打开的分享页的网页,点击inspect进入下一步。

(3)PC上显示的调试页面

        如下图,为inspect后显示的页面效果,显然左边是手机上的网页显示,右边是调试信息,类似PC上浏览器的开发者工具显示的效果。

         至此,我们就可以像在PC上一样调试手机上的前端网页了。

四、参考文档

        《视频监控平台-web客户端分享页实现PTZ控制,免密视频浏览,语音对讲,实时分享功能介绍》


文章正下方可以看到我的联系方式:鼠标“点击” 下面的 “威迪斯特-就是video system 微信名片”字样,就会出现我的二维码,欢迎沟通探讨。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

#数据结构 笔记三

二叉树 1. 概念 二叉树Binary Tree是n个结点的有限集合。它或者是空集n0,或者是由一个根结点以及两颗互不相交、分别称为左子树和右子树的二叉树组成。 二叉树与普通有序树不同,二叉树严格区分左子和右子,即使只有一个子结点也要区分左右。…

React@16.x(47)路由v5.x(12)源码(4)- 实现 Route

目录 1&#xff0c;原生 Route 的渲染内容2&#xff0c;实现 1&#xff0c;原生 Route 的渲染内容 对如下代码来说&#xff1a; import { BrowserRouter as Router, Route } from "react-router-dom"; function News() {return <div>News</div>; }func…

Python中的双向哈希表(双向字典)

我们知道Python中的数据结构中的字典&#xff0c;它以键&#xff1a;值对的形式保存数据。在本文中&#xff0c;我们将讨论Python中的双向哈希表或双向字典。我们可以说一个双向字典可以表示为键的值。双向字典的一个例子是&#xff1a; 示例&#xff1a; dict{ 1 : Apple , …

【虚拟机】虚拟机网络无法访问问题【已解决】

【虚拟机】虚拟机无法上网问题【已解决】 问题探究解决方法法1&#xff1a;查看相关“网络服务”是否处于正常启动状态法2&#xff1a;重启网络法3&#xff1a;重新安装VMWare法4&#xff1a;使用NAT模式&#xff0c;每次打开win7都没连上网的解决办法 问题探究 安装了很多个虚…

Git 使用问题

Git 使用问题 1, 网络问题 1, 网络问题 # 报错如下&#xff1a; fatal: unable to access https://github.com/xianglingliwei/HRNet.git/: Failed to connect to github.com port 443 after 21044 ms: Couldnt connect to server在不能正常访问Github的区域&#xff0c;需要设…

上位机图像处理和嵌入式模块部署(mcu项目1:实现协议)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 这种mcu的嵌入式模块理论上都是私有协议&#xff0c;因为上位机和下位机都是自己开发的&#xff0c;所以只需要自己保证上、下位机可以通讯上&…

Feign 原理流程图练习-01

目录 作业: 老师给的参考流程图 要求 解答 知识扩展 Feign基础原理 接口定义 代理对象生成 请求调用 请求发送 响应处理 容错与熔断 总结 作业: 老师给的参考流程图 pdf版本 【金山文档 | WPS云文档】 Feign https://kdocs.cn/l/ctbagIyxN348 ​ 要求 结合上面…

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文&#xff0c;但是并没有真正自己实操过。现在对AOP有了更深一点的理解&#xff0c;就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁&#xff0c;单体应…

大模型提问中包括时间的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

班迪录屏(Bandicam)7.0下载以及安装教程

最近有小伙伴私信我&#xff0c;问我有没有好用的录屏工具&#xff0c;今天给大家分享一个我一直在使用的录屏工具&#xff0c;也是解锁了V1P版本&#xff0c;绿色版打开就可以使用~ Bandicam录屏&#xff08;PC&#xff09; Bandicam录屏是一款专为捕捉屏幕精彩瞬间而设计的…

PHP家政服务预约单开版微信小程序系统源码

&#x1f3e0; —— 便捷生活&#xff0c;从指尖开始&#x1f4aa; &#x1f308;【开篇&#xff1a;家政新风尚&#xff0c;一键触达】 在忙碌的生活节奏中&#xff0c;你是否渴望拥有一个温馨、整洁的家&#xff0c;却又苦于找不到合适的家政服务&#xff1f;现在&#xff…

结合Langchain来开发一个能够通过POST请求获取GPT回答的智能体

结合Langchain来开发一个能够通过POST请求获取GPT回答的智能体可以按照以下步骤进行。这个过程包括配置Langchain以利用外部API进行响应、设计流数据处理以及搭建一个简单的智能体来处理请求和回复。下面是一个详细的指南。 步骤 1: 安装必要的库 确保安装了Langchain和相关的…

总结:Flink任务执行

一、背景 一直很好奇,Flink是如何运行我们的java类任务的,今天先记录下。 二、步骤 1、项目中添加Maven 依赖项 <dependencies><!-- Flink Core --><dependency><groupId>org.apache.flink</groupId><artifactId>flink-java</arti…

EXTI寄存器,AFIO的简洁,EXTI配置的流程

一&#xff0c;AFIO简介 AFIO是Alternate Function Input/Output 的缩写&#xff0c;表示复用功能IO&#xff0c;主要用于实现IO端口的复用功能以及外部中断的控制 STM32外设有很多I/O以及内置外设&#xff08;如12C&#xff0c;ADC,ISP,USART等&#xff09;。为节省引出管脚的…

初试成绩占比百分之70!计算机专硕均分340+!华中师范大学计算机考研考情分析!

华中师范大学&#xff08;Central China Normal University&#xff09;简称“华中师大”或“华大”&#xff0c;位于湖北省会武汉&#xff0c;是中华人民共和国教育部直属重点综合性师范大学&#xff0c;国家“211工程”、“985工程优势学科创新平台”重点建设院校&#xff0c…

MySQL 日期和时间函数知识点总结

引言 在数据库管理和开发中&#xff0c;日期查询是一项基础且频繁使用的功能。MySQL提供了丰富的日期和时间处理函数&#xff0c;使得我们能够灵活地进行日期查询和数据处理。本文将详细介绍MySQL中关于日期查询的几个重要知识点&#xff0c;并附上具体的案例。 1. MySQL的日…

PhysioLLM 个性化健康洞察:手表可穿戴设备实时数据 + 大模型

个性化健康洞察&#xff1a;可穿戴设备实时数据 大模型 提出背景PhysioLLM 图PhysioLLM 实现数据准备用户模型和洞察生成个性化数据总结和洞察是如何生成的&#xff1f; 解析分析 提出背景 论文&#xff1a;https://arxiv.org/pdf/2406.19283 虽然当前的可穿戴设备伴随应用&…

最近,被“AI”狠狠刷屏了......

最近&#xff0c;被“AI”狠狠刷屏了。 作为时下最热门的话题&#xff0c;AI画图、AI配音、AI写文案、AI做视频......AI在最近两年可谓是火遍全球。ChatGPT、Midjourney和SORA等技术不断涌现&#xff0c;不仅深刻改变着我们的生活方式&#xff0c;也推动了AI技术的飞速发展。 …

vue使用scrollreveal和animejs实现页面滑动到指定位置后再开始执行动画效果

效果图 效果链接&#xff1a;http://website.livequeen.top 介绍 一、Scrollreveal ScrollReveal 是一个 JavaScript 库&#xff0c;用于在元素进入/离开视口时轻松实现动画效果。 ScrollReveal 官网链接&#xff1a;ScrollReveal 二、animejs animejs是一个好用的动画库…

2024.7.4

2024.7.4 【又苦又甜&#xff0c;也挺好嘛&#xff0c;很像生活】 Thursday 五月廿九 <theme oi-“graph theory”> P2865 [USACO06NOV] Roadblocks G 主要就是求一个严格次短路&#xff0c;但是有一定条件&#xff0c; 道路可以连续走 我们先求解出最短路&#xff0…