最近做web直播开播,遇到推流的问题,采用的方案为写原生web,外挂vue 方式,然后结合手机端开播。
期间遇到了一些问题,记录一下。
1、自适应H5移动设备,按照750宽度处理。
<script>
(function (doc, win) {
var docEl = doc.documentElement;
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 750 / 50) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(document,window));
</script>
2、直接引入腾讯直播SDK
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>
3、创建vue
const pushView = new Vue({
el: "#app",
data: {}
})
4、初始化推流SDK
initLivePush() {
return new Promise((resolve, reject) => {
try{
const livePusher = new TXLivePusher()
livePusher.setRenderView('live-video-player-anchor');
this.livePusher = livePusher
// 获取设备列表
// 打开摄像头
livePusher.startCamera().then( (res) => {
vant.Notify({ type: 'success', message: '打开摄像头成功' })
this.getDeviceList()
})
.catch(function (error) {
vant.Notify({ type: 'danger', message: '打开摄像头失败' })
});
// 打开麦克风
livePusher.startMicrophone()
.then(function (res) {
vant.Notify({ type: 'success', message: '打开麦克风成功' })
})
.catch(function (error) {
vant.Notify({ type: 'danger', message: '打开麦克风失败' })
})
resolve(1)
}catch(e){
reject(0)
}
}).catch((err) => {
reject(0)
})
},
以上就是大概流程,欢迎沟通。