使用音频和网络摄像头覆盖在浏览器中流式传输您的桌面使用ffmpeg,crtmpserver和Flowplayer

使用音频和网络摄像头覆盖在浏览器中流式传输您的桌面使用ffmpeg,crtmpserver和Flowplayer 本教程基于Ubuntu Lucid,...

使用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命令并在浏览器中观看流。

结论

这个教程变得有点长,我希望,但我希望它会帮助某人在那里。 请让我知道,如果你发现我做错了,或者有什么可以改进的。 谢谢阅读!