1

公開されているリンクを介して Web カメラを直接表示するための次のコードがあります。

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

クロムにアクセスすると、「おっと、このリンクは壊れているようです」と表示されます。

助けてください！

4

3 に答える 3

1

File API 仕様では、が定義されていますURL.createObjectURL。仕様に準拠したブラウザで実行しようとしていることが不可能になるセクションがいくつかあります。

  • セクション 11.5は次のように述べています。

    Blob URI のオリジンは、 を呼び出したスクリプトのオリジンでなければなりませんURL.createObjectURL。Blob URI は、この origin 内でのみ有効である必要があります。

    つまり、 によって返される URI は、createObjectURLそれらを作成した Web サイトのコンテキスト内でのみ使用できます ( HTML 仕様での「オリジン」の意味のより正確な定義については、RFC6454: The Web Origin Conceptを参照してください)。createObjectURLから返された URL に直接アクセスすることはできません。

  • セクション 11.6は次のように述べています。

    この仕様は、追加のアンロード ドキュメント クリーンアップ ステップを追加します。ユーザー エージェントはURL.createObjectURL、そのドキュメント内から作成された Blob URI を取り消す必要があります。

    これは、その URL に直接アクセスできたとしても、createObjectURL作成された URL を呼び出したページを離れるとすぐに存在しなくなることを意味します。

于 2012-09-02T16:12:29.517 に答える
0

あなたのコードは、localhost またはあなたのマシンだけでは機能しません。

必要なのは、この HTML ドキュメントをネットにアップロードすることだけです (ホスティングを自分で取得する方法を知りたい場合に備えて、Dropbox をチェックアウトしてください。HTML ページを公開してアップロードし、公開リンクから無料でアクセスするか、いくつか試してみてください。他の製品を使用するか、単に自分でホスティングを取得してください)。ご覧のとおり、この例http://www.html5rocks.com/en/tutorials/getusermedia/intro/はクロムで完全に機能しますが、使用しているコードはあなたのものと同じです。この解決策が、このバグに対する答えを探しているあなたや他の人に役立つことを願っています.

また、iframe を使用して video 要素にアクセスし、操作を実行することもできます。

于 2012-09-19T20:27:15.177 に答える