永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放
1、H5播放webrtc，现在各大浏览器已经逐渐加大对WebRTC技术的支持，成都视开信息科技视频团队开发webrtc视频播放方案，我们已经实现了webrtc的视频推流，播放webrtc流。
this.pc = new RTCPeerConnection(null);
this.pc.ontrack = (event) => {this._mediaElement['srcObject'] = event.streams[0];
};
this.pc.addTransceiver('audio', {direction: 'recvonly'});
this.pc.addTransceiver('video', {direction: 'recvonly'});this.sendChannel = this.pc.createDataChannel('keepalive');
this.sendChannel.onclose = this.onChannelClose.bind(this);
this.sendChannel.onopen = this.onChannelOpen.bind(this);
this.sendChannel.onmessage = this.onChannelMessage.bind(this);this.pc.createOffer({offerToReceiveVideo: !0,offerToReceiveAudio: !0
}).then((offer) => {return this.pc.setLocalDescription(offer).then(() => {return offer;});
}).then((offer) => {return new Promise((resolve, reject) => {this.HttpPost(url, window.btoa(offer.sdp)).then((res) => {resolve(res);}, function (rej) {reject(rej);});});
}).then((answerSdp) => {return this.pc.setRemoteDescription(new RTCSessionDescription({type: 'answer',sdp: window.atob(answerSdp)}));
}).then(() => {this._isLoad = true;
}).catch((reason) => {throw reason;
});
2、拉流端
（1）、ontrack回调中将媒体播放地址，绑定到video上。
（2）、createOffer方法,这个方法返回本地会话描述。
（3）、setLocalDescription方法。
（4）、需要先与推流段建立一个连接。HttpPost()，发送：offer.sdp 到推流端，推流端服务器收到offer.sdp，再返回回来。
HttpPost(url, data) {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest();xhr.onreadystatechange = () => {if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {var respone = xhr.responseText;xhr.onreadystatechange = new Function;xhr = null;resolve(respone);}};xhr.open('POST', url.replace('webrtc', 'http'), true);xhr.send(data);});
}
（5）、收到应答返回的offer.sdp， 设置为你的远端连接。
this.pc.setRemoteDescription(new RTCSessionDescription({type: 'answer',sdp: window.atob(answerSdp)
}));
（6）、监听 sendChannel.onopen 连接是否建立成功。
（7）、拉流的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
（8）、服务器推流，前端开始播放。
的过程中需要徐亚与服务器保持连接，可以 sendChannel.send(msg)来保持持续拉流 。
（8）、服务器推流，前端开始播放。
永久免费H5直播点播播放器SkeyeWebPlayer.js实现webrtc流播放相关推荐
- LiveQing直播点播流媒体如何关闭指定类型的流播放HTTP-FLV直播流|WS-FLV直播流|HLS(m3u8)直播流|RTMP直播流
流媒体服务可以分发输出,HTTP-FLV直播流.WS-FLV直播流.HLS(m3u8)直播流.RTMP直播流,在某些场景下,我们不希望用户播放指定类型的流,那么如何做呢? RTMP直播点播流媒体服务 ...
- html仿微信语音播放器,原生js仿微信音频播放器
今天看个类似微信音频播放器的效果: 简单使用 使用比较简单,直接配置如下: var wx_audio = new WxAudio({ ele: ".wx-audio", title ...
- html微信播放器,原生js 编写的微信播放器插件（仿微信公众号播放器组件）
Document content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initia ...
- 免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
- 免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
- LivePlayer H5直播/点播播放器安装与使用
LivePlayer H5播放器 简介 H5直播/点播播放器,使用简单,功能强大, 免费使用 支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截 ...
- 2020-12-14超强 H5直播/点播播放器LivePlayer
超强 H5直播/点播播放器LivePlayer 超强 H5直播/点播播放器LivePlayer 之前有给大家分享2个超棒的视频播放器.今天继续分享一款高质量的H5视频播放器插件LivePlayer. ...
- 网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
- 免费网页直播|点播播放器-自动重连解决网络|操作造成断流的播放问题
LivePlayer网页直播|点播免费播放器下载: 支持m3u8播放;支持HTTP-FLV播放;支持RTMP播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自带 ...
最新文章
- 笔记 | 吴恩达Coursera Deep Learning学习笔记
- php实现tcp连接esp8266,ESP8266之TCP透传
- 《转》java URL重写
- 数据挖掘十大经典算法之——C4.5 算法
- 工资表 车辆工程 冯大昕
- 搭载第四代自研神龙架构 阿里云发布RDMA增强型实例等多款新品
- java实例摘要（三）
- js中的相等与不等运算
- WPF DataGridComboBoxColumn使用（绝对良心版）
- (转)数字货币平台的交易风险
- 变分法，欧拉-拉格朗日方程推导
- 一个bug看一天，写代码像cxk
- python 绘制一维散点图
- MarkDown在VSCode环境下使用
- html5拨打电话自动录音,html5实现手机触摸出现录音以及离开停止录音并上传的功能（代码）...
- 那时候写计算机毕业论文，必用神器！
- 幼儿园计算机教案 认识画图,信息技术教案《认识画图》
- 【904. 水果成篮】
- 中国制造2025与机器人——苏大机电学院院长谈机器人发展趋势
- 写在2015农历年的最后以及2016农历年的开始