Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

webrtc 发起方可以收到对方视频流,接收方收不到发起方的视频流

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>

<html lang="zh-CN">
<head>

<meta charset="UTF-8">
<title>GetUserMedia实例</title>
<script src="/lib/ligerui/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/socket.io/1.7.3/socket.io.js"></script>

</head>
<body>
<video autoplay="autoplay" id="myvideo"></video>
<video autoplay="autoplay" id="remotevideo"></video>
</body>

<script type="text/javascript">

var RTCPeerConnection = (window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var nativeRTCIceCandidate = (window.mozRTCIceCandidate || window.RTCIceCandidate);
var nativeRTCSessionDescription = (window.mozRTCSessionDescription || window.RTCSessionDescription);
//使用Google的stun服务器
var iceServer = {
    "iceServers": [{
        "urls": "stun:stun.voipstunt.com"
    }]
};
var pc = new RTCPeerConnection(iceServer);
/*var p = navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 }});

p.then(function(mediaStream) {
    var video = document.querySelector('#myvideo');
    video.src = window.URL.createObjectURL(mediaStream);
    pc.addStream(mediaStream);
    video.onloadedmetadata = function(e) {
        // Do something with the video here.
    };
});

p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.*/
navigator.getUserMedia( {audio: true, video:true}, successCallback, logError);
function successCallback(stream) {
    pc.addStream(stream);
    var video = document.querySelector('#myvideo');
    window.stream = stream; // 这就是上面提到的 mediaStream 实例
    if (window.URL) {
        video.src = window.URL.createObjectURL(stream); // 用来创建 video 可以播放的 src
    } else {
        video.src = stream;
    }
}

pc.onicecandidate = function (evt) {
    var name;
    if("${name}"=="called"){
        name="caller";
    }else{
        name="called";
    }
    if (evt.candidate) {
        $.ajax({
            type: 'POST',
            url: "/upload",
            data:{name:name,data:JSON.stringify({type:"candidate",data:evt.candidate})},
            success: function (data) {
            },
            error:function (data) {
                //alert(data);
            }
        })
    }
};

pc.onaddstream = function(event){
    console.log("datacoming");
    var remotevideo = document.querySelector('#remotevideo');
    window.stream = event.stream; // 这就是上面提到的 mediaStream 实例
    if (window.URL) {
        remotevideo.src = window.URL.createObjectURL(event.stream); // 用来创建 video 可以播放的 src
    } else {
        remotevideo.src = event.stream;
    }

    //remotevideo.src = URL.createObjectURL(event.stream);
};
//向PeerConnection中加入需要发送的流
var mediaConstraints = {
    mandatory: {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    },
    'offerToReceiveAudio': true,
    'offerToReceiveVideo': true
};
//pc.createOffer(function(offer) {
//pc.setLocalDescription(offer);
//alert(123);
//signalingChannel.send(offer.sdp);
//},logError);
if("${name}"=="caller"){
    if(navigator.userAgent.indexOf("Chrome") && window.chrome){
        pc.createOffer(function(offer) {
            console.log("offer");
            pc.setLocalDescription(offer);

            $.ajax({
                type: 'POST',
                url: "/upload",
                data:{name:"called",data:JSON.stringify({type:"offer",data:offer})},
                success: function (data) {

                    //context1.drawImage(document.getElementById("img"),0,0);
                },
                error:function (data) {
                    //alert(data);
                }
            })
        },logError,mediaConstraints);
    }else if(navigator.userAgent.indexOf("Firefox") != -1){
            pc.createOffer(function(offer) {
            console.log("offer");
            pc.setLocalDescription(offer);

            $.ajax({
                type: 'POST',
                url: "/upload",
                data:{name:"called",data:JSON.stringify({type:"offer",data:offer})},
                success: function (data) {

                    //context1.drawImage(document.getElementById("img"),0,0);
                },
                error:function (data) {
                    //alert(data);
                }
            })
        },logError,mediaConstraints);
    }
}
function logError(error) {
    console.log(error.name + ': ' + error.message);
}

var socket = io.connect('http://192.168.19.45:8099/?name=${name}');
socket.on('connect', function() {alert("连接成功")});
socket.on("video", function(data) {
    var json=JSON.parse(data);
    if(json.type=="offer"){
        console.log("receive offer");
        pc.setRemoteDescription(new RTCSessionDescription(json.data));
        pc.createAnswer(function(offer) {
            console.log("send answer");
            pc.setLocalDescription(offer);
            $.ajax({
                type: 'POST',
                url: "/upload",
                data:{name:"caller",data:JSON.stringify({type:"answer",data:offer})},
                success: function (data) {
                },
                error:function (data) {
                }
            })
        },logError,mediaConstraints);
    }else if(json.type=="answer"){
        console.log("receive answer");
        pc.setRemoteDescription(new RTCSessionDescription(json.data));
    }else if( json.type == "candidate" ){
        console.log("receive candidate");
        pc.addIceCandidate(new RTCIceCandidate(json.data));
    }

});

</script>

</html>

接收方的收到信息

clipboard.png
发起方收到的信息

clipboard.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

遇到同样问题,请问问题解决了吗?如何解决的?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...