web-dev-qa-db-ja.com

ウェブカメラからサーバーへの純粋なjsストリーム

ウェブカメラ（フロントエンド）からストリームをキャプチャし、純粋なjs（フラッシュなし）でhlsまたはrtmpを介してサーバーにストリーミングすることは可能ですか？.
そして、（hlsとは異なり）ストリームをストリームとして送信できる別のプロトコルがある場合は、優先されます。

javascriptvideo-streaminghttp-live-streamingrtmp
4
Kandrat

私は解決策を見つけました。フロントエンドでnavigator.getUserMedia()から受信したストリームをrtmpに「変換」する方法は（まだ）ありません。ただし、MediaRecorderApiは使用できます。
クライアント側

const stream = await navigator.getUserMedia(options)
const recorder = new MediaRecorder(stream)
recorder.ondataavailable = (e) => { socket.emit('binaryData',e.data) }
recorder(start)

バックエンド

const ffmpegProcess = spawn('ffmpeg', ffmpegCommans)
socket.on('binaryData', (data) => { 
  ffmpegProcess.stdin.write(params.data)
})

FFmpegはvp8ビデオストリームをhls/rtmp/rtspなどに変換します。

このようにして、待ち時間3(average) 2秒のビデオストリームを取得できます。

1
Kandrat

はい、あなたはそれを行うことができます。

GetUserMedia（）と呼ばれるWebRTC仕様のAPIを使用して、カメラに直接アクセスできます。 getUserMedia（）は、接続されているマイクとカメラへのアクセスをユーザーに要求します。

成功すると、APIはカメラまたはマイクからのデータを含むストリームを返します。その後、要素にアタッチするか、WebRTCストリームにアタッチするか、MediaRecorderAPIを使用して保存します。

カメラからデータを取得するには、getUserMedia（）APIに渡される制約オブジェクトでvideo：trueを設定します。

    <video id="player" controls height="400" width="400"/video>

<script>
  var player = document.getElementById("player");

  var handleSuccess = function(stream) {
    player.srcObject = stream;
  };

  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then(handleSuccess);
</script>

私はこれから答えを引用します リンク

1
Ali Abbas