iLi*_*LiA 1 html javascript webrtc
我正在创建一对一的webrtc视频聊天室，此代码不起作用，我想知道为什么
function hasUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia;
}
function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection ||
window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
return !!window.RTCPeerConnection;
}
function startPeerConnection(stream) {
var configuration = {
"iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
};
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration);
yourConnection.addStream(stream);
theirConnection.onaddstream = function (e) {
theirVideo.src = window.URL.createObjectURL(e.stream);
};
yourConnection.onicecandidate = function (event) {
if (event.candidate){
theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
}
};
theirConnection.onicecandidate = function (event) {
if (event.candidate) {
yourConnection.addIceCandidate(new
RTCIceCandidate(event.candidate));
}
};
yourConnection.createOffer(function (offer) {
yourConnection.setLocalDescription(offer);
theirConnection.setRemoteDescription(offer);
theirConnection.createAnswer(function (offer) {
theirConnection.setLocalDescription(offer);
yourConnection.setRemoteDescription(offer);
});
});
}
var yourVideo = document.querySelector("#face_cam_vid"),
theirVideo = document.querySelector("#thevid"),
yourConnection, theirConnection;
if (hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: true }, function(stream)
{
yourVideo.src = window.URL.createObjectURL(stream);
if (hasRTCPeerConnection()) {
startPeerConnection(stream);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
}, function (error) {
console.log(error);
}
);
} else {
alert("Sorry, your browser does not support WebRTC.");
}
这段代码给了我类似错误的错误，并且当您看到视频未显示时，我试图创建div（其中有视频标签），但无论如何都无法正常工作
如果您能帮助我，我会很高兴这里是我的html
<!DOCTYPE html>
<html>
<head>
<title>
Video Call
</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/videof.js"></script>
<script>var width = Math.max(window.screen.width, window.innerWidth);
if(width <= 414){
var faceCam = document.getElementById("face_cam");
faceCam.style.width = "15%";
}
function smaller(){
if(width <= 414){
var size = document.getElementById("face_cam").style.width;
if(size == "15%"){
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
}
else if(size == "3%"){
faceCam.style.width = "15%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px"
}
}
else{
var size = document.getElementById("face_cam").style.width;
if(size == "30%"){
faceCam.style.width = "3%";
faceCam.style.height = "3%";
faceCam.style.borderRadius = "0px"
}
else if(size == "3%"){
faceCam.style.width = "30%";
faceCam.style.height = "30%";
faceCam.style.borderRadius = "10px";
}
}
}
var width = Math.max(window.screen.width, window.innerWidth);
function smaller(){
var size = document.getElementById("face_cam").style.height;
if (size == "30%"){
var frame = document.getElementById("face_cam");
frame.style.height = "3%";
frame.style.width = "4%";
frame.borderRadius = "0px";
}
else{
var frame = document.getElementById("face_cam");
frame.style.height = "30%";
frame.style.width = "30%";
}
}
function BACKT(){
window.location.href = "http://localhost:8000/"
}
</script>
</head>
<body>
<div class="test_vc_field">
<video id="thevid" autoplay></video>
<div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
<video id="face_cam_vid" autoplay></video>
</div>
</div>
<div class="nav">
<button class="next">???????</button>
<img src="next.png" class="next_icon">
<button class="off" id="off">???????</button>
<img src="shutdown.png" class="shd_icon">
<button class="goto_main" id="WTfu" onclick="BACKT();">???????
??????</button>
<img src="home.png" class="home_icon" onclick="main()">
</div>
</body>
</html>
#thevid id vid第二个用户显示face_cam_vid的视频是我显示的视频
jib*_*jib 10
这是过时的代码。它包含6个跟踪WebRTC API演变的问题。
TL; DR：它不起作用，因为您没有检查错误，并且只测试了一种浏览器。
yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong
webkit名称在Firefox或Edge中不起作用。这些年来已经不需要了。如果您切换到navigator.mediaDevices.getUserMedia，则可以完全跳过10行前缀更改前导码。
url（使用urls）尽管我怀疑大多数浏览器都允许这样做，但这在技术上是错误的：
iceServers: [{url: "stun:stun.1.google.com:19302"}] // <-- wrong
而是使用：
iceServers: [{urls: "stun:stun.1.google.com:19302"}]
...因为从技术上说，可以通过多个网址访问ICE服务器。
这是错误的：
navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });
...因为第三个失败回调参数是必需的。边说TypeError: Argument not optional。
Chrome和Safari中的旧版错误允许这样做，但在Firefox或Edge中将无法使用。忽略错误会使您无法了解为什么事情不起作用。如果用户拒绝摄像头访问，您想知道。
所有现代浏览器都支持承诺 的API的版本上mediaDevices。改用它：
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(stream => { /* use stream here */ })
.catch(error => console.log(error));
我之前已经回答了这个问题，但总之，这与上面的＃2类似，但有所不同。这是错误的：
yourConnection.createOffer(function(offer) { /* ... */ });
您认为您正在调用旧的回调API，但事实并非如此。这些需要两个参数：
yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);
相反，实际上是在调用同名的现代Promise API，因为函数是JS中的对象：
const promise = yourConnection.createOffer(optionsObject);
这是您的代码停止工作的地方。永远不会调用您的回调函数，而是将其解释为空的选项对象。您忽略返回的承诺。请改用Promise API。
它已在Firefox和Chrome 71中删除（收到的警告）。这是错误的：
theirVideo.src = URL.createObjectURL(stream);
而是使用此：
theirVideo.srcObject = stream;
addStream()＆onaddstream不再在规范中，仅适用于某些浏览器：
yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;
相反，对等连接现在完全基于轨道。使用此代替：
for (const track of stream.getTracks()) {
yourConnection.addTrack(track, stream);
}
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];
有关这些差异的更多信息，请参见我的博客。
以下内容适用于所有浏览器：
const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");
(async () => {
if (!("mediaDevices" in navigator) || !("RTCPeerConnection" in window)) {
alert("Sorry, your browser does not support WebRTC.");
return;
}
const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
yourVideo.srcObject = stream;
const configuration = {
iceServers: [{urls: "stun:stun.1.google.com:19302"}]
};
const yours = new RTCPeerConnection(configuration);
const theirs = new RTCPeerConnection(configuration);
for (const track of stream.getTracks()) {
yours.addTrack(track, stream);
}
theirs.ontrack = e => theirVideo.srcObject = e.streams[0];
yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);
const offer = await yours.createOffer();
await yours.setLocalDescription(offer);
await theirs.setRemoteDescription(offer);
const answer = await theirs.createAnswer();
await theirs.setLocalDescription(answer);
await yours.setRemoteDescription(answer);
})();