好点的网站建设公司,交互式网页怎么制作,k2搭建wordpress,seo的排名机制之前是通过vlc插件来显示rtsp流视频#xff0c;但是限制很多#xff1a;1.要安装vlc的插件2.插件目前只支持ie#xff0c;像chrome在46版本之后根本就无法使用#xff0c;于是上网搜索得出rtsp-rtmp-videoJS这样的一个方案#xff0c;具体流程如下#xff1a;
一…之前是通过vlc插件来显示rtsp流视频但是限制很多1.要安装vlc的插件2.插件目前只支持ie像chrome在46版本之后根本就无法使用于是上网搜索得出rtsp-rtmp-videoJS这样的一个方案具体流程如下
一.rtsp转rtmp
1.首先测试rtsp链接是否有效这里用的vlc midia player:
如下图所示 媒体-打开网络串流-输入rtsp链接-播放正常的话就可以看到画面了。 2.接下来就是转换用的是nginx-rtmp-moduleFfmpeg的方案首先下载nginx-rtmp-module按照说明双击nginx.exe启动nginx正常的话浏览器输入http://localhost:8080/就可以进demochrome记得要允许允许flash。
FFmpeg转码用的这个方案 java封装FFmpeg命令下载好后不改源码的话直接引入FFmpegCommandHandler.jar这个jar包即可。
启动转码的代码 Override
public String startTranscoding(Camera camera) {String ip camera.getIp();String id fourfour;if (manager null) {manager new FFmpegManagerImpl();}MapString,String map new HashMap();map.put(appName, id);map.put(input, rtsp://admin:admin1234 ip :554);map.put(output, rtmp://localhost/live/);map.put(codec, h264);map.put(fmt, flv);map.put(fps, 25);map.put(rs, 640x360);map.put(twoPart, 0);// 执行任务id就是appName如果执行失败返回为nullreturn manager.start(map);
}代码运行日志截图 可以看到执行的命令具体参数就不做解释了可以自行百度这样我们就获得了rtmp://localhost/live/fourfour这个rtmp流。
同样的我们可以先用vlc media player先测试下这个流操作方法同上 顺利的话将会出现画面。
3.前端显示
前端主流的有jwplayer、videoJS等方案这里选择的免费的VideoJS主要代码如下
//videoJS播放器实例
var player null;//通过videoJs进行rtmp播放
$scope.rtmpReview function (decoder) {console.log(点解的decoder, decoder);if (decoder.style 1) {var cameraIp decoder.head;var id fourfour;$http.post(/decoder/decoderManager/transcode, {ip:cameraIp}).success(function (data) {console.log(transcode, data);}).error(function (data) {console.log(data);});$(#videoBody).append(video id\my-video1\ class\video-js vjs-big-play-centered\ controls preload\auto\ width\560\ height\360\ poster\\ data-setup\{}\ source type\rtmp/flv\ p class\vjs-no-js\To view this video please enable JavaScript, and consider upgrading to a web browser that a href\http://videojs.com/html5-video-support/\ target\_blank\supports HTML5 video/a /p/video);var videoUrl rtmp://localhost/live/ id;player videojs(my-video1);videojs(my-video1, {controls: true,autoplay: true,preload: auto}, function () {player.src(videoUrl);player.load(videoUrl);player.play();this.on(ended, function() {videojs.log(Awww...over so soon?!);});});$(#videoWatchModal).modal({show: true, keyboard: false, backdrop: static});}
};这里是将播放器放在了模态框上效果如下 好了这样我们就实现了rtsp在浏览器中播放的一整套流程。
