13

ウェブカメラをストリーミングできるシンプルなウェブページがあります。このストリームを取得してどこかに送信したいのですが、ストリーム自体に実際にアクセスできないようです。ストリームを実行するための次のコードがあります。

navigator.webkitGetUserMedia({video: true}, gotStream, noStream);

そして gotStream では、このストリームを別の場所に「リダイレクト」するために多くのことを試みました。たとえば、次のようになります。

function gotStream(stream) {   
    stream_handler(stream)
    //other stuff to show webcam output on the webpage
}

また

function gotStream(stream) {   
    stream.videoTracks.onaddtrack = function(track){
        console.log("in onaddtrack");
        stream_handler(track);
    }
    //other stuff to show webcam output on the webpage
}

しかし、どうやらgotStream関数は最初に一度だけ呼び出され、ユーザーがウェブカメラにストリーミングする許可を与えたときです。さらに、stream変数はストリーム自体ではなく、内部にいくつかのプロパティを持つオブジェクトです。ストリーム自体にアクセスして、好きな場所にリダイレクトするにはどうすればよいですか?

編集: WebRTC の上に開発されたように見える一種の face2face 会話である webglmeeting に精通しているかもしれません。スクリプトが何らかの方法でデータのストリームをあるポイントから別のポイントに送信していると思います。そもそもデータのストリームを取得する方法を理解することで、同じことを達成したいと思います。

再編集: 画像への変換と後者の送信は必要ありません。データのストリーム自体を操作したいと思います。

4

1 に答える 1

4

カメラをPNGまたはJPGのどこかにスチームするつもりなら、私はcanvasこのように使用します

HTML

<video id="live" width="320" height="240" autoplay></video>
<canvas width="320" id="canvas" height="240" style="display:none;"></canvas>

JS (jQuery)

var video = $("#live").get()[0];
var canvas = $("#canvas");
var ctx = canvas.get()[0].getContext('2d');

navigator.webkitGetUserMedia("video",
        function(stream) {
            video.src = webkitURL.createObjectURL(stream);
        }
)
     setInterval(
        function () {
            ctx.drawImage(video, 0, 0, 320,240);
                var data = canvas[0].toDataURL("image/jpeg");   
  },1000);
于 2012-10-29T12:16:38.100 に答える