IOS中使用getUserMedia获取视频流展示到video中，进行人脸识别

最新推荐文章于 2024-01-29 16:51:42 发布
最新推荐文章于 2024-01-29 16:51:42 发布
阅读量1.7k 收藏 1
点赞数
文章标签： 人脸识别 ios safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39853639/article/details/112908405
版权
在Safari浏览器进行人脸识别时遇到黑屏问题，已找到解决办法。问题在于video组件未能正确显示视频流。通过在video标签上添加'playsinline'属性，成功解决了Safari中摄像头流无法显示的问题。此解决方案对于使用tracking.js或其他依赖摄像头的Web应用具有参考价值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

safari中使用tracking.js进行人脸识别，黑屏问题，已解决

在Safari浏览器中，能看到相机授权，也能看到录像标识但是vedio组件获取不到视频流显示出来，如下图

在这里插入图片描述

在video中加上playsinline属性就完美解决了

特别感谢这位小姐姐

Emmpty
关注
uniapp [全端兼容] - 详细实现人脸识别和活体检测功能，实时监测人脸是否进入区域及动作是否正确播报，免费自动提示引导动作及语音，提供提供实名认证、身份证识别、人脸信息采集、刷脸扫脸认证示例代码
王二红
07-05 1万+
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，人脸识别，扫脸认证，人脸认证，活体认证，身份认证，uni-app人脸识别详细教程，如何在app端实现免费人脸识别教程，如何在小程序端做，最好用的插件，安卓ios百度人脸识别、活体检测、人脸采集APP，H5人脸识别带前后摄像头，适合新手看的人脸识别功能教程，详细示例代码源码，有没有免费的，接入百度，阿里云人脸识别，百度，api，活体检测，数据采集，动作提示指引，语音提示指引，报错，无法核验一直出错，根本用
Web前端JS通过getUserMedia API 获取 麦克风(话筒)、摄像头(相机) 等音视频多媒体数据（语音、录音、录屏、相机、视频对话、屏幕共享、流媒体）
热门推荐
沐枫
05-09 1万+
Web前端JS通过getUserMedia API 获取 麦克风(话筒)、摄像头(相机) 等音视频多媒体数据（语音、录音、录屏、相机、视频对话、屏幕共享、流媒体）
html读取yuv,WebRTC 使用之 —— 使用 getUserMedia 获取视频流
weixin_28934081的博客
06-30 1088
我们都知道 WebRTC 可以用来进行实时的音视频处理，那么第一步肯定是要获取本地的音视频流，在 WebRTC 中获取本地的音视频流，需要用到 API：getUserMedia。本节教程就叫你如何使用 getUserMedia 来获取本地的音视频流。创建工程创建如下的工程： 一个 index.html + 一个main.js。在 html 中添加 video因为要显示视频，所以要在 html...
ios开发调用getusermedia_WebAR开发资源干货汇总
weixin_39864453的博客
11-25 766
关于WebARWebAR就是在Web端集成AR的功能。WebAR使用WebRTC，WebGL和现代传感器API的组合技术，通过Web浏览器提供对基于Web的增强现实的访问与实现。WebAR优缺点WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上，无需APP，轻松实现跨平台。WebAR 可以实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果，并...
ios开发调用getusermedia_移动端身份证OCR识别技术SDK集成开发
weixin_39876145的博客
11-25 246
一，身份证识别SDK移动互联网在快速发展，APP进入了我们的生活，越来越多的公司都推出了自己的移动APP，这些APP多数都涉及到个人身份证信息的输入认证(即实名认证)，如果手动去输入身份证号码和姓名，速度非常慢，且用户体验非常差。为了提高在移动终端上输入身份证信息的速度和准确性，开发出身份证识别SDK，以满足各行业应用需求，给用户带来更好的体验。只需将身份证识别SDK集成到APP中，即可通过手机摄...
ios开发调用getusermedia_iOS开发--探究iOS线程调用栈及符号化
weixin_39622289的博客
12-01 247
探究iOS线程调用栈及符号化概念调用栈，也称为执行栈、控制栈、运行时栈与机器栈，是计算机科学中存储运行子程序的重要的数据结构，主要存放返回地址、本地变量、参数及环境传递，用于跟踪每个活动的子例程在完成执行后应该返回控制的点。一个线程的调用栈如上图所示，它分为若干栈帧(frame)，每个栈帧对应一个函数调用，如蓝色部分是DrawSquare函数的栈帧，它在运行过程中调用了DrawLine函数，栈帧为...
ios开发调用getusermedia_字节跳动iOS客户端面经第七期
weixin_39664994的博客
12-01 384
长安宁。——敢敢C和C++的区别1)C是面向过程的语言，是一个结构化的语言，考虑如何通过一个过程对输入进行处理得到输出；C++是面向对象的语言，主要特征是“封装、继承和多态”。封装隐藏了实现细节，使得代码模块化；派生类可以继承父类的数据和方法，扩展了已经存在的模块，实现了代码重用；多态则是“一个接口，多种实现”，通过派生类重写父类的虚函数，实现了接口的重用。2)C和C++动态管理内存的方...
Html5调用手机摄像头并实现人脸识别的实现
09-22
4. **上传图像** - 将canvas中的图像数据发送到服务器，这里可以利用百度AI的接口，上传图像进行人脸识别。 5. **处理识别结果** - 服务器返回识别结果后，将其显示在网页上，提供用户反馈。 **核心代码** ```html ...
前端获取电脑摄像头权限并拍照进行人脸识别
wen_binobject的博客
03-26 1万+
为什么要做这个呢？ 为了解决账号密码泄露导致的误操作。 前端实现思路是什么呢？ 前端思想是获取摄像头权限 通过canvas 获取base64图片 然后转为二进制文件流 通过FormData（form表单提交）和后端交互 的方式进行识别 后端的实现思路呢？ 创建一个sql 里面存一些有权限的人员信息包含照片等 用上传的照片和sql里面的数据进行对比人脸识别 进而知道进入当前系统的人是否具有某些权限 ...
vue 基于获取摄像头权限 拍照的人脸识别技术
wen_binobject的博客
03-26 1万+
为什么要做这个呢？ 不同用户具有不同的权限 如果管理员用户被别人知晓了怎么办？ 为了解决该用户 账号密码泄露导致的误操作。 前端实现思路是什么呢？ 前端思想是获取摄像头权限 通过canvas 获取base64图片 然后转为二进制文件流 通过FormData（form表单提交）和后端交互 的方式进行识别 后端的实现思路呢？ 创建一个sql 里面存一些有权限的人员信息包含照片等 用上传的照片和sql里...
微信公众号实现人脸识别功能
hl_Abel的博客
04-03 6372
类似于某些app实现人脸识别登陆功能，在微信公众号实现人脸识别功能，该功能之适用于安卓手机，因为限于苹果手机权限管理严格无法调起苹果手机的摄像头，所以苹果手机只能通过微信jssdk的方式去调起摄像头拿到照片；安卓手机主要是通过获取手机媒体信息调起摄像头 然后通过canvas截取人脸图片。 实现如下： html <div id="dialogs" style="display: none;"...
苹果手机通过getUserMedia唤起摄像头，出现黑屏问题
qq_43753654的博客
01-29 2275
h5页面，使用浏览器提供的navigator.mediaDevices.getUserMedia方法，唤起摄像头，然后进行视频通话。
html调用摄像头，苹果使用getUserMedia的坑
douob的博客
09-23 3913
html调用摄像头的getUserMedia的坑 遇到个项目，需求是使用HTML扫描二维码和条形码，并自动识别，与微信扫码类似，不是识别照片那种。这边采用的WebRTC去做（好像html直接获取视频流并解析视频流资源只有这种方法）。遇到个很神奇的坑，是Apple的Bug。 程序在Windows系统笔记本，Android手机各种浏览器都能够去获取到摄像头资源，但是，苹果Iphone，Ipad只有Safari浏览器能够拿到摄像头资源，苹果设备上Chrome，Firefox什么的都拿不到摄像头资源。https:/
iOS-获取UIWebView或者WKWebView页面的视频连接
ZFJ_张福杰
03-15 9867
说明 不论使用的是UIWebView还是WKWebView，控件在加载有视频的网页时，我们想抓取网页上的视频链接，用来干其他的事，这里我演示抓取视频链接用自己自定义的视频播放器来播放。 UIWebView 获取视频链接的JS代码及调用方式如下， NSString *JSStr = @"(document.getElementsByTagName(\"video\")[0]).src";
js + php 读取、播放视频流 兼容firefox，chrome，ie，mac的safari，ios的safari，ios的微信浏览器（curl读取文件流篇） ...
weixin_30826095的博客
04-22 251
————————————2015-5-13————最新更新——————————————— 由于jwplayer6已经完全无法正常工作，以下介绍的方法也已经失效，请更换视频播放插件，可以参考楼主的文章： http://blog.csdn.net/snow_finland/article/details/45670683 —————————————————...
【Selenium+Java+Chrome】WebRTC自动化测试01-向getUserMedia()提供虚拟音视频流
weixin_41821317的博客
05-25 778
利用Chrome建立WebRTC会话时，需要通过getUserMedia()使用设备的摄像头和麦克风采集媒体流。然而，在实验中，我们往往需要使用指定视频序列测试WebRTC应用。因此，需要找到一种方法让getUserMedia()直接获取本地视频文件。 1. 对视频序列进行预处理 首先，需要将指定的媒体流（.mp4）转换为 .y4m 和 .wav 格式，这里使用FFmpeg进行转换。 脚本文件如下，直接拖入终端即可。 #!/bin/sh ##################################
使用getUserMedia实现录像
Hruibin的博客
10-19 577
可实现H5端 录制视频 pc端也可以
自动识别人脸html5,【前端】H5人脸实时识别自动截取人脸照片
weixin_39618574的博客
05-31 4470
一、前言因公务业务需要，需要移动端H5人脸认证后开门，而且要在微信浏览器中，也就是嵌入到公众号里。这要是放在App上做，其实不算什么难点。关键在于他喵的是网页！！！划重点：网页！！总所周知，h5调用相机拍照或者摄像，一般用一个input:复制代码这样当你点击input的时候，会唤醒手机自带的相机，进行拍摄或者拍照。二、分析难点1 自定义一个这样的遮罩在相机里，完全是异想天开。难点2 实时进行人脸识...
iOS wkWebview播放HTML5 video视频 自动全屏问题解决
技术前端，忠于热爱 @回忆哆啦没有A梦
04-28 7160
HTML5使用video播放视频，限制视频的尺寸，但在ios中出现的全屏问题 使用html5 的video标签播放视频的时候，限制视频的尺寸，在android上是没有问题的，但是在ios上发现，视频没有开始播放的时候还是好的，但是一旦播放开是，就会全屏，非常奇怪。 <video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls> <source type="video/
vue项目 H5画面 人脸识别
最新发布
04-28
<think>好的，我现在需要帮助用户解决在Vue项目中实现H5人脸识别功能的问题。首先，我需要回顾用户提供的系统级指令和之前的引用内容。用户提到他们希望使用tracking.js、face-api.js等库，并且参考了一些现有的实现方案。 首先，我应该考虑用户的需求是什么。他们想要在Vue的H5端实现人脸识别，可能需要实时检测或人脸比对。根据引用[1]和[2]，用户可能已经了解了一些库，比如tracking.js和face-api.js，但需要具体的实现方案。 接下来，我需要整理可能的实现方案。根据引用内容，face-api.js是基于TensorFlow.js的，功能更强大，适合复杂的人脸识别，而tracking.js适合基础的人脸检测。clmtrackr.js则用于面部特征点追踪。此外，用户提到了腾讯云的人脸核身SDK，这可能涉及后端服务，适合需要高精度比对的场景。 然后，我需要考虑如何在Vue项目中集成这些库。例如，face-api.js需要加载模型文件，可能需要配置静态资源路径。同时，视频流的获取和Canvas处理是常见步骤，需要确保在Vue组件中正确初始化和销毁资源，避免内存泄漏。 用户可能需要步骤说明，所以分步骤讲解每个方案是关键。比如，使用face-api.js的步骤包括安装依赖、引入库、加载模型、启动摄像头、进行检测等。同时，要提供代码示例，帮助用户快速上手。 另外，需要注意性能优化，比如模型加载的CDN使用，或者按需加载模型。对于移动端兼容性，要提醒用户处理权限问题和响应式布局。 最后，生成相关问题，帮助用户深入思考可能遇到的挑战，比如性能优化、跨平台兼容性、数据安全等。这些问题能引导用户进一步探索解决方案，确保项目顺利实施。 总结来说，我需要提供清晰的结构，分方案介绍，每个方案的优缺点，实现步骤，代码示例，以及注意事项。同时，确保回答符合中文格式要求，正确使用LaTeX，并引用提供的参考资料。</think>在Vue项目中实现H5人脸识别功能，可通过以下方案实现： ### 一、主流技术方案对比 | 方案 | 技术栈 | 精度 | 复杂度 | 适用场景 | |----------------|-------------------|--------|--------|-------------------------| | tracking.js | 纯前端CV算法 | 中 | 低 | 基础人脸检测 | | face-api.js | TensorFlow.js | 高 | 中 | 人脸特征识别、情绪分析 | | 腾讯云SDK | 云端API | 极高 | 高 | 身份核验、金融级比对 | | clmtrackr.js | 面部特征点追踪 | 中 | 中 | AR特效、面部动作捕捉 | ### 二、具体实现步骤 #### 方案1：face-api.js实现（推荐） ```javascript // 安装依赖 npm install face-api.js // 组件中引入 import * as faceapi from 'face-api.js'; // 初始化模型（需将模型文件放在public目录） async loadModels() { await faceapi.nets.tinyFaceDetector.loadFromUri('/models') await faceapi.loadFaceLandmarkModel('/models') } // 启动摄像头 startDetection() { const videoEl = this.$refs.video navigator.mediaDevices.getUserMedia({ video: {} }) .then(stream => { videoEl.srcObject = stream this.detectFaces(videoEl) }) } // 人脸检测核心逻辑 async detectFaces(video) { const canvas = this.$refs.canvas const displaySize = { width: video.width, height: video.height } faceapi.matchDimensions(canvas, displaySize) setInterval(async () => { const detections = await faceapi.detectAllFaces( video, new faceapi.TinyFaceDetectorOptions() ).withFaceLandmarks() const resizedDetections = faceapi.resizeResults(detections, displaySize) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height) faceapi.draw.drawDetections(canvas, resizedDetections) faceapi.draw.drawFaceLandmarks(canvas, resizedDetections) }, 100) } ``` #### 方案2：腾讯云人脸比对（适合安全要求高的场景） ```javascript // 调用云端API示例 async tencentFaceCompare(imageData) { const res = await axios.post('https://iai.tencentcloudapi.com', { Action: "CompareFace", ImageA: base64ImageA, ImageB: base64ImageB, QualityControl: 1, NeedRotateDetection: 1 }, { headers: { 'Authorization': this.generateTC3Signature() // 需实现签名算法 } }) return res.data.Score > 80 // 根据阈值判断 } ``` ### 三、关键实现细节 1. **模型加载优化** - 使用CDN加速模型加载：`faceapi.nets.tinyFaceDetector.loadFromUri('https://cdn.example.com/models')` - 按需加载模型：`if(!this.modelsLoaded) await this.loadModels()` 2. **移动端适配** ```html <video ref="video" playsinline webkit-playsinline x5-video-player-type="h5" style="object-fit: cover;"> </video> ``` 3. **性能指标对比** $$ \text{FPS} = \frac{1}{\Delta t} \times 1000 $$ 实测数据： - face-api.js在iPhone12上可达24-30FPS - tracking.js可达40+FPS但检测精度较低 ### 四、注意事项 1. HTTPS环境下才能调用摄像头 2. iOS需处理自动播放策略：`videoEl.play().catch(err => this.showPlayButton = true)` 3. 内存管理：组件销毁时需关闭媒体流 ```javascript beforeDestroy() { this.$refs.video.srcObject.getTracks().forEach(track => track.stop()) } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值