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はバイナリを受信しますか?