网页版直播连麦时 如何接入rtmp动态视频流?

来咯,本菜鸡日常踩坑!!!
这次咱们来唠唠这个直播的时候,怎么接入rtmp动态视频流。
说下我们的这个直播,我们是用socketio监听学生是否上下线的,在线的学生,老师可以进行视频的推拉流,跟学生连麦闭麦,当前只支持单个学生的连麦及闭麦。
话不多说,开始。
准备工作:
下载video-js.swf文件:5.4.2版本 video-js.swf文件

下载videojs相关js文件:videojs.min.js和videojs-flash.js

  1. html代码

是的,你没有看错,就一个空div。我们直播的时候不断的连麦和闭麦操作,就要不断的创建video,然后再不断的销毁video,所以video我们动态生成,然后把生成之后的video放进这个div中。

  1. js代码
//定义播放资源,关于这个推流地址,我们是用的ajax发起请求获取的,大家可以直接让后台返回推流地址就行
var pullAddress;
//定义全局变量video
var myPlayer;
// 初始化视频,设为全局变量
function fn_video_init() {
	//动态生成视频html
	var videoId = "rtmpVideo";
	//考虑到用户的使用习惯问题,在视频界面添加了一个闭麦按钮,老师可以在视频页面直接闭麦,也可以去学生列表界面点击闭麦
	$("#videoItem").html("" +
			"");
			
	videojs.options.flash.swf = "video-js.swf";
	myPlayer = videojs(videoId, {
		muted: true,// 静音
		preload: "auto",// 预加载
		language: "zh-CN",// 初始化语言
		playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],// 播放速度
		techOrder: ['flash'],
		sources: [{
			src: pullAddress,//这里设置你的播放资源,
			type: 'rtmp/flv'
		}]
	}, function () {
		console.log("--------------成功初始化视频--------------");
		myPlayer.one("playing", function () {         // 监听播放
			console.log("开始播放");
		});
		myPlayer.one("error", function (error) {      // 监听错误
			console.error("监听到异常,错误信息:%o", error);
		});
	});
}

//点击学生列表的某个学生的 连麦按钮的时候 ,发送ajax请求,向后台发起指令(依赖layui框架)
//学生列表也是动态生成的,点击当前学生的连麦按钮时
$(document).on('click','button.openBtn',function(){
	var stuAccount = $(this).attr("data-index");//获取学生账号
	admin.req({
		url:'xxxxxxxxxxxxxxxxxxxxxxxxxxx' //后台的真实接口
		,data: {
			'cmd':"stand_up" //连麦指令
			,"account":stuAccount //学生账号
		}
		,success:function(res){
				fn_video_init();//调用 初始化视频 的方法,创建video,准备播放
				$("#videoItem .closeBtn").attr("data-index",stuAccount);//给视频的右上角闭麦按钮赋值data-index(学生账号)   这一步很重要!!!!
				myPlayer.play();//连麦,视频接入,开始播放
		}
	});
});



//点击当前学生的闭麦按钮的时候 ,发送ajax请求,向后台发起指令(依赖layui框架)
//可以在 视频的右上角 直接闭麦,也可以在学生列表界面点击 正在视频的学生 的闭麦按钮
$(document).on('click','button.closeBtn',function(){
	var stuAccount = $(this).attr("data-index");//获取当前闭麦的学生账号
	admin.req({
		url:'xxxxxxxxxxxxxxxxxxxxxxxxxxx' //后台的真实接口
		,data: {
			'cmd':"sit_down" //闭麦指令
			,"account":stuAccount //学生账号
		}
		,success:function(res){
			myPlayer.pause();//暂停直播
			myPlayer.dispose();//销毁video,关闭当前视频页面
		}
	});
});

这算是一个小demo,小小的记录一下。希望大佬多多指教,包括代码能不能优化。能不能不要不断的创建销毁,总感觉代码可以再简洁一点,要是有更简洁的方法,求大佬分享,欢迎交流

你可能感兴趣的:(项目总结,ajax,jquery,javascript)