使用EasyNVR、easy-player-element.js在web端实现视频直播

爱被打了一巴掌 2022-01-29 09:21 414阅读 0赞

web端实现直播，将监控视频嵌入系统。摄像头是天地伟业的。各种坑，终于在页面看见直播了。记下吧

[git@github.com:i1520/videoPlayer.git][git_github.com_i1520_videoPlayer.git]

准备：easyNVR安装包、easy-player-element.min.js、easy-player.swf、crossdomain.xml。swf需要放置在根目录。该文件是rtmp协议使用。三种协议RTMP, HLS, FLV没毛病。

1、安装EasyNVR将摄像机配置完成，在视频广场可以查看实时画面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

2、代码，使用iframe 嵌入别的页面OK.

<!DOCTYPE HTML>
    <html>
    	<head>
    		<title>easy-player</title>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<meta name="renderer" content="webkit" />
    		<meta name="force-rendering" content="webkit" />
    	</head>
    	<body>
    		<div id="video" style="width: 600px; height: 400px;">
    			<easy-player id="test2" v-bind:video-url="srcUrl" live="true" stretch="false"></easy-player>
    			
    			
    			
    		</div>
    
    		<script type="text/javascript" src="../easy-player-element.min.js"></script>
    		<script src="../js/vue.min.js"></script>
    		<script type="text/javascript" src="../easyPlay/md5.js"></script>
    		<script type="text/javascript" src="../videojs/jquery.min.js"></script>
    		<script type="text/javascript" src="../easyPlay/appCommon.js"></script>
    	</body>
    	<script>
    		var username = "admin";
    		var password = hex_md5("admin");
    		// 
    		var param = {}; //获取直播链接所需参数
    		param.protocol = "RTMP"; //直播协议允许值: RTMP, HLS, FLV
    		param.channel = 1;
    
    		var vm = new Vue({
    			el: "#video",
    			data: {
    				srcUrl: ""
    			}
    		})
    
    		// //登录
    		function loginNVR() {
    			Video.ajaxGet("/api/v1/login", {
    				username: username,
    				password: password
    			}, function(e) {
    				console.log(e.EasyDarwin.Body.Token);
    				getVideoUrl();
    			})
    		}
    		// if (token == "") {
    		loginNVR();
    
    		function getVideoUrl() {
    			console.log(param);
    			Video.ajaxGet("/api/v1/getchannelstream", param, function(e) {
    				// 				console.log(e);
    				var videoSrc = baseUrl + e.EasyDarwin.Body.URL; //新的视频播放地址
    				if (param.protocol == "RTMP") {
    					// videojs.options.flash.swf = "video-js.swf";
    					videoSrc = e.EasyDarwin.Body.URL; //新的视频播放地址
    				}
    				vm.srcUrl = videoSrc;
    				console.log(videoSrc);
    
    			});
    		}
    
    		//定义一个保活接口方法
    		function touchchannelstream() {
    			Video.ajaxGet("/api/v1/touchchannelstream", param, function(data, status) {
    				var videoSrc = baseUrl + data.EasyDarwin.Body.URL; //新的视频播放地址
    				if (param.protocol == "RTMP") {
    					videojs.options.flash.swf = "video-js.swf";
    					videoSrc = data.EasyDarwin.Body.URL; //新的视频播放地址
    				}
    				// $("#test2").attr("video-url", videoSrc);
    				vm.srcUrl = videoSrc;
    				console.log("保活")
    			});
    		}
    	</script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1][]

[git_github.com_i1520_videoPlayer.git]: http://github.com/videoPlayer.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20220129/640eb547ae5048b6bfd92cda82f21a8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1]: /images/20220129/27d8da89a78d40f2a063de2612ff7b58.png