1

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

<!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 时告诉我“糟糕！此链接似乎已损坏。”

帮助表示赞赏！

4

3 回答 3

1

文件 API 规范定义了URL.createObjectURL. 有几个部分使您在遵循规范的浏览器中尝试做的事情变得不可能。

  • 第 11.5 节说：

    Blob URI 的来源必须是调用URL.createObjectURL. Blob URI 必须仅在此 origin 内有效。

    换句话说，返回的 URIcreateObjectURL只能在创建它们的网站的上下文中使用（请参阅RFC6454：Web 起源概念，以更准确地定义 HTML 规范中“起源”的含义）。您无法访问createObjectURL直接返回的 URL。

  • 第 11.6 节说：

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

    这意味着即使您可以直接访问该 URL，一旦您离开调用createObjectURL所创建 URL 的页面，该页面将不复存在。

于 2012-09-02T16:12:29.517 回答
0

Your code won't work on localhost or your machine alone.

All you need is, upload this HTML document on the Net(just in case you are wondering on how to get Hosting for yourself, then try checkout Dropbox, you can upload your HTML page publicly and get access via Public Link for free or try some other product or simply get hosting for yourself). As you can see that this example http://www.html5rocks.com/en/tutorials/getusermedia/intro/ works perfectly in chrome, though the code that it is utilising is the same as yours. I hope this solution is of some help to your and others searching for an answer to this bug.

Also, you can then use an iframe to get access to the video element to perform operations on it.

于 2012-09-19T20:27:15.177 回答
0

您必须确保您在HTTP或HTTPS协议上使用/测试您的代码 --- 因为URL.createObjectURL在协议上有一些问题--- 并且在使用file://file://时它无法为您的视频生成正确的 BLOB - --- !!!

于 2012-09-03T01:44:18.247 回答