web端实现直播，将监控视频嵌入系统。摄像头是天地伟业的。各种坑，终于在页面看见直播了。记下吧
[email protected]:i1520/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>
