Question

我有以下代码，可通过可公开访问的链接直接查看我的网络摄像头。

<!DOCTYPE html>
<html>
<head>
    <title>webRTC Test</title>
</head>
<script type = "text/javascript">
    function init()
    {
        if(navigator.webkitGetUserMedia)
        {

            navigator.webkitGetUserMedia({video:true}, onSuccess, onFail);

        } 
        else
        {
            alert('webRTC not available');
        }

    }

    function onSuccess(stream)
    {
        document.getElementById('camFeed').src = webkitURL.createObjectURL(stream);
        var src = document.getElementById('camFeed').getAttribute('src');
        document.getElementById('streamLink').href = src;
    }

    function onFail()
    {
        alert('could not connect stream');
    }


</script>
<body onload = "init();" style="background-color:#ababab;">
    <div style="width:352px; height:625px; margin:0 auto; background-color:#fff;">
        <div>
            <video id ="camFeed" width="320" height="240" autoplay>
            </video>
        </div>
        <div>
            <canvas id="photo" width="320" height="240">
            </canvas>
        </div>


        <div style="margin: 0 auto; width:82px;">
            <a id="streamLink">Visit Stream</a>
        </div>
    </div>

    </div>
</body>
</html>

锚标记中生成的链接类似于：

blob:http%3A//sitename.com/7989e43a-334r-4319-b9c5-9dfu00b00cd0

访问chrome时告诉我“哎呀！这个链接似乎已经破了。”

帮助表示赞赏！

Answer 1

File API spec定义URL.createObjectURL。在遵循规范的浏览器中，有几个部分可以使您尝试做的事情无法实现。

Section 11.5说：

Blob URI的来源必须是调用URL.createObjectURL的脚本的来源。 Blob URI必须仅在此来源中有效。

换句话说，createObjectURL返回的URI只能在创建它们的网站的上下文中使用（请参阅RFC6454: The Web Origin Concept，以更准确地定义HTML规范的含义“来源“）。您无法直接访问createObjectURL返回的网址。
Section 11.6说：

此规范添加了一个额外的卸载文档清理步骤：用户代理必须撤消在该文档中使用URL.createObjectURL创建的任何Blob URI。

这意味着即使您可以直接访问该网址，只要您离开名为createObjectURL的网页，创建的网址就会不复存在。

Answer 2

您必须确保在 HTTP 或 HTTPs 协议中使用/测试代码 - 因为URL.createObjectURL在{{1}处有一些问题协议---并且在使用 file：// 时，它无法为您的视频生成正确的BLOB ---- !!!

Answer 3

您的代码无法在localhost或您的计算机上运行。

所有你需要的是，在网上上传这个HTML文件（以防万一你想知道如何自己托管主机，然后尝试结账Dropbox，你可以公开上传你的HTML页面并通过公共链接免费访问或尝试其他产品或只是为自己托管）。正如您所看到的，此示例http://www.html5rocks.com/en/tutorials/getusermedia/intro/在chrome中完美运行，尽管它使用的代码与您的代码相同。我希望这个解决方案对你和其他寻找这个bug答案的人有所帮助。

此外，您可以使用iframe访问视频元素以对其执行操作。

HTML5视频链接无法在Chrome中使用

3 个答案: