HTML5视频链接在Chrome中不起作用

HTML5 Video link not working in Chrome

本文关键字：不起作用 Chrome 视频 链接 HTML5      更新时间：2023-09-26

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

<!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时，他告诉告诉："糟糕！这个链接似乎断了。"

感谢帮助！

文件API规范定义了URL.createObjectURL。有几个部分让你在遵循规范的浏览器中无法完成你想要做的事情。

  • 第11.5节规定：

    Blob URI的来源必须是调用URL.createObjectURL的脚本的来源Blob URI只能在此原点内有效。

    换句话说，createObjectURL返回的URI只能在创建它们的网站的上下文中使用（有关HTML规范中"起源"的含义的更精确定义，请参阅RFC6454:Web起源概念）。您不能直接访问createObjectURL返回的URL。

  • 第11.6条规定：

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

    这意味着，即使您可以直接访问URL，只要您离开名为createObjectURL的页面，创建的URL就不存在了。

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

您的代码无法单独在本地主机或您的机器上运行

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

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

相关文章：