我正在使用他们的 javascript API 设置 Twilio 视频。我的问题是，当我将参与者视频流附加到 div 时，Twilio 将正确的视频标签添加到 DOM，但是我无法看到参与者的视频。这是我为隔离问题而模拟的脚本:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>
</head>
<body>
<div id="local"><video height=300 width=300></video></div>
<div id="remote"></div>
<script>
var Video = Twilio.Video;
var localMedia = new Video.LocalMedia();
var user_uuid = scramble();
var localVideo = document.querySelector("#local video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia || navigator.mediaDevices.getUserMedia;
navigator.getUserMedia({video: true, audio: true}, function(stream){
localVideo.src = window.URL.createObjectURL(stream);
localMedia.addStream(stream);
$.get("/api/match",
{
user_uuid: user_uuid
}
).done(function(body){
if(body.status_url){
getParticipants(body.status_url, Video, localMedia, function(room){
room.participants.forEach(function(participant){
participant.media.attach("#remote");
});
room.once('participantConnected', function(participant){
participant.media.attach("#remote");
});
});
}
});
}, function(e){console.log(e)});
function scramble(){
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function getParticipants(status_url, Video, localMedia, cb){
$.get(status_url).then(function(res){
if (res.room && res.token){
var room = res.room;
var token = res.token;
var client = new Video.Client(token);
client.connect({
to: room,
localMedia: localMedia
}).then(function(room){
cb(room);
}, function(error) {
console.error('Failed to connect to the Room', error);
});
} else {
setTimeout(function(){
getParticipants(status_url, Video, localMedia, cb);
}, 3000);
}
});
}
</script>
</body>
</html>
对于上下文，我正在对服务器执行 ping 操作，直到我匹配到另一个人加入视频 session 。一旦他们加入，Twilio 就会正确地向 DOM 添加一个新的视频标签以及一个 src BLOB。问题是虽然添加了标签，但屏幕上看不到视频。
有人见过这样的东西吗？哪里<video>标签在 DOM 中可见，但您在屏幕上看不到任何视频？
最佳答案
您必须为本地用户使用 LocalParticipant 类
var localMediaContainer = document.getElementById('local-video');
var videoElement;
const localParticipant = room.localParticipant;
room.localParticipant.tracks.forEach(track => {
videoElement = track.attach();
localMediaContainer.appendChild(videoElement);
});
console.log('Connected to the Room as LocalParticipant: ', localParticipant.identity);
关于javascript - 不显示 src 的视频 RTC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40606725/