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

https://github.com/bycb/videoPlayer.git

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

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

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>
			<!-- <easy-player video-url="http://127.0.0.1:10800/hls/stream_2/stream_2_live.m3u8" live="true" stretch="true"></easy-player> -->
			<!-- <easy-player video-url="rtmp://127.0.0.1:10935/hls/stream_2" live="true" stretch="true" autoplay="true"></easy-player> -->
			<!-- <easy-player video-url="http://127.0.0.1:10800/flv/hls/stream_2.flv" live="true" aspect="300:100"></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>

Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

WebSocket实现实时通信

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说

avatar 即构开发者社区

webrtc的实时视频通话建立的流程--C++接口

一：webrtc通讯流程简介附件下载：webrtc即Web Real-Time Communication，web实时通信技术。简单地说就是在web浏览器里面引入实时通信，包括音视频通话等。本文章只简单的描述下webrtc实时音视频通话建立了的过程，（文章中提到代码的部分都是C++的接口部分，但是建立通讯流程的过程都是一样的）在webrtc的通讯过程中，主动呼叫方被称为offer方。被动等待呼叫的

avatar 即构开发者社区
cover

一文带你了解webrtc基本原理（动手实现1v1视频通话）

avatar 即构开发者社区