stream.mを使ってwebmライブストリーミングで遊んでみた

chakemiです。 前回、stream.mを使ってwebmフォーマットのライブストリーミングを試してみましたが vlc部分が不安定だし不便だったので、WindowsMediaエンコーダで試してみました。

stream.mまわりは前回と変わりません。

WindowsMediaエンコーダを起動したら適当にデバイスの設定、圧縮の設定をし 出力設定で「エンコーダからプル」にチェックを入れ、ポートを指定します。

ここでは、前回のvlcでも使用した8081ポートをしておきます。

FFMpegのinputオプションを「HTTP越しのmms(Microsoft Media Server Protocol)」で接続します。

1
C:\>"ffmpeg.exe" -i mmsh://127.0.0.1:8081 -g 52 -acodec libvorbis -ab 64k -vcodec libvpx -vb 448k -f matroska http://localhost:8080/publish/first?password=secret

当然ですが、WindowsMediaエンコーダでのエンコードビットレートより高い値でFFMpegをエンコードするとエラーになりますので、ご注意ください。

実際、試してみると、やっぱり安定して配信出来ました。

せっかくなので、HTML5のvideoタグとcanvasタグを使って frameキャプチャをしてみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<script type="text/javascript">

var video;
var copy;
var copycanvas;

function copyFrame(){
  copycanvas = document.getElementById('sourcecopy');
  copy = copycanvas.getContext('2d');
  video = document.getElementById('sourcevideo');

  copycanvas.width=video.videoWidth;
  copycanvas.height=video.videoHeight;

  copy.drawImage(video, 0, 0);
}
</script>
</head>
<body>
    <video id="sourcevideo" src="http://192.168.1.113:8080/consume/first" autoplay></video>
    <canvas id="sourcecopy" width="320" height="240"></canvas>
    <input type="button" value="copy frame" onclick="copyFrame()" />
</body>
</html>

適当ですみません。。。

も少し面白いこと出来るようになれるよう頑張ります。

Comments