百度智能视联云摄像头画面web端webrtc低延迟播放
后来提了工单,拿到了一个demo,实测可用,如下。调用的信令服务器选择 RTCHttpUrl_2。输入webrtc播流链接,点击开始播放即可播放。发现官网没有贴出低延时直播的web端播放方式。最近在用海康摄像头测试视联云服务。只提供了 webrtc 的链接。
·
最近在用海康摄像头测试视联云服务
发现官网没有贴出低延时直播的web端播放方式
只提供了 webrtc 的链接
获取GB28181设备通道播流链接
后来提了工单,拿到了一个demo,实测可用,如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
height: 700px;
}
.action {
height: 40px;
margin: 16px 0;
display: flex;
}
.action #input {
height: 38px;
width: 60%;
border-radius: 4px;
border: 1px #333 solid;
}
.action #button {
width: 100px;
height: 40px;
margin-left: 16px;
cursor: pointer;
}
video {
height: 600px;
width: 60%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="action">
<input id="input" type="text">
<button id="button">开始播放</button>
</div>
<video
id="rtc-player"
controls="controls"
autoplay="autoplay"
></video>
</div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>
index.js
const player = document.getElementById('rtc-player');
const button = document.getElementById('button');
const input = document.getElementById('input');
// rtc信令服务器
const RTCHttpUrl_1 = 'https://rtc-ss-gz02.acgrtc.com:8989/brtc/v3/pullstream';
const RTCHttpUrl_2 = 'https://rtc2.exp.bcelive.com/brtc/v3/pullstream';
// 随机数
function randomString(length = 32) {
const chars = 'abcdefghijklmnopqrstuvwxyz';
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
};
async function createRtc() {
// 创建新的rtc链接器
const pc = new RTCPeerConnection();
// 有数据流返回时处理
pc.onaddstream = function(event) {
player.srcObject = event.stream;
};
// 创建了一个新的RTCRtpTransceiver,并将其添加到与RTCPeerConnection相关的收发器集中。每个收发器都表示一个双向流
pc.addTransceiver('audio', {direction: 'recvonly'});
pc.addTransceiver('video', {direction: 'recvonly'});
// 启动创建一个SDP offer,启动一个新的WebRTC,去连接远程端点
let offer = await pc.createOffer();
// 改变与该连接关联的本地描述
await pc.setLocalDescription(offer);
// 获取远端sdp
const transaction = randomString(8); // 随机串
const url = input.value;
const data = {
sdktag: 'BRTC.HTTP.PULL.SDK',
streamurl: url,
transaction,
sdp: offer.sdp
};
let session = null;
try {
// 发送请求 交换sdp信息
session = await fetch(RTCHttpUrl_2, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
mode: 'cors'
})
.then(response => response.json());
} catch (error) {
console.info('Signaling server request error!');
}
await pc.setRemoteDescription(
new RTCSessionDescription({type: 'answer', sdp: session.sdp})
);
}
button.addEventListener('click', () => {
console.log('click');
createRtc();
});
调用的信令服务器选择 RTCHttpUrl_2
输入webrtc播流链接,点击开始播放即可播放在这里插入代码片
更多推荐
已为社区贡献1条内容
所有评论(0)