1 创建项目

登录zego控制台，创建一个项目，该项目的【AppId】和【Server】，在后续的推拉流过程中会用到

2 创建对象

// 创建demo节点（拉流remote-preview，推流local-preview）
<div><video id='remote-preview' className={cn.remotePreview} autoPlay='autoplay' muted playsInline></video><video id='local-preview' className={cn.localPreview} autoPlay='autoplay' muted playsInline></video>
</div>// 创建zego对象
const appID = xxxxxx // 过程1中的AppId
const server = xxxxxx // 过程1中的Server
const zg = new ZegoExpressEngine(appID, server)

3 定义过程方法

let localStream// 询问获取设备权限
export const enumDevices = async () => {try {const systemInfo = await zg.checkSystemRequirements()console.log('系统支持信息：', systemInfo)const deviceInfo = await zg.enumDevices()console.log('硬件信息：', deviceInfo)return true} catch (err) {console.log('获取设备权限失败：', err)}
}// 进房（需要唯一房间id，登录用户id和token）
export const loginRoom = async ({ roomID, userID, token }) => {try {const loginStatus = await zg.loginRoom(roomID,token,{userID: userID,userName: userID},{userUpdate: true, // 开启监听 roomUserUpdate 回调，默认不开启})return loginStatus} catch (err) {console.log('进房失败:', err)return false}
}// 呼叫推流（需要流id）
export const pushStream = async (streamID) => {// 调用 createStream 接口后，需要等待 ZEGO 服务器返回流媒体对象才能执行后续操作localStream = await zg.createStream({camera: {audio: true,video: true,}})// 获取页面的 video 标签const localVideo = document.getElementById('local-preview')// stream 为MediaStream对象，开发者可通过赋值给video或audio的srcObject属性进行渲染localVideo.srcObject = localStreamzg.startPublishingStream(streamID, localStream)
}// 呼叫拉流（需要流id）
export const pullStream = async (stremID) => {const remoteStream = await zg.startPlayingStream(stremID)// 获取页面的 video 标签const remoteVideo = document.getElementById('remote-preview')// remoteAudio为本地<video>或<audio>对象if (remoteVideo) {remoteVideo.srcObject = remoteStream}
}// 停止推流
export const stopPushStream = async (streamID) => {if (!streamID) returnzg.stopPublishingStream(streamID) // 停止推流zg.destroyStream(localStream) // 销毁流localStream = null
}// 停止拉流
export const stopPullStream = async (streamID) => {if (!streamID) returnzg.stopPlayingStream(streamID) // 停止拉流
}// 退出房间
export const logoutRoom = async ({ roomID, psStreamId, plStreamId }) => {stopPushStream(psStreamId)stopPullStream(plStreamId)await zg.logoutRoom(roomID)
}// 注销监听
export const closeListen = () => {zg.off('roomUserUpdate')zg.off('roomOnlineUserCountUpdate')zg.off('roomStateUpdate')zg.off('roomStreamUpdate')zg.off('publisherStateUpdate')zg.off('publishQualityUpdate')zg.off('playerStateUpdate')zg.off('playQualityUpdate')
}

4 实现

登录zego控制台，临时Token 项，点击【临时生成】，弹窗中输入【userID】，点击生成，得到临时【token】。
因为是调试demo，所以这里的【roomID】、【psStreamId】、【plStreeamId】可自定义，例如：0001。

.js

import React, { memo, useEffect } from 'react'
import zg, { loginRoom, enumDevices, pushStream, pullStream, logoutRoom, closeListen } from '过程3文件'
import cn from 'xxx.scss'
const userID = ''
const token = ''
const roomID = '' // 房间id
const psStreamId = '' // 推流id
const plStreamId = '' // 拉流idfunction ZegoDemo() {useEffect(async () => {initEventRoom()await loginRoom({ roomID, userID, token }))return () => {logoutRoom({ roomID })closeListen()}}, [])const initEventRoom = () => {zg.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {if (state === 'DISCONNECTED') {// 与房间断开了连接console.log(`房间断开连接${roomID}`)}if (state === 'CONNECTING') {// 与房间尝试连接中console.log(`${roomID}房间连接中。。。。。。。。`)}if (state === 'CONNECTED') {// 与房间连接成功console.log(`${roomID}房间连接成功`)// startPush()// startPull()}})// 用户状态更新回调zg.on('roomUserUpdate', (roomID, updateType, userList) => {console.log('用户状态更新回调', roomID, updateType, userList)})zg.on('roomOnlineUserCountUpdate', (roomID, count) => {// 房间人数监听console.log(`${roomID}房间人数监听：`, count)})zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {console.log('roomStreamUpdate roomID ', roomID, streamList)})}// zego本地推流并进行相关操作const startPush = async () => {zg.on('publisherStateUpdate', result => {// 推流状态更新回调console.log(`推流结果${result}`)})zg.on('publishQualityUpdate', (streamID, stats) => {// 推流质量回调console.log(`推流质量：`, stats)})// 调用麦克风等权限接口await enumDevices()pushStream(psStreamId)}const startPull = async () => { // 开始拉流zg.on('playerStateUpdate', async result => {// 拉流状态更新回调console.log(`拉流结果${result}`)})zg.on('playQualityUpdate', (streamID, stats) => {// 拉流质量回调console.log(`拉流质量：${stats}`)})pullStream(plStreamId)}const pullStart = async () => { // 开始拉流startPull()}const pullDestory = () => { // 销毁拉流logoutRoom({ plStreamId })}const pushStart = async () => { // 开始推流startPush()}const pushDestory = () => { // 结束推流logoutRoom({ psStreamId })}return <div className={cn.main}><div className={cn.line}>拉流<div onClick={pullStart}>开始</div><div onClick={pullDestory}>销毁</div></div><video id='remote-preview' className={cn.remotePreview} autoPlay='autoplay' muted playsInline></video><div className={cn.line}>推流<div onClick={pushStart}>开始</div><div onClick={pushDestory}>销毁</div></div><video id='local-preview' className={cn.localPreview} autoPlay='autoplay' muted playsInline></video></div>
}export default memo(ZegoDemo)

zego实现简单的web端推拉流相关推荐

开源流媒体解决方案，流媒体服务器，推拉流，直播平台，SRS，WebRTC，移动端流媒体，网络会议，优秀博客资源等分享
开源流媒体解决方案,流媒体服务器,推拉流,直播平台,SRS,WebRTC,移动端流媒体,网络会议,优秀博客资源等分享一.优秀的流媒体博客资源 1.1 EasyNVR:专注于安防视频互联网化的技术 1 ...
视频直播技术干货：一文读懂主流视频直播系统的推拉流架构、传输协议等
1.引言随着移动网络网速的提升与资费的降低,视频直播作为一个新的娱乐方式已经被越来越多的用户逐渐接受.特别是最近这几年,视频直播已经不仅仅被运用在传统的秀场.游戏类板块,更是作为电商的一种新模式得到 ...
视频直播技术分享：一文读懂主流视频直播系统的推拉流架构、传输协议等
本文由蘑菇街前端开发工程师"三体"分享,原题"蘑菇街云端直播探索--启航篇",有修订. 1.引言随着移动网络网速的提升与资费的降低,视频直播作为一个新的娱乐方 ...
一个小时开发的直播推拉流软件来了
一.简介目前市面上直播推流的软件有很多,拉流也很常见.近期因为业务需要,需要搭建一整套服务端推流,客户端拉流的程序.随即进行了展开研究,花了一个小时做了个基于winfrom桌面版的推拉流软件.另外稍 ...
SRS流媒体服务器——WebRTC推拉流演示
SRS流媒体服务器--WebRTC推拉流目录 WebRTC推拉流配置 WebRTC拉流演示 WebRTC推流演示 SRS官方WebRTC文档:https://github.com/ossrs/srs ...
音视频学习之rtsp推拉流学习2（流媒体服务器ZLMediaKit）
公司项目需要实现一个只是rtsp推流和rtsp拉流的业务机制,据说ZLMediaKit能满足rtsp推拉流的相关业务. 对ZLMediaKit流媒体服务器进行安装以及了解. 0:从开源库Readme中 ...
video、webgl canvas推拉流及多媒体流协议
video.webgl canvas推拉流及多媒体流协议不经常接触智慧城市项目,直播项目,安全项目的人,可能了解的不够多!做这些项目的也会根据公司技术深度学到更深的的知识! 先看一张图片! 下图所使 ...
Nginx搭建RTMP推拉流服务器
如题,今天就来实现一个推拉流服务器,模拟下推流后被客户端拉流看到效果. 详细步骤如下 - 安装Nginx - 安装FFmpeg - 安装VLC客户端安装Nginx 在Mac上有一个很好用的包管理插件 ...
浅析主流视频直播系统的推拉流架构、传输协议
随着移动网络网速的提升与资费的降低,视频直播作为一个新的娱乐方式已经被越来越多的用户逐渐接受.特别是最近这几年,视频直播已经不仅仅被运用在传统的秀场.游戏类板块,更是作为电商的一种新模式得到迅速成长. ...

zego实现简单的web端推拉流

1 创建项目

2 创建对象

3 定义过程方法

4 实现

zego实现简单的web端推拉流相关推荐

最新文章

热门文章