HTML5視頻鏈接在Chrome中不起作用

我有以下代碼可直接通過公共訪問鏈接查看我的攝像頭。HTML5視頻鏈接在Chrome中不起作用

<!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

而且在訪問鉻告訴我：「哎呀這個鏈接似乎被打破！」。

幫助感謝！

來源

2012-09-02 algorithmicCoder

什麼是_actual_有問題的鏈接？ –

Visit Stream此鏈接轉到該blob url並在訪問時中斷...它也是我相信代碼中的唯一鏈接。謝謝！ – algorithmicCoder

我的選擇不好。什麼是URL？ –

File API spec定義爲URL.createObjectURL。有幾個章節會使您在遵循規範的瀏覽器中嘗試做的事情變得不可能。

Section 11.5說：

的Blob URI的來源必須是被稱爲URL.createObjectURL腳本的起源。 Blob URI只能在此源內有效。

換句話說，通過createObjectURL返回的URL只能在創建它們的網站的上下文中使用（見RFC6454: The Web Origin Concept對於什麼樣的HTML規範所說的「血統」更精確的定義）。您無法直接訪問由createObjectURL返回的網址。
Section 11.6說：

本規範增加了額外的卸載文檔清理步驟：用戶代理必須從文檔中撤消與URL.createObjectURL創建的任何斑點的URI。

這意味着，即使你可以直接訪問該網址，一旦你離開那個叫createObjectURL所創建的URL不再存在的頁面。

來源

2012-09-02 16:12:29 georgebrock

你必須確保你使用的/在HTTP或HTTPs的協議測試代碼---因爲URL.createObjectURL有一些問題在file://協議---它可以不能夠在使用文件時爲您的視頻生成正確的BLOB文件：// ---- !!!

來源

2012-09-03 01:44:18

您的代碼不能在localhost或您的機器上單獨運行。

所有你需要的是，上傳這個HTML文件在網絡上（以防萬一你想知道如何得到主機給自己，然後嘗試結賬的Dropbox，你可以公開上傳你的HTML頁面，並通過獲得訪問公共鏈接免費或嘗試其他產品或只是爲自己託管）。正如你所看到的，這個例子http://www.html5rocks.com/en/tutorials/getusermedia/intro/在Chrome中運行的很好，儘管它使用的代碼和你的代碼是一樣的。我希望這個解決方案能夠幫助你和其他人尋找這個錯誤的答案。

此外，您可以使用iframe訪問視頻元素以對其執行操作。

來源

2012-09-19 20:27:15

HTML5視頻鏈接在Chrome中不起作用

回答

相關問題