大家好,又见面了,我是你们的朋友全栈君。
目录大纲:
首先说明,本篇文章是概念+实践,对于希望了解和实践一个简单的摄像头直播网页功能的人会有帮助,由于篇幅和实践深入度有限,目前demo效果只支持直播播放电脑端以及常用摄像头的实时视频流,其他复杂的功能(例如视频信息实时处理,高并发,网络分发等)尚未实现,还需要进一步探索。
下面按照目录大纲来一个一个讲解:
直播技术涵盖很广,现如今大家广泛了解的就有视频网站的个人直播、手机直播、安防方面的摄像头监控等会使用到直播的技术;
下面先出一张概念图,介绍直播流程中的各个技术环节。可以理解分为采集端、流媒体服务器以及播放端;还需要了解什么是推流,什么是拉流。
既然需要推流和拉流, 就必然涉及到视频流的传输,所以接下来介绍常用的流媒体传输协议 常用的流媒体传输协议有RTMP,RTSP,HLS,HTTP-FLV
有了以上基本概念之后,我们就大致知道要搭建一个拥有直播功能的页面需要哪些东西了,下面就基于这个架构进行各个部分的实现
首页dashboard展示了服务器cpu的使用情况以及网络带宽状况
另外一种常用的场景是直接拉去摄像头设备中的视频流数据,这种方式,nodeMediaServer也支持,只需要在管理后台配置对应的摄像头的配置信息,就可以进行推流操作了.这些配置信息包括ip,登录用户名和密码等,配置界面如下所示: 预设配置:
还可以自定义设定配置,如果使用的是自定义的摄像头,具备rtsp传输功能的,就可以使用西面的配置方式进行摄像头信息的配置,指定输出流地址,这样直接从浏览器端就可以通过这个输出流地址进行视频的播放:
首先搞定推流:
分别实验了直接从mac上推摄像头的视频流数据以及绑定摄像头设备地址信息,通过nodeMediaServer进行推流和拉流服务.
然后是前端页面进行视频流的播放,下面是播放器部分的核心代码:
live-demo.js
import * as React from 'react';
import { Button, Input, Row, Col } from 'react-x-component';
import flv from 'flv.js';
const { useState, useEffect } = React;
interface LiveDemoProps {
defaultUrl?: string,
onUrlChange?: Function
}
//前端学习裙:950919261
export default function LiveDemo({ defaultUrl = 'http://ip:8000/live/stream.flv', onUrlChange }: LiveDemoProps) {
let player = null;
let playerDom = null;
const [liveUrl, setLiveUrl] = useState(defaultUrl);
useEffect(() => {
if (flv.isSupported) {
player = flv.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
hasVideo: true,
url: liveUrl,
cors: true
}, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range'
});
player.attachMediaElement(playerDom);
player.load();
} else {
console.log('Your browser is not support flv.js');
}
}, []);
function updatePlayer() {
if (player) {
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
player = flv.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
hasVideo: true,
url: liveUrl,
cors: true
}, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range'
});
player.attachMediaElement(playerDom);
player.load();
}
return (
<div className='live-demo'>
<div className="modify-url">
<Row>
<Col md={6}>
<Input
value={liveUrl}
onChange={(value) => {
setLiveUrl(value);
}}
/>
</Col>
<Col md={6}>
<Button
type={'primary'}
onClick={() => {
updatePlayer();
onUrlChange && onUrlChange(liveUrl);
}}
>修改</Button>
</Col>
</Row>
</div>
<video
style={
{ width: '100%', height: '100%' }}
controls
className='video-demo'
ref={(e) => playerDom = e}
></video>
</div>
);
}
播放摄像头的视频流效果,右边是直接获取的摄像头数据流,右边是通过mac电脑推的实时的摄像头画面:
OK,这样就搞定了一整套直播网页需要的前后端技术服务的搭建了!
上面的示例相对而言还过于简单,只是借助了第三方的技术和框架搭建了一个流媒体服务器,和前端支持播放视频流的播放页面,并通过摄像头采集数据,推流,打通了整个流程,形成了一个闭环,但是还有很多内容需要进一步深入:
本文通过概念学习和介绍,理解了常见视频直播技术的整体架构流程,基于前端的角度去快速搭建了一套完整的直播网页的功能,当然其中还有很多不足和需要深入的地方,需要进一步探索,后续如果有更深入的技术沉淀,会继续形成文章进行分享!
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/162866.html原文链接:https://javaforall.cn