webrtc学习笔记初步实现直播功能&推荐视频

基本WebRTC应用实现直播
主要流程:
1.测试浏览器是否支持
2.创建对等连接对象
3.添加ICE处理器
4.开始Offer和返回,寻找ICE候选路径
5.建立连接

后端使用easyswoole推送视频数据。

创建RTCPeerConnection对象时,可以指定自定义ICE服务器,也可以使用浏览器默认提供的ICE服务器

webrtc中拥有有两个全局线程,使用webrtc时可以提供这两个线程,也可以使用内部创建好的线程:

signaling_thread–>信令线程。要求此线程内的方法都必须快速返回
worker_thread–>工作者线程。此线程内的方法可能会处理很长时间

//处理到来的信令
socket.onmessage = function(event){
var json = JSON.parse(event.data);
//如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述
if( json.event === “_ice_candidate” ){
peerConnection.addIceCandidate(new RTCIceCandidate(json.data.candidate));
} else {
peerConnection.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
// 如果是一个offer,那么需要回复一个answer
if(json.event === “_offer”) {
peerConnection.createAnswer(sendAnswerFn, function (error) {
console.log(‘Failure callback: ‘ + error);
});
}
}

//demo示例

console.log(“开始”);
// 仅仅用于控制哪一端的浏览器发起offer,#号后面有值的一方发起
// #号后面加true的为发起者
var isCaller = window.location.href.split(‘#’)[1];

// 与信令服务器的WebSocket连接
var socket = new WebSocket(“ws://127.0.0.1:9501”);

// stun和turn服务器,打洞服务器设置
var iceServer = {
“iceServers”: [{
“url”: “stun:stun.l.google.com:19302”
}, {
“url”: “turn:numb.viagenie.ca”,
“username”: “webrtc@live.com”,
“credential”: “muazkh”
}]
};

// 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域网下通讯)
window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var peerConnection = new RTCPeerConnection()

// 发送offer的函数
var sendOfferFn = function (desc) {
// 设置本地Offer
peerConnection.setLocalDescription(desc);
// 发送offer
console.log(“fasong offer”)
console.log(desc)
socket.send(JSON.stringify({
“event”: “_offer”,
“data”: {
“sdp”: desc
}
}));
};
// 发送answer的函数,发送本地session描述
var sendAnswerFn = function(desc){ // 发送answer
peerConnection.setLocalDescription(desc); // 设置本地Offer
socket.send(JSON.stringify({ // 发送answer
“event”: “_answer”,
“data”: {
“sdp”: desc
}
}));
};

// 获取本地音频数据
navigator.getMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia
navigator.getMedia({
audio: true, // 是否开启麦克风
video: true // 是否开启摄像头,这里还可以进行更多的配置
}, function(stream){
// 获取到视频流stream
// 绑定本地媒体流到video标签用于输出
document.getElementById(‘localVideo’).srcObject=stream;
//document.getElementById(‘localVideo’).src = URL.createObjectURL(stream);
// 向PeerConnection中加入需要发送的流
peerConnection.addStream(stream);
// 如果是发起方则发送一个offer信令
if(isCaller){
console.log(“faqi”)
peerConnection.createOffer(sendOfferFn, function (error) {
console.log(‘Failure callback: ‘ + error);
});
}
}, function(error){
// 获取本地视频流失败
console.log(“获取本地视频流失败”);
})

// 发送ICE候选到其他客户端
peerConnection.onicecandidate = function(event){
if (event.candidate !== null) {
socket.send(JSON.stringify({
“event”: “_ice_candidate”,
“data”: {
“candidate”: event.candidate
}
}));
}
};

// 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出
peerConnection.onaddstream = function(event){
document.getElementById(‘remoteVideo’).srcObject = event.stream;
};

//处理到来的信令
socket.onmessage = function(event){
console.log(event)
console.log(“====”)
var json = JSON.parse(event.data);
//如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述
if( json.event === “_ice_candidate” ){
peerConnection.addIceCandidate(new RTCIceCandidate(json.data.candidate));
} else {
peerConnection.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
// 如果是一个offer,那么需要回复一个answer
if(json.event === “_offer”) {
peerConnection.createAnswer(sendAnswerFn, function (error) {
console.log(‘Failure callback: ‘ + error);
});
}
}
};

 

简书文章和例子:https://www.jianshu.com/p/57fd3b5d2f80
推荐按照这个视频学习:https://www.bilibili.com/video/av77467480?p=21

This entry was posted in 编程 by .

发表评论

电子邮件地址不会被公开。 必填项已用*标注