支持webrtc的摄像头

目前google chrome 已经原生支持webrtc了,做低延迟播放的小伙伴们有福了。目前已经有淘宝在售支持webrtc的摄像头。超低延迟播放视频不再是难事了。

网页访问代码

function initRtcPeerConnection(streamPath) {
			rtcLoading = true;
			var rtcPeerConnection = new RTCPeerConnection({
				iceServers: [
					{
						urls: 'stun:stun.cloud.xstrive.com:3478'
					},
				]
			});
			rtcPeerConnection.addTransceiver('video', {
				direction: "recvonly"
			});
			rtcPeerConnection.addTransceiver('audio',{
				direction:'recvonly'
			});
			rtcPeerConnection.onsignalingstatechange = e => {
				// console.log('onsignalingstatechange', e);
			};
			rtcPeerConnection.oniceconnectionstatechange = e => {
				console.log('oniceconnectionstatechange', rtcPeerConnection.iceConnectionState);
			};
			var iceGatheringState = false
			rtcPeerConnection.onicecandidate = event => {
				if (rtcPeerConnection.iceGatheringState === "complete") {
					iceGatheringState = true
					// console.log("onicecandidate iceGatheringState:  ", rtcPeerConnection.iceGatheringState)
				}
			};
			rtcPeerConnection.ontrack = event => {
				// console.log('ontrack', event);
				document.getElementById('player').srcObject = event.streams[0];
			};
			rtcPeerConnection.createOffer().then((ret)=> {
				rtcPeerConnection.setLocalDescription(ret).finally(()=> {
					var i1 = 0
					var inter = setInterval(()=> {
						i1 += 1;
						if (iceGatheringState || i1 > 200) {
							clearInterval(inter)
							reqFetch(rtcPeerConnection, streamPath)
						}
					}, 20)
				})
			});
			rtcPeerConn = rtcPeerConnection
		}
		function reqFetch(rtcPeerConnection, streamPath) {
			var data = {
				sdp: rtcPeerConnection.localDescription.sdp,
				type: rtcPeerConnection.localDescription.type,
			}
			$.ajax({
				type:"POST",
				url:"/api/webrtc/play?streamPath=" + streamPath,
				data: JSON.stringify(data),
				contentType: "text/plain",
				success: function(data){
					rtcLoading = false
					var result = data;
					if (result.code) {
						rtcPeerConnection.close();
						alert(result.msg)
						return;
					}
					rtcPeerConnection.setRemoteDescription(new RTCSessionDescription({ sdp: result.sdp, type: 'answer' })).catch((ret)=> {
						console.log("setRemoteDescription catch:", ret)
						alert("播放失败,请稍后尝试")
					});
				},
				error: function () {
					rtcLoading = false
					rtcPeerConnection.close();
				}
			})
		}

		function showPlay() {
			// 显示遮罩
			$('.mask').css('display','block');
			initRtcPeerConnection("hlsram/live0")
		}

		function closePlayer() {
			// 暂时视频
			if(rtcPeerConn){
				rtcPeerConn.close();
				rtcPeerConn = null;
			}
			var py = document.getElementById('player');
			if (py) {
				py.srcObject = null
			}

			// 关闭遮罩
			$('.mask').css('display','none');
		}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值