腾讯web(H5)推流解决方案_h5 推流

最近做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)
							  })
						},

以上就是大概流程，欢迎沟通。