2017-05-08 9 views
0

Base64 PNG画像(ウェブカメラをキャプチャして生成)のストリームをPhoenixチャンネルに送信します。フェニックスチャンネル受け入れベース64 png raw

私の知る限りでは、チャンネル内handle_in方法だけので、私は現在、やることは使用してそれを送信していますが、JSON文字列を受け取ります。

channel.push(「ストリーム:ビデオ」、JSON.stringify(データ))

以下のスニペットのように:

var delay = 100 
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) { 
    delay = 40 
    console.info(">>> using chrome") 
} else { 
    console.info(">>> using non chrome!") 
} 
let canvasContext = null 
let camVideo = document.getElementById("cam-video") 
let camCanvas = document.getElementById("cam-canvas") 

let onSucceed = (stream) => { 
    camVideo.srcObject = stream 

    setInterval(() => { 
     canvasContext.drawImage(camVideo, 0, 0, 240, 120) 
     let data = camCanvas.toDataURL("image/png") 

     // This is where I push Base64 image as string 
     // I don't like this :P 
     channel.push("stream:video", JSON.stringify(data)) 
    }, delay) 
} 

let onFailed = (error) => { 
    console.error(error) 
} 

if (camVideo && camCanvas) { 
    canvasContext = camCanvas.getContext("2d") 

    navigator.getUserMedia = (navigator.getUserMedia 
    || navigator.webkitGetUserMedia || navigator.mozGetUserMedia 
    || navigator.msGetUserMedia || navigator.oGetUserMedia) 
    navigator.getUserMedia({video: true}, onSucceed, onFailed) 
} 

これまでのところ、上記のコードを使用して、私は(あちこちBase64文字列表現の流れが私のチャンネルに流れる見ることができますmサーバー側のコンソールログ)。

私は、とにかくRAW Base64バイナリストリームを受信できるようにPhoenixチャンネルを調整できるのが好きなので、これは気にしません。

これは、articleにチェックされていますが、ブラウザ側にのみサーバー側のバイナリプッシュを有効にしているようです。

とにかく私は微調整できますかhandle_inはバイナリを受信しますか?

答えて

0

はい、フェニックスのチャンネルにバイナリをアップロードできますが、handle_in/3に提供されるメッセージはmapである必要がありますが、このマップにはバイナリを含めることができます。

私のartitleは、ファイルのファイル名とバイナリが含まれているチャネルを使用してファイルをアップロードすることを確認できます。

関連する問題