视频监控平台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.rhkb.cn/news/368745.html

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

相关文章

Android Compose 十二:常用组件列表 上拉加载

列表 上拉加载 当前思路 判断 列表最后一个显示的条目 为 数据集合的长度-1 用来记录刷新状态 var refreshing by remember {mutableStateOf(false)}数据集合 val list remember{List(10){"条目》》${it}"}.toMutableStateList()}用来记录列表当前状态及状态变化…

Redis分布式集群部署

目录 一. 原理简述 二. 集群配置​​​​​​​ 2.1 环境准备 2.2 编译安装一个redis 2.3 创建集群 2.4 写入数据测试 实验一: 实验二: 实验三: 实验四: 添加节点 自动分配槽位 提升节点为master: 实验…

不知几DAY的Symfony---RCE复现

感谢红队大佬老流氓的供稿,此篇文章是针对Symfony框架的一个RCE漏洞复现 ​框架简介 Symfony是一个开源的PHP Web框架,它现在是许多知名 CMS 的核心组件,例如Drupal、Joomla!、eZPlatform(以前称为 eZPublish)或Bolt。…

vue模板语法v-html

模板语法v-html vue使用一种基于HTML的模板语法,使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上,所有的vue模板都是语法层面的HTML,可以被符合规范的浏览器和HTML解释器解析。 一.文本插值 最基本的数据绑定形式是文本插值&#…

Python学习篇:Python基础知识(三)

目录 1 Python保留字 2 注释 3 行与缩进 ​编辑4 多行语句 5 输入和输出 6 变量 7 数据类型 8 类型转换 9 表达式 10 运算符 1 Python保留字 Python保留字(也称为关键字)是Python编程语言中预定义的、具有特殊含义的标识符。这些保留字不能用作…

航空数据管控系统-①项目准备阶段:任务1:项目需求描述

任务描述 从用户的角度阐述项目的开发背景、使用范围及功能需求,从而指导学生独立完成项目的设计与开发。 任务指导 目录 标题 内容 备注 1. 项目概述 1.1 项目背景介绍 (1)说明产品是什么,什么用途 (2&#xff…

【FFmpeg】avcodec_send_frame函数

目录 1.avcodec_send_frame1.1 将输入的frame存入内部buffer(encode_send_frame_internal)1.1.1 frame的引用函数(av_frame_ref )1.1.1.1 帧属性的拷贝(frame_copy_props)1.1.1.2 buffer的引用函数&#xf…

Linux和mysql中的基础知识

cpu读取的指令大部分在内存中(不考虑缓存) 任何程序在运行之前都的加入到内存。 eip->pc指针,指明当前指令在什么位置。 代码大概率是从上往下执行的,基于这样的基本理论。既可以将一部分指令加载到CPU对应的缓存中&#xf…

git 还原被删除的分支

在多人项目开发中,有一次碰到忘记合并到master分支了,直接就把开发分支给删除了,现在记录下怎么还原被删除的分支 必须保证删除的分支之前已经被推送到了远程仓库 # 找出被删除分支的最后一个提交的哈希值 git reflog show# 找到提交哈希值…

【SSL 1823】消灭怪物(非传统BFS)

题目大意 小b现在玩一个极其无聊的游戏,它控制角色从基地出发,一路狂奔夺走了对方的水晶,可是正准备回城时,发现地图上已经生成了 n n n 个怪。 现在假设地图是二维平面,所有的怪和角色都认为是在这个二维平面的点上…

微信小程序的开发

前端:微信小程序开发的技术 后端:springboot的框架 一:微信小程序环境的搭建 1. 访问微信开发者官⽅⽹站的⼩程序开发⼯具下载⻚⾯。 2. 根据你的操作系统(Windows、macOS或Linux)选择合适的版本进⾏下载。 3. 下…

前端三件套开发模版——产品介绍页面

今天有空,使用前端三件套html、css、js制作了一个非常简单的产品制作页面,与大家分享,希望可以满足大家应急的需求。本页面可以对产品进行“抢购”、对产品进行介绍,同时可以安排一张产品的高清大图,我也加入了页面的背…

电气-伺服(4)CANopen

一、CAN Controller Area Network ,控制器局域网,80年的德国Bosch的一家公司研发可以测量仪器直接的实时数据交换而开发的一款串行通信协议。 CAN发展历史 二、CAN 的osi 模型 CAN特性: CAN 的数据帧 三、CANopen 什么是CANopen CANopen 的网络模型 …

力扣1685.有序数组中差绝对值之和

力扣1685.有序数组中差绝对值之和 记录左边之和 和 右边之和从左到右遍历每个元素 求res class Solution {public:vector<int> getSumAbsoluteDifferences(vector<int>& nums) {int n nums.size(),lsum 0,rsum accumulate(nums.begin(),nums.end(),0);ve…

MySQL8 快速导入数据指令load Data 最全详解

MySQL8 快速导入数据指令load Data 最全详解 修改mysql配置文件修改my.ini文件进入mysql,进入库"ceshi"查询你导入的数据表导入数据查询导入的数据 项目基础windows版本MySQL8 修改mysql配置文件 找到mysql的安装目录下的my.ini文件 C:\ProgramData\MySQL\MySQL Serv…

openEuler AArch64 架构 vCPU 热插拔技术内幕

OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;社区引领技术浪潮&#xff0c;早在openEuler 20.09 创新版本就率先使能并对外开放了 AArch64 架构 vCPU 热插特性。时隔四年&#xff0c;openEuler 24.03 LTS 版本补充了 vCPU 热拔能力&#xff0c;vCPU 热…

2.5 C#视觉程序开发实例1----设计一个IO_Manager

2.5 C#视觉程序开发实例1----设计一个IO_Manager 第一步目标&#xff1a; 1 实现获取IO触发信号Trig0 2 能够实现程序切换 3 图像处理后能够输出一个脉冲 1 IO 引脚定义 1.1 输入信号定义 1.2 输出信号定义 2 IO时序图 2.1 触发时序 2.2 切换程序时序图 3 IO_Manager.cs …

【运维】如何在Ubuntu中设置一个内存守护进程来确保内存不会溢出

文章目录 前言增加守护进程1. 编写监控脚本2. 创建 systemd 服务文件3. 启动并启用服务4. 验证服务是否运行注意事项 如何修改守护进程1. 修改监控脚本2. 重新加载并重启服务3. 验证服务是否运行总结 如何设置一个日志文件来查看信息1. 修改监控脚本以记录日志方法一&#xff1…

2024 年 亚太赛 APMCM (C题)中文赛道国际大学生数学建模挑战赛 | 量子计算的物流配送 | 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题&#xff01; 完整内容可以在文章末尾领取&#xff01; 该段文字…

【课程设计】基于python的一款简单的计算器

我们是大二本科生团队&#xff0c;主力两人耗时3天完成了这款计算器的制作。希望大家给我们多多引流&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 欢迎各位优秀的高考学子报考长安大学&#xff0c;报考长安大学电子信息工程专业。 欢迎有志于就…