js 调用本地摄像头报安全错误

最新推荐文章于 2024-08-03 14:05:44 发布
最新推荐文章于 2024-08-03 14:05:44 发布
阅读量9.3k 收藏 1
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laoxiao1987/article/details/69396114
版权 
Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)


如果报这个错误，则是需要更改为https访问

laoxiao1987
关注
专栏目录
js 调取摄像头上线 HTTP 环境下报错
m0_59360501的博客
05-13 619
以上就为HTTP 环境下调用摄像头，但是由于公司业务，每次开关机电脑都会刷机，于是就写了一个.vsb文件，点击一下就会自动生成基于第二种解决方法的效果（只是快捷方式解决），轻轻的点一下就可以啦！二、右击浏览器，打开属性 目标，在exe后面加入命令 --unsafely-treat-insecure-origin-as- secure="域名" （exe后一定加空格）浏览器由于考虑到安全问题，当我们在http下调用摄像头会报属性为undefined的错误。一、在地址栏搜索：chrome://flags。
Uncaught (in promise) DOMException: Only secure origins are allowed
JackRen_Developer的博客
08-30 6521
今天遇到这个问题，手机端访问会报这个错误，但是在网页上没有这个问题： 原因是：在做录音和视频的时候访问链接必须是https，否者调用无反应！...
引入js-sdk，调用扫描二维码和获取位置功能。解决ios定位正常，安卓报错getlocation invalid signature问题。
最新发布
cyyyeahey的博客
08-03 954
vue3项目中使用微信jssdk的扫描和定位功能。解决安卓手机定位报错getlocation invalid signature。
NotSupportedError Only secure origins are allowed
dsn727455218的博客
02-27 6679
今天在写H5调用手机摄像头时提示一个错误信息如下： NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you sh...
http服务器升级配置信息错误,Http升级到Https （本地测试，无须域名和认证）
weixin_39733232的博客
08-08 812
在之前的语音识别的项目中，一切都在本地进行得很顺利，然后把写的Demo部署到服务器上给老大看的时候，通过IP访问(http://192.168.xxx.xxx:8080这样的形式)时，从一开始就坏掉了，使用Chrome都不能开启录音的权限了，就谈不上语音转换了，用Firefox来访问居然迷之没有问题，说明我写的Demo没有问题，那一定就是Chrome的问题了。调出错误的报告显示得是Only sec...
Geolocation error:Only secure origins are allowed (see:https://goo.gl/Y0ZkNV)..
weixin_33895475的博客
09-04 5316
2019独角兽企业重金招聘Python工程师标准>>> ...
vue调用本地摄像头实现拍照功能
10-14
本文主要介绍了如何在Vue项目中调用本地摄像头并实现拍照功能。 首先，需要了解的是Web摄像头功能的实现依赖于浏览器提供的MediaDevices API。这是一个基于Promise的API，允许通过navigator.mediaDevices访问用户...
JS实现调用本地摄像头功能示例
10-18
JS实现调用本地摄像头功能涉及到的技术点有以下几个方面： 1. HTML5中的video标签和canvas标签：在现代浏览器中，我们可以通过HTML5提供的video标签来展示来自摄像头的视频流，同时使用canvas标签来对视频进行图像...
js调用本地摄像头拍照并上传到web服务器
06-29
在现代Web应用中，利用JavaScript调用本地摄像头拍照并上传至服务器已经成为常见的功能，尤其在社交媒体、在线教育、远程办公等领域。本知识点将详细介绍如何实现这个功能，以及后台如何处理这些上传的图片。 首先...
js调用本地摄像头开发实例
04-26
JS 调用本地摄像头开发实例 在 FineUI 设计的网页中，调用本地摄像头，以实现网页上实景显示。下面是相关知识点的详细解释： 1. getUserMedia() 方法：getUserMedia() 方法用于请求用户的媒体设备访问权限，例如...
H5调用本地摄像头实现扫一扫
03-23
随着移动设备的普及，H5调用本地摄像头实现“扫一扫”功能变得日益常见，这通常用于二维码扫描、人脸识别等场景。本文将深入探讨如何利用H5的Web API来实现这一功能。 首先，我们需要了解H5中用于访问设备摄像头的...
服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...
weixin_39634194的博客
08-11 5642
通过浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed错误报告NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).[Deprecation] getUserMedia() no longer works on insecur...
记录使用iframe嵌入第三方url页面时遇到的问题
白马非马军的博客
12-03 7315
需求:需要在iframe中嵌入第三方url，该url需要访问视频和音频 以为只需要 <iframe src="url" style="width:100%; height:99%" frameborder="0"></iframe>，然后使用http://lan-ip:port就万事大吉了，没想到出现了如下两个问题： 问题1：F12查看错误提示：Only secure ...
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
qq_36187285的博客
01-10 4313
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). [Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching yo...
canvas 调用方法在api28上报错 ：Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed
shanshan_1117的博客
12-19 7578
错误日志如下 报错代码是： canvas.clipRect(mClipBounds, Region.Op.UNION); 解决方法如下： if(Build.VERSION.SDK_INT >= 26){ canvas.clipRect(mClipBounds); }else { canvas.clipRect(mClipBounds, Region...
js调用摄像头拍照异常DOMException: Permission denied
〆゛Care的博客
04-02 5720
没有权限 我用的谷歌浏览器本地localhost调用报的该异常 我的问题的解决方法 点击地址栏右侧摄像头图表，点击允许 然后就可以成功调起摄像头进行拍照了。 上传到服务器异常：DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). 网上查找原因和解决的方法。原因是用的http，需要使...
js百度地图android定位不准,百度地图js定位不准
weixin_35953844的博客
05-26 1443
浏览器H5定位即navigator.geolocation，通过IP或者域名的形式，如：http://172.21.3.82:8080 和http://b.cunzhang.com进行访问时，调用navigator.geolocation.getCurrentPosition，打开控制台，你会发现有以下错误信息：Only secure origins are allowed (see: https...
在项目中集成百度地图
yzjandyyyYYDS的博客
03-07 586
在《Referer白名单》配置框中添加该项目的网址（一般为公司域名），只有白名单中的网址才能成功发起调用，输入 * 表示允许所有网址调用。点击页面顶部的《开发文档》选项，然后点击 《Web开发》>《JavaScript API》点击《开发指南》>《Hello World》，根据步骤开发第一个实例。点击《控制台》选项，申请成为开发者，然后再次进行《控制台》点击《应用管理》>《我的应用》，点击《创建应用》进行百度地图开发者平台，使用百度账号登录。最后点击《提交》按钮，创建应用。根据《开发指南》进行配置即可。
解决跨域问题报错When allowCredentials is true, allowedOrigins cannot contain the special value “*“
JAvavvvvv的博客
10-28 278
跨域问题，前后端分离，SpringBoot，vue
js访问本地摄像头拍照保存
09-13
### 回答1： 要访问本地摄像头并拍照，可以使用 HTML5 中的 `getUserMedia()` 方法。然后，使用 `<video>` 标签播放视频流，使用 `<canvas>` 标签绘制图像并保存图像。 以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>摄像头拍照</title> </head> <body> <video id="camera-stream"></video> <button id="take-photo">拍照</button> <canvas id="photo"></canvas> <script> // 获取video流 navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { var video = document.getElementById('camera-stream'); video.srcObject = stream; video.play(); }) .catch(function(err) { console.log("访问摄像头错误: " + err); }); // 拍照功能 var takePhotoButton = document.getElementById('take-photo'); takePhotoButton.addEventListener('click', function() { var canvas = document.getElementById('photo'); var video = document.getElementById('camera-stream'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); var dataURL = canvas.toDataURL('image/png'); // 转化为base64 console.log(dataURL); }); </script> </body> </html> ``` 在这个示例中，`getUserMedia()` 方法用于获取摄像头视频流，然后使用 `<video>` 标签播放视频流。当用户点击“拍照”按钮时，使用 `<canvas>` 标签将视频帧绘制到画布上，并使用 `toDataURL()` 方法将图像转换为 base64 编码。你可以将 base64 编码保存到本地或通过网络传输到服务器。 ### 回答2： 在JavaScript中，可以通过调用浏览器的WebRTC（Web实时通信）功能来访问本地摄像头并拍照保存。下面是通过HTML5和JavaScript实现该功能的步骤： 1. 在HTML中，创建一个video元素用于显示摄像头捕获的视频流： ```html <video id="videoElement" autoplay></video> ``` 2. 在JavaScript中，使用navigator.getUserMedia()方法来获取用户的媒体设备，并将摄像头的视频流显示在video元素中： ```javascript const videoElement = document.getElementById('videoElement'); navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { videoElement.srcObject = stream; }) .catch(function(error) { console.log('Error accessing camera:', error); }); ``` 3. 当摄像头的视频流显示在video元素中后，可以使用canvas元素将当前的视频帧捕获为图片，并进行保存： ```javascript const canvasElement = document.createElement('canvas'); canvasElement.width = videoElement.videoWidth; canvasElement.height = videoElement.videoHeight; const context = canvasElement.getContext('2d'); context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height); const imageDataUrl = canvasElement.toDataURL('image/jpeg'); // 将图片数据保存到本地 const link = document.createElement('a'); link.href = imageDataUrl; link.download = 'photo.jpg'; link.click(); ``` 通过以上的步骤，我们可以在JavaScript中访问本地摄像头并拍照保存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值