所以我对编码非常陌生,我正在尝试创建这个谷歌扩展,用用户的脸替换网页上检测到的每张脸。它会要求用户给自己拍照并自动更改网页。但是,当我上传我的扩展程序并尝试使用它时,出现的拍照按钮实际上并没有打开相机并允许用户拍照。 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 验证器并更改权限。