390 lines
17 KiB
JavaScript
390 lines
17 KiB
JavaScript
class Webrtc {
|
||
/*******
|
||
* @name:
|
||
* @description:
|
||
* @param {object} InitialData 以下数据的对象
|
||
* @param {string} element 标签dom
|
||
* @param {boolean} debug 是否打印日志
|
||
* @param {string} zlmsdpUrl 流地址
|
||
* @param {boolean} simulcast 无线电和电视同步播放
|
||
* @param {boolean} useCamera 是否使用摄像头
|
||
* @param {boolean} audioEnable 音频数据
|
||
* @param {boolean} videoEnable 视频数据
|
||
* @param {boolean} recvOnly true是拉流 false是推流
|
||
* @param {object} resolution { w: 3840, h: 2160 } 分辨率
|
||
* @param {boolean} usedatachannel //数据通道
|
||
* @param {*} player webrtc实例
|
||
* @return {*}
|
||
* @author:
|
||
*/
|
||
|
||
/*
|
||
let InitialData = {
|
||
element:element,
|
||
debug:debug,
|
||
zlmsdpUrl:zlmsdpUrl,
|
||
simulcast:simulcast,
|
||
useCamera:useCamera,
|
||
audioEnable:audioEnable,
|
||
videoEnable:videoEnable,
|
||
recvOnly:recvOnly,
|
||
resolution:resolution,
|
||
usedatachannel:usedatachannel,
|
||
}
|
||
*/
|
||
constructor(InitialData) {
|
||
this.element = InitialData.element
|
||
this.debug = InitialData.debug
|
||
this.zlmsdpUrl = InitialData.zlmsdpUrl
|
||
this.simulcast = InitialData.simulcast
|
||
this.useCamera = InitialData.useCamera
|
||
this.audioEnable = InitialData.audioEnable
|
||
this.videoEnable = InitialData.videoEnable
|
||
this.recvOnly = InitialData.recvOnly
|
||
this.resolution = InitialData.resolution
|
||
this.usedatachannel = InitialData.usedatachannel
|
||
this.player = null
|
||
this.eventHandlers = {}
|
||
}
|
||
|
||
// 检测摄像头分辨率
|
||
detection() {
|
||
return new Promise((resolve, reject) => {
|
||
navigator.mediaDevices.enumerateDevices().then(devices => {
|
||
devices = devices.filter(d => d.kind === 'videoinput')
|
||
let creamData = devices[0].getCapabilities()
|
||
console.log(creamData, 'creamData')
|
||
let resolution = {}
|
||
resolution.w = creamData.width.max
|
||
resolution.h = creamData.height.max
|
||
resolve(resolution)
|
||
// this.resolution = resolution
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
reject(err)
|
||
// this.resolution = resolution
|
||
})
|
||
})
|
||
}
|
||
|
||
// 拉流
|
||
start_play() {
|
||
return new Promise((resolve, reject) => {
|
||
let this_ = this
|
||
this.push_url = null
|
||
this.pull_url = null
|
||
let ZLMRTCClient = ZLMRTCClient_({})
|
||
if (this.useCamera) {
|
||
this.detection().then((resolution) => {
|
||
this.player = new ZLMRTCClient.Endpoint({
|
||
element: this.element,
|
||
debug: this.debug,
|
||
zlmsdpUrl: this.zlmsdpUrl,
|
||
simulcast: this.simulcast,
|
||
useCamera: this.useCamera,
|
||
audioEnable: this.audioEnable,
|
||
videoEnable: this.videoEnable,
|
||
recvOnly: this.recvOnly,
|
||
resolution: resolution,
|
||
usedatachannel: this.usedatachannel,
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) { // ICE 协商出错
|
||
console.log('ICE 协商出错')
|
||
reject()
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) { //获取到了远端流，可以播放
|
||
console.log('播放成功', e.streams, e, this_.zlmsdpUrl)
|
||
this_.pull_url = e.streams[0]
|
||
// resolve(e.streams[0])
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) { // offer anwser 交换失败
|
||
console.log('offer anwser 交换失败', e)
|
||
this_.stop_play(reject, 'offer anwser 交换失败')
|
||
})
|
||
|
||
// WEBRTC_IS_H265
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_IS_H265, function (e) { // offer anwser 交换失败
|
||
console.log('H265视频格式', e)
|
||
this_.stop_play(reject, '右上角设置打开插件模式以支持H265')
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) { // 获取到了本地流
|
||
console.log('获取到了本地流')
|
||
this_.push_url = s
|
||
// resolve(s)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) { // 获取本地流失败
|
||
console.log('获取本地流失败', s)
|
||
this_.stop_play(reject, '获取本地流失败')
|
||
})
|
||
|
||
/**
|
||
*new：表示刚创建一个新的 WebRTC 对象。
|
||
connecting：表示正在建立连接。
|
||
connected：表示已经成功建立连接。
|
||
disconnected：表示连接已经中断。
|
||
failed：表示连接失败。
|
||
closed：表示连接已经关闭。
|
||
have-local-offer：表示本地已经创建了一个 offer。
|
||
have-remote-offer：表示远程端已经创建了一个 offer。
|
||
stable：表示连接已经稳定。
|
||
have-local-pranswer：表示本地已经创建了一个 pranswer。
|
||
have-remote-pranswer：表示远程端已经创建了一个 pranswer。
|
||
* */
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
||
console.log('当前状态==>', state)
|
||
if (state == 'connected') {
|
||
if (this_.push_url) {
|
||
resolve(this_.push_url)
|
||
} else if (this_.pull_url) {
|
||
resolve(this_.pull_url)
|
||
}
|
||
} else {
|
||
this_.triggerEvent(state)
|
||
}
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
|
||
console.log('rtc datachannel 打开 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
|
||
console.log('rtc datachannel 消息 :', event.data)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
|
||
console.log('rtc datachannel 错误 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
|
||
console.log('rtc datachannel 关闭 :', event)
|
||
})
|
||
}).catch(() => {
|
||
this.player = new ZLMRTCClient.Endpoint({
|
||
element: this.element,
|
||
debug: this.debug,
|
||
zlmsdpUrl: this.zlmsdpUrl,
|
||
simulcast: this.simulcast,
|
||
useCamera: this.useCamera,
|
||
audioEnable: this.audioEnable,
|
||
videoEnable: this.videoEnable,
|
||
recvOnly: this.recvOnly,
|
||
resolution: this.resolution,
|
||
usedatachannel: this.usedatachannel,
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) { // ICE 协商出错
|
||
console.log('ICE 协商出错')
|
||
reject()
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) { //获取到了远端流，可以播放
|
||
console.log('播放成功', e.streams, e, this_.zlmsdpUrl)
|
||
this_.pull_url = e.streams[0]
|
||
// resolve(e.streams[0])
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) { // offer anwser 交换失败
|
||
console.log('offer anwser 交换失败', e)
|
||
this_.stop_play(reject, 'offer anwser 交换失败')
|
||
})
|
||
|
||
// WEBRTC_IS_H265
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_IS_H265, function (e) { // offer anwser 交换失败
|
||
console.log('H265视频格式', e)
|
||
this_.stop_play(reject, '右上角设置打开插件模式以支持H265')
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) { // 获取到了本地流
|
||
console.log('获取到了本地流')
|
||
this_.push_url = s
|
||
// resolve(s)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) { // 获取本地流失败
|
||
console.log('获取本地流失败', s)
|
||
this_.stop_play(reject, '获取本地流失败')
|
||
})
|
||
|
||
/**
|
||
*new：表示刚创建一个新的 WebRTC 对象。
|
||
connecting：表示正在建立连接。
|
||
connected：表示已经成功建立连接。
|
||
disconnected：表示连接已经中断。
|
||
failed：表示连接失败。
|
||
closed：表示连接已经关闭。
|
||
have-local-offer：表示本地已经创建了一个 offer。
|
||
have-remote-offer：表示远程端已经创建了一个 offer。
|
||
stable：表示连接已经稳定。
|
||
have-local-pranswer：表示本地已经创建了一个 pranswer。
|
||
have-remote-pranswer：表示远程端已经创建了一个 pranswer。
|
||
* */
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
||
console.log('当前状态==>', state)
|
||
if (state == 'connected') {
|
||
if (this_.push_url) {
|
||
resolve(this_.push_url)
|
||
} else if (this_.pull_url) {
|
||
resolve(this_.pull_url)
|
||
}
|
||
} else {
|
||
this_.triggerEvent(state)
|
||
}
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
|
||
console.log('rtc datachannel 打开 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
|
||
console.log('rtc datachannel 消息 :', event.data)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
|
||
console.log('rtc datachannel 错误 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
|
||
console.log('rtc datachannel 关闭 :', event)
|
||
})
|
||
})
|
||
} else {
|
||
this.player = new ZLMRTCClient.Endpoint({
|
||
element: this.element,
|
||
debug: this.debug,
|
||
zlmsdpUrl: this.zlmsdpUrl,
|
||
simulcast: this.simulcast,
|
||
useCamera: this.useCamera,
|
||
audioEnable: this.audioEnable,
|
||
videoEnable: this.videoEnable,
|
||
recvOnly: this.recvOnly,
|
||
resolution: this.resolution,
|
||
usedatachannel: this.usedatachannel,
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) { // ICE 协商出错
|
||
console.log('ICE 协商出错')
|
||
reject()
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) { //获取到了远端流，可以播放
|
||
console.log('播放成功', e.streams, e, this_.zlmsdpUrl)
|
||
this_.pull_url = e.streams[0]
|
||
// resolve(e.streams[0])
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) { // offer anwser 交换失败
|
||
console.log('offer anwser 交换失败', e)
|
||
this_.stop_play(reject, 'offer anwser 交换失败')
|
||
})
|
||
|
||
// WEBRTC_IS_H265
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_IS_H265, function (e) { // offer anwser 交换失败
|
||
console.log('H265视频格式', e)
|
||
this_.stop_play(reject, '右上角设置打开插件模式以支持H265')
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) { // 获取到了本地流
|
||
console.log('获取到了本地流')
|
||
this_.push_url = s
|
||
// resolve(s)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) { // 获取本地流失败
|
||
console.log('获取本地流失败', s)
|
||
this_.stop_play(reject, '获取本地流失败')
|
||
})
|
||
|
||
/**
|
||
*new：表示刚创建一个新的 WebRTC 对象。
|
||
connecting：表示正在建立连接。
|
||
connected：表示已经成功建立连接。
|
||
disconnected：表示连接已经中断。
|
||
failed：表示连接失败。
|
||
closed：表示连接已经关闭。
|
||
have-local-offer：表示本地已经创建了一个 offer。
|
||
have-remote-offer：表示远程端已经创建了一个 offer。
|
||
stable：表示连接已经稳定。
|
||
have-local-pranswer：表示本地已经创建了一个 pranswer。
|
||
have-remote-pranswer：表示远程端已经创建了一个 pranswer。
|
||
* */
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
||
console.log('当前状态==>', state)
|
||
if (state == 'connected') {
|
||
this_.player.pc.onjitterBuffer()
|
||
if (this_.push_url) {
|
||
resolve(this_.push_url)
|
||
} else if (this_.pull_url) {
|
||
resolve(this_.pull_url)
|
||
}
|
||
} else {
|
||
this_.triggerEvent(state)
|
||
}
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
|
||
console.log('rtc datachannel 打开 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
|
||
console.log('rtc datachannel 消息 :', event.data)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
|
||
console.log('rtc datachannel 错误 :', event)
|
||
})
|
||
|
||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
|
||
console.log('rtc datachannel 关闭 :', event)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 拉流失败的回调
|
||
stop_play(reject, msg) {
|
||
if (this.player) {
|
||
this.player.close()
|
||
this.player = null
|
||
}
|
||
reject && reject(msg)
|
||
}
|
||
|
||
// 关闭拉流
|
||
close_play(remote1) {
|
||
return new Promise((resolve, reject) => {
|
||
console.log('关闭拉流或者推流')
|
||
if (this.player) {
|
||
this.player.close()
|
||
this.player = null
|
||
if (remote1) {
|
||
remote1.srcObject = null
|
||
remote1.load()
|
||
}
|
||
}
|
||
resolve()
|
||
})
|
||
}
|
||
|
||
on(eventName, eventHandler) {
|
||
if (!this.eventHandlers[eventName]) {
|
||
this.eventHandlers[eventName] = []
|
||
}
|
||
this.eventHandlers[eventName].push(eventHandler)
|
||
}
|
||
|
||
triggerEvent(eventName) {
|
||
const handlers = this.eventHandlers[eventName]
|
||
console.log(handlers)
|
||
if (handlers) {
|
||
handlers.forEach((handler) => {
|
||
handler()
|
||
})
|
||
}
|
||
}
|
||
}
|