使用ffmpeg，crtmpserver和Flowplayer在浏览器中使用音频和网络摄像头覆盖桌面
1初步说明
本教程基于Ubuntu Lucid，但将在稍后的版本以及较小的更改中使用。 我将展示如何使用来自video4linux2的脉冲和网络摄像头的音频流式传输我的桌面。 我还将展示如何配置crtmpserver和flowplayer，以便您可以从Web浏览器观看直播流。 在这种情况下，我使用单独的主机的工具。 Flowplayer安装在运行Apache的服务器上，crtmp服务器位于单独的服务器上，ffmpeg安装在流式桌面上。
2使用的工具
ffmpeg：
这是音视频编码器。 我将使用这个来捕获桌面，使用x11grab，来自video4linux2的脉冲和网络摄像头的音频。 本教程中使用的编解码器是用于视频的libx264和用于音频的libfaac。 形式是flv，输出是tcp单播到rtmp服务器。 ffmpeg有很好的文档，可以在这里找到。
crtmpserver：
crtmpserver将使用flvplayback函数为flowplayer馈送流媒体。 文档可以在这里找到。
flowplayer：
这是一个开源的Flash播放器。 我们将使用它在浏览器中播放rtmp直播流。 另一种选择是JW Player，但是由于在这里找到了很好的文档，我坚持使用Flowplayer。
3安装
ffmpeg：
您可以从存储库安装ffmpeg或从源代码编译它。 我强烈建议您从源代码编译，因为ubuntu存储库中的软件包不包含所有功能。 事实上，如果您使用存储库中的那个，我相信您将无法使用本指南。 因为在ffmpegs网站上有一个非常好的指南，所以我不会在这里安装安装指南。 请记住按照您正在使用的发行版的指南。 我在这里链接Ubuntu 10.04指南。
crtmpserver：
再次，这已经被记录，所以我不会在这里包括安装指南。 按照这里描述的说明进行操作 。
flowplayer：
这不是真的安装。 您可以选择从flowplayer的网站链接到播放器，或者将其下载到您的网络服务器并链接到您放置的路径。 我建议你下载播放器。 对于本指南，您将需要flowplayer，api，rtmp插件和jquery。 对于播放器和api来看这里 。 rtmp插件在这里找到，对于Jquery来看这里 。
4配置
ffmpeg：
我想解释一下我使用的每个选项如何工作，以便您更好地了解ffmpeg的工作原理，并使您更容易适应自己的需要。 我将首先显示整个命令，然后详细介绍选项
ffmpeg -f alsa -i pulse -f x11grab -s 1680x1050 -r 30 -i :0.0+0,0 -vf "movie=/dev/video0:f=video4linux2, scale=240:-1, fps, setpts=PTS-STARTPTS [movie]; [in][movie] overlay=main_w-overlay_w-2:main_h-overlay_h-2 [out]" -vcodec libx264 -crf 20 -preset veryfast -minrate 150k -maxrate 500k -s 960x540 -acodec libfaac -ar 44100 -ab 96000 -threads 0 -f flv - | tee name.flv | ffmpeg -i - -codec copy -f flv -metadata streamName=livestream tcp://x.x.y.y:1234
你可以看到它看起来相当艰巨，但不用担心，我将尽可能地解释一切事情，并提供进一步文档的链接。
ffmpeg语法如下所示：
ffmpeg "input-option" "input" "output options" "output"
让我们从第一个输入脉冲及其选项开始：
-f alsa -i pulse
有关在ffmpeg上使用alsa的更多信息，请看这里 。
这里我们使用alsa作为格式，并将脉冲作为输入。 这样就可以从任何来源的视频中获取音频。 如果安装Pulse Volume Controller，可以通过单击录制选项卡轻松更改源，然后选择要使用的源。
到目前为止这么容易 我们的下一个输入是我们的桌面：
-f x11grab -s 1680x1050 -r 30 -i :0.0+0,0
有关x11grab的更多信息，请看这里 。
我们选择x11grab作为格式与“-f x11grab”。 然后我们决定用“-s 1680x1050”抓住一部分显示器。 第三，我们告诉ffmpeg用“-r 30”强制每秒30帧，最后我们选择输入，这是从0,0位置开始的0.0显示（左上角）
接下来，我们将网络摄像头作为叠加层放在桌面的顶部。 为此，我们使用功能avfilter。 这是一个非常强大的工具，我不会详细介绍它。 您可以在这里找到所需的所有文档。
-vf "movie=/dev/video0:f=video4linux2, scale=240:-1, fps, setpts=PTS-STARTPTS [movie]; [in][movie] overlay=main_w-overlay_w-2:main_h-overlay_h-2 [out]"
-vf的选项用双引号括起来。 首先，我们为要使用的输入设置一个名称，在这种情况下为“电影”。 这只是一个名字，你可以选择任何你想要的。 该名称然后用输入定义，在我们的例子中是网络摄像头。
"movie=/dev/video0:f=video4linux2
下一个选项用于将输入缩小到一定的大小。 我使用-1来保持输入的原始宽高比，并将宽度设置为240像素。
scale=240:-1
我使用选项fps强制一个恒定的比特率。 我这样做是因为我已经发布了网络摄像头落后于桌面，导致它不同步。 可能没有必要，但我有安全的。
最后一个选项用于设置输入上的演示时间戳，从0开始。
setpts=PTS-STARTPTS
输入选项到此结束，我们用[movie]关闭它; 其次是[影片] [影片]
这里我们放置实际的叠加设置。
overlay=main_w-overlay_w-2:main_h-overlay_h-2 [out]"
这将输入作为从右下角的2个像素的叠加层，从底部放置2个像素。 我们用[out]关闭它
有关覆盖如何工作的更多信息，请看这里 。
我们完成了所有的输入内容，看看我们如何编码它。
我使用libx264作为音频编解码器的视频编解码器和libfaac。
-vcodec libx264 -crf 20 -preset veryfast -minrate 150k -maxrate 500k -s 960x540
如上所述，libx264是我的视频编解码器的首选。 “-crf 20”是速率控制方法，值得持续质量。
“-preset veryfast”是一组配置，如果您想了解更多关于它，请看这里 。
“-s 960x540”将设置输出分辨率。 增加它会提供更好的质量，但也会增加比特率，并使用更多的CPU进行编码。
我尝试限制在150kb / s到500kb / s之间的比特率。 如果它需要它仍然会超过最大值，但它会防止巨大的尖峰
-acodec libfaac -ar 44100 -ab 96000
对于音频，我将频率设置为44100，比特率设置为96k。 这给了我足够的质量，需要更少的带宽和CPU。
“-threads 0”是使用所有CPU的选项。 我相信它的默认，但它没有伤害到它在那里
现在您可以选择输出格式和输出并完成。 不幸的是，我不得不做一个肮脏的解决方法，以便能够在流媒体的同时记录会话。 我不能仅仅使用第二个输出的原因是它不会包括avfilter，因为它只适用于第一个输出，并且还需要添加到第二个输出。 这不会起作用，因为/ dev / video0被第一个输出（设备忙）使用
Therfore而不是输出它，因为我通常会将其输出到标准输出，使用三通抓取一切并将其放在一个文件上，然后启动一个使用标准输出作为输入的第二个ffmpeg会话，复制编码并将其输出到rtmp服务器。
如果您不需要同时录制，只需完成以下命令：
-f flv -metadata streamName=livestream tcp://x.x.y.y:1234
我使用flv作为输出格式，因为我们将在rtmp服务器上使用flvplayback。 “-metadata streamName = livestream”设置livestream的名称。 如果我们不给它这个名字，crtmpserver会选择一个随机的名字，使我们很难在flowplayer中指定流。
用你的crtmpserver ip地址和端口号替换xxyy。 我使用1234，你可以使用任何你想要的真正。
如果你确实需要记录，并且找不到更优雅的解决方案（请让我知道如果你这样做），你需要注意的是，当你关闭ffmpeg时，它会使name.flv文件变得不可靠。 不用担心，它很容易解决。 这是我如何做到的：
ffmpeg -i name.flv -codec copy -f mp4 name.mp4
这将所有东西都放在一个新的容器中，当我们关于它，为什么不把它放在比flv更好的东西！ 现在可以寻求，但不幸的是，在完全缓冲之前，flowplayer将无法播放该文件。 这是因为mp4格式将moov原子放在文件的末尾
您可以使用qt-faststart来解决这个问题。
为此，您需要安装python。
用git下载qt-faststart：
git clone https://github.com/danielgtaylor/qtfaststart.git
要安装使用setup.py脚本：
cd qtfaststart
python setup.py install
您现在可以使用qtfaststart将moov原子移动到文件的开头，如下所示：
qtfaststart input.mp4 output.mp4
这种配置旨在以低比特率制定体面的质量。 对于演示文稿和幻灯片，比特率约为200 kb / s，质量非常可以接受。 当播放视频时，比特率高达1 MB / s。 您可以随时更改这些设置以满足您的需要
这结束了ffmpeg配置。
crtmpserver：
编译时导航到/ crtmpserver / builders / cmake / crtmpserver
您需要编辑crtmpserver.lua 。
找到“description =”FLV播放示例“的部分，它是您需要编辑的接受者。
{
ip="0.0.0.0",
port=1234,
protocol="inboundLiveFlv",
waitForMetadata=true,
},
在接受器字段中插入，或者编辑已经存在的那个。 这里重要的是指定您在ffmpeg中使用的端口。
完成后，您可以启动crtmpserver。 从cmake文件夹执行此操作。
cd ..
./crtmpserver/crtmpserver ./crtmpserver/crtmpserver.lua
如果您收到错误的配置文件可能是错误的。 如果不是，您将被放置在控制台中。
更多信息在这里 。
结论是crtmpserver配置。
flowplayer：
这也可能很棘手，但幸运的是，在flowplayer站点上有很好的文档 。 我只会解释如何嵌入播放器并使用rtmp插件。
首先，你需要添加flowplayer的路径在头：
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.10.min.js"></script>
我将Jquery的路径放在身上：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript" charset="utf-8"></script>
我有一个叫做玩家的类，有一些花哨的选择，使它看起来更冷。
<style>
a.player {
display:block;
width:900px;
height:500px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
background:#000 url(/media/img/global/gradient/h500.png) repeat-x 0 0;
background:-moz-linear-gradient(top,
rgba(55, 102, 152, 0.9),
rgba(6, 6, 6, 0.9));
-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}
</style>
我不会详细介绍我正在使用的课程，如果你愿意，你可以做自己的课程。 flowplayer需要在一个类中，因为它使用宽度和高度，没有它，你不会看到它。
现在为了实际的flowplayer配置。 脚本不能在其内部具有html的div内，所以要安全放在身上。
<script>
$(function() {
$f("stream", "flowplayer/flowplayer-3.2.11.swf", {
play:
{
opacity: 0.0,
label: null, // label text; by default there is no text
replayLabel: null, // label text at end of video clip
},
clip: {url: 'livestream',
live: true,
autoPlay: true,
provider: 'influxis',
},
canvas: {
backgroundImage: 'url(image/offline.png)'
},
plugins: {
influxis: {
url: "flowplayer/flowplayer.rtmp-3.2.10.swf",
netConnectionUrl: 'rtmp://x.x.x.x/flvplayback'
}
}
});
});
</script>
这里有一些重要的事情。
$f("stream", "flowplayer/flowplayer-3.2.11.swf", {
这定义了播放器，“stream”是我们稍后将其链接到div类的id。
之后，配置有四个部分，但您只需要剪辑和插件。
在“播放”中，我删除播放器屏幕中的缓冲区并播放图标，因为它不是一个真实的流媒体。
在“剪辑”中，我将url设置为livestream，这是我们在ffmpeg中使用的元数据。 我告诉Flowplayer它的“live：true”的直播流，使流自动以“autoPlay：true”开头。 插件部分提到“提供者：”内容“，”
在“画布”中，我设置了一个背景图像，所以人们会明白流在何时离线
在提供程序流入的“插件”中，我将路径设置为带有“url”的rtmp插件。 “netConnectionUrl”告诉我们的rtmp服务器在哪里。 Remeber包含/ flvplayback，以便crtmpserver知道是寻找流！
现在我们可以把它嵌入一个div的某个地方，或者像这样的身体：
<div class="player" id="stream" style=float:left"></div>
请注意，我使用id =“stream”将其链接到我们之前制作的脚本。 它也使用我们制作的类玩家。
现在你应该能够启动你的ffmpeg命令并在浏览器中观看流。
结论
这个教程变得有点长，我希望，但我希望它会帮助某人在那里。 请让我知道，如果你发现我做错了，或者有什么可以改进的。 谢谢阅读！
