为什么我的谷歌扩展无法打开相机?

问题描述 投票:0回答:0

所以我对编码非常陌生,我正在尝试创建这个谷歌扩展,用用户的脸替换网页上检测到的每张脸。它会要求用户给自己拍照并自动更改网页。但是,当我上传我的扩展程序并尝试使用它时,出现的拍照按钮实际上并没有打开相机并允许用户拍照。 chrome 开发人员工具显示:“相机”权限未知或 URL 模式格式错误。我尝试了几件事,但没有任何效果!请帮助 ;0 这是我的代码 ;

Manifest.json

{

“清单版本”:3,

“名称”:“换脸”,

“版本”:“1.0”,

"description": "用用户的脸替换网页上的脸",

“图标”:{

“16”:“icon16.png”,

"48": "icon48.png",

“128”:“icon128.png”

},

“权限”:[

“活动标签”,

“相机”

],

“动作”:{

“默认图标”:“icon16.png”,

“default_popup”:“popup.html”

},

“content_scripts”:[

{

“匹配”:[

],

“js”:[

“content.js”

],

“run_at”:“document_end”

}

]

}

popup.html

换脸

拍照

popup.js

document.addEventListener('DOMContentLoaded', function() {

document.getElementById('拍照').addEventListener('点击', function() {

// 请求使用相机的权限

navigator.mediaDevices.getUserMedia({ video: true })

.then(函数(流){

// 创建一个视频元素来显示摄像头流

let video = document.createElement('video');

video.srcObject = 流;

video.play();

// 创建一个画布元素来捕捉视频帧

let canvas = document.createElement('canvas');

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

// 将画布图像转换为 base64 编码的数据 URL

let imageData = canvas.toDataURL('image/png');

// 将图像数据发送到内容脚本

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {

chrome.tabs.sendMessage(tabs[0].id, { type: 'replaceFaces', imageData: imageData });

});

// 清理

video.pause();

stream.getTracks()[0].stop();

})

.catch(函数(错误){

console.log('摄像头访问被拒绝:', error);

});

});

});

content.js

// 加载 OpenCV.js

let script = document.createElement('script');

script.src = 'https://docs.opencv.org/master/opencv.js';

script.async = true;

script.onload = function() {

// OpenCV.js 可以使用了

console.log('OpenCV.js 可以使用了');

};

document.head.appendChild(脚本);

// 使用 OpenCV.js 处理图像

函数 processImage() {

// 从页面加载图片

让图片 = document.querySelector('img');

// 从图像创建一个 cv.Mat 对象

let src = cv.imread(image);

// 将图像转换为灰度图像

let gray = new cv.Mat();

cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);

// 对灰度图像应用高斯模糊

let blur = new cv.Mat();

cv.GaussianBlur(gray, blur, new cv.Size(3, 3), 0, 0, cv.BORDER_DEFAULT);

// 在页面上显示处理后的图片

let canvas = document.createElement('canvas');

canvas.width = image.width;

canvas.height = image.height;

document.body.appendChild(画布);

cv.imshow(画布,模糊);

// 请求使用相机的权限

navigator.mediaDevices.getUserMedia({ video: true })

.then(函数(流){

// 创建一个视频元素来显示摄像头流

let video = document.createElement('video');

video.srcObject = 流;

video.play();

document.body.appendChild(视频);

})

.catch(函数(错误){

console.log('摄像头访问被拒绝:', error);

});

}

// 页面加载完成后调用processImage函数

window.addEventListener('load', processImage);

背景.js

chrome.runtime.onMessage.addListener(函数(请求,发送者,sendResponse){

if (request.action == 'replaceFaces') {

chrome.tabs.executeScript(sender.tab.id, { file: 'content.js' });

感谢任何试图提供帮助的人,非常感谢!

我尝试将清单文件通过 json 验证器并更改权限。

google-chrome google-chrome-extension getusermedia openai-api manifest.json
© www.soinside.com 2019 - 2024. All rights reserved.