1、引入直播工具类

https://www.shenmazong.com/blog/1605900014508261376

2、房间管理

• 房间增加

    @Override
    public Result addRoom(LiveRoomVo liveRoomVo) {
        //--1 判断房间编号是否重复
        TbLiveRoom one = getOne(
                new QueryWrapper<TbLiveRoom>().lambda().eq(TbLiveRoom::getRoomNo, liveRoomVo.getRoomNo()).last("limit 1")
        );
        if(one != null) {
            return Result.FAILED(500, "房间已经存在");
        }

        //--2 添加直播的房间
        TbLiveRoom tbLiveRoom = new TbLiveRoom();
        tbLiveRoom.setRoomNo(liveRoomVo.getRoomNo());
        tbLiveRoom.setStreamName(liveRoomVo.getRoomNo());

        Date beginTime = new Date();
        tbLiveRoom.setBeginTime(beginTime);

        Date endTime = new Date(beginTime.getTime() + liveRoomVo.getLiveMinutes() * 60 * 1000);
        tbLiveRoom.setEndTime(endTime);

        // 生成推流地址
        String pushUrl = TxLiveUtils.makePushUrl(liveRoomVo.getStreamName(), endTime);
        // 生成拉流地址
        String playUrl = TxLiveUtils.makePlayUrl(liveRoomVo.getRoomNo());
        tbLiveRoom.setPushUrl(pushUrl);
        tbLiveRoom.setPullUrl(playUrl);

        // 保存到数据库
        save(tbLiveRoom);

        return Result.SUCCESS();
    }

• 房间列表

• 房间状态修改

3、前端页面准备

1、加入css

放到head标签中的前面。

	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

2、加入vue+axios

放到body结束标签的后面。

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3、加入vue的实例代码

<script>
    new Vue({
      el: '#app',
      data: function() {
        return {
			rooms: [],
			pageNum: 1,
			pageSize: 4,
			total: 0,
        }
      },
      mounted() {
		// 加载直播房间列表
		this.loadRooms();
      },
	  methods: {
		loadRooms() {
			axios.post('/api/live/live/list', 
					{
						pageNum: this.pageNum,
						pageSize: this.pageSize
                  	}
				  )
                  .then((res) => {
                    console.log(res);
                    if(res.data.code == 200) {
						this.rooms = res.data.data.records;
						this.total = res.data.data.total;
						console.log("rooms", this.rooms);
                        this.$message.success("数据加载成功");
                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                  });
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize = val;
			this.loadRooms();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pageNum = val;
			this.loadRooms();
		}
	  }
    })
  </script>

4、页面推流

官方文档
https://cloud.tencent.com/document/product/267/97826

1、步骤1：页面准备工作

在需要直播推流的页面中引入初始化脚本。

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>

需要在 HTML 的 body 部分引入脚本，如果在 head 部分引入会报错。

2、放置播放的div

注意：
域名需要使用localhost，否则没有权限打开摄像头

<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

3、增加js的代码

<script type="text/javascript">
	$(function(){
		const livePusher = new TXLivePusher();
		livePusher.setRenderView('local_video');
		livePusher.videoView.muted = true;

		// 设置视频质量
		livePusher.setVideoQuality('720p');
		// 设置音频质量
		livePusher.setAudioQuality('standard');
		// 自定义设置帧率
		livePusher.setProperty('setVideoFPS', 25);

		// 打开摄像头
		// livePusher.startCamera();
		// 打开麦克风
		// livePusher.startMicrophone();

		// livePusher.startPush('webrtc://live.shenmazong.com/live/6666?txSecret=1fbf9cdc9f7dfc38fca2dba1abe867d9&txTime=65054043');

		// 采集完摄像头画面后自动推流
		livePusher.startCamera()
		.then(function () {
			livePusher.startPush('webrtc://live.shenmazong.com/live/6666?txSecret=1fbf9cdc9f7dfc38fca2dba1abe867d9&txTime=65054043');
		})
		.catch(function (error) {
			console.log('打开摄像头失败: '+ error.toString());
		});
		
	})
	</script>

4、优化代码

官方地址
https://cloud.tencent.com/document/product/267/97826

<script type="text/javascript">
	$(function(){
		
		const livePusher = new TXLivePusher();
		livePusher.setRenderView('local_video');
		livePusher.videoView.muted = true;

		// 设置视频质量
		livePusher.setVideoQuality('720p');
		// 设置音频质量
		livePusher.setAudioQuality('standard');
		// 自定义设置帧率
		livePusher.setProperty('setVideoFPS', 25);

		$("#btnOpen").click(function(){
			// 打开摄像头
			console.log('打开摄像头');
			// livePusher.startCamera();
			livePusher.startScreenCapture();
		}),

		$("#btnClose").click(function(){
			// 关闭摄像头
			console.log('关闭摄像头');
			// livePusher.stopCamera();
			livePusher.stopScreenCapture();
		}),

		$("#btnPush").click(function(){
			// 开始推流
			console.log('开始推流');
			livePusher.startPush('webrtc://live.shenmazong.com/live/6666?txSecret=1fbf9cdc9f7dfc38fca2dba1abe867d9&txTime=65054043');
		}),

		$("#btnStop").click(function(){
			// 停止推流
			console.log('停止推流');
			livePusher.stopPush();
		})
	})
</script>

5、播放页面

https://cloud.tencent.com/document/product/881/30818

• 引入播放器

	<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.min.css" rel="stylesheet"/>
	<!--播放器脚本文件-->
	<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.0.1/tcplayer.v5.0.1.min.js"></script>

• 放置播放器容器

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

• 播放器初始化

<script type="text/javascript">
	$(function(){
		var player = TCPlayer('player-container-id', {
			sources: [{
			src: 'http://play.shenmazong.com/live/6666.m3u8',
			}],
			licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1257716500_1/v_cube.license',
		}); // player-container-id 为播放器容器 ID，必须与 html 中一致


		// player.src(url); // url 播放地址


	})
</script>