Question

我正在开发chrome扩展，它具有以下功能：

可以访问从chrome.tabCapture.capture获取的流（在捕获视频时，让我们暂时忽略音频捕获，因为它与我面临的问题无关）
将此tabStream传递给URL.createObjectURL(tabStream)
将生成的网址用作DOM视频元素src的{{1}}
调用videoEl.src = URL.createObjectURL(tabStream)并在调用videoEl.play()事件时
将canplay作为参数传递给canvas的上下文videoEl方法
因为现在视频帧被渲染到canvas元素中，所以可以对该帧执行许多有用的操作（裁剪，水印等）

直到这一切都完美无缺。但以下两个最终步骤不起作用：

使用drawImage
将此流传递至canvasStream = canvasEl.captureStream(20)（MediaRecorder）并开始录制：recorder = new MediaRecorder(canvasStream)

基本上，如果在chrome扩展的背景之外使用这种方法（比如这里：https://jsfiddle.net/williamwallacebrave/2rgv7pgj/7/），那么一切都很完美。但是当在chrome扩展背景中使用时，我可以清楚地检测到视频帧是在canvas元素中发送和渲染的，但不知何故recorder.start()没有推送数据或者记录器无法拾取它们。此外，如果在内容脚本中再次使用该方法，则所有方法都可以完美运但在内容脚本中，我无法访问canvasEl.captureStream()流。

这是我的清单文件：

tabCapture

这是一个虚拟代码，当作为内容脚本运行时效果非常好，但不能用作背景：

{
    "name": "super app",
    "manifest_version": 2,
    "description": "...",
    "version": "0.0.1",
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "page_action": {
        "default_title": "app",
        "default_icon": "static/images/logo.png"
    },
    "icons": {
        "128": "static/images/logo.png"
    },
    "background": {
        "page": "background.html"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "exclude_matches": ["http://localhost:3000/*"],
            "css": [
                "static/css/style.css"
            ],
            "js": [
                "vendor/system.js",
                "vendor/jquery.min.js",
                "content/config.js",
                "content/index.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "background/*",
        "vendor/*",
        "content/*",
        "common/*.js",
        "capturer.html",
        "static/*",
        "*"
    ],
    "externally_connectable": {
        "matches": [
            "http://localhost:3000/*"
        ]
    },
    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>",
        "clipboardRead",
        "clipboardWrite",
        "tabCapture",
        "notifications",
        "tts"
    ]
}

另请注意，此captureStream和MediaRecorder相对较新，因此您需要Chrome 51+才能运行该示例

Answer 1

这很可能与我几个月前提交的Chromium错误相关：https://bugs.chromium.org/p/chromium/issues/detail?id=639105。

以下是负责此API的Chrome工程师的回复：

当背景和作为a时，Canvas不会绘制/渲染新帧结果，画布捕获不包含任何新项目。据我所知，标签背景时，没有一种方法可以绘制和捕获画布现在就像你期望的那样使用Chrome进行演示。

请在那里发布您的用例，并表示您支持修复此问题。

Chrome扩展程序captureStream

1 个答案: