import { number } from "echarts" /** * srs webrtc palyer * auth Caner */ class WebRtcPlayer { private Peer: any private TIMER: any constructor(option = { HOST: '', TOKEN: '', UUID: '', PROFILE: number, PORT: number, DOM: HTMLElement }) { this.initWebRtc(option.HOST, option.PORT, option.TOKEN, option.UUID, option.PROFILE, option.DOM).then(res => { this.Peer = res }).catch(() => { this.Peer = null }) } /** * 初始化webrtc * @param HOST 媒体服务器地址 * @param TOKEN 用户token * @param UUID 摄像头uuid * @param PROFILE 码流 * @param DOM video节点 * @returns */ private async initWebRtc(HOST: string, PORT: number, TOKEN: string, UUID: string, PROFILE: number, DOM: HTMLElement | any | null) { try { const Peer = new RTCPeerConnection() as any Peer.addTransceiver('video', { direction: 'recvonly' }) const offer = await Peer.createOffer() await Peer.setLocalDescription(offer) // 监听视频=播放 Peer.ontrack = (event: Event | any) => { if (DOM) { const { streams } = event DOM.srcObject = streams[0] console.log('track', event) } } Peer.oniceconnectionstatechange = () => { const state = Peer.iceConnectionState console.log('ICE状态', state) } Peer.onicegatheringstatechange = () => { console.log('GatheringState: ', Peer.iceGatheringState) } Peer.onconnectionstatechange = () => { const state = Peer.connectionState console.log('连接状态', state) } // SDP SRS params const params = { api: `http://${HOST}:${PORT}/rtc/v1/play/?token=${TOKEN}&uuid=${UUID}&stream=${UUID + PROFILE}&profile=${PROFILE}`, clientip: null, sdp: offer.sdp, streamurl: `webrtc://${HOST}/live/${UUID + PROFILE}?token=${TOKEN}&uuid=${UUID}&stream=${UUID + PROFILE}&profile=${PROFILE}`, tid: Number(Math.floor(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7) } console.log('params', params) // 发送offer const res = await window.fetch(params.api, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }) // 接收 answer const { sdp } = await res.json() if (sdp) await Peer.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp })) return Peer } catch (error) { console.warn('webRtcInit:', error); return null } } /** * 云台控制 * @param URL * @param UUID * @param TOKEN * @param command 指令:数字键盘1-9去掉5,10:焦距放大,11:焦距缩小 12:亮度,13:色彩饱和度,14:对比度,15:清晰度 * @param number [云台速度|焦距参数|色彩饱和度]等值 亮度值 0-100 * @returns */ public contrl(URL: string, UUID: string, TOKEN: string, command: number, number: number) { if (!UUID) return if (this.TIMER !== null) clearTimeout(this.TIMER) this.TIMER = setTimeout(() => { window.fetch(URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: 'cloudcontrol.control', token: TOKEN, body: { uuid: UUID, command, number } }) }) }, 500); } /** * 关闭webrtc */ public async close() { if (this.Peer) this.Peer.close() if (this.TIMER) clearTimeout(this.TIMER) } } export default WebRtcPlayer