Question

在我的Web应用程序中，我试图通过getUserMedia从一台设备发送视频并将其显示在另一台设备上，浏览器中没有错误，所以我不知道出了什么问题。

结合使用nodejs和express。

版本：

nodejs-v8.10.0，速成版-4.16.4，移动Firefox-63.0.2，台式机Chrome-69.0.3497.100

server.js：

const express = require('express')
const app = express()
const port = 3030

app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))
app.get('/callee', (req, res) => res.sendfile('callee.html'))
app.listen(port, () => console.log(`listening on port ${port}!`))

index.html

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>index</title>
        <base href="/">
        <link rel="stylesheet" type="text/css" href ="main.css" >
    </head>

    <body>
        <p id="demo"></p>
        <div class="booth">
            <video id= "video" width="675" height="1200" autoplay></video>
        </div>

        <!--<script src = "script.js"></script>-->
        <script>

            const connection = new RTCPeerConnection();
            (function(){
                var video = document.getElementById("video"),
                    Url = window.URL || window.webkitURL;

                navigator.getMedia =    navigator.getUserMedia ||
                                        navigator.webkitGetUserMedia ||
                                        navigator.mozGetUserMedia ||
                                        navigator.msGetUserMedia;

                navigator.getMedia({
                    video: {exact: "environment",
                            width: 1280,
                            height: 720 },

                    audio: false
                }, function(stream) {
                    document.getElementById("demo").innerHTML = "Stream is live";
                    try {
                        video.srcObject = stream;
                        var capturedStream = video.captureStream();
                        connection.addStream(capturedStream);
                        connection.createOffer(gotSDP);

                        function gotSDP(description) {
                            connection.setLocalDescription(description);
                            invite(description);
                        };
                    } catch (error) {
                        video.src = Url.createObjectURL(stream);
                    }

                    video.play();
                }, function(err){
                    document.getElementById("demo").innerHTML = err.message;
                });
            })();



        </script>
    </body>
</html>

callee.html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Callee</title>
        <base href="/">
        <link rel="stylesheet" type="text/css" href ="main.css" >
    </head>

    <body>
        <p id="demo"></p>
        <div class="booth">
            <video id= "video" width="675" height="1200" autoplay></video>
        </div>

        <!--<script src = "script.js"></script>-->
        <script>
            var video = document.getElementById("video");
            var connection;

            // This function would be called when receiving a remote connection
            function processRemoteDescription(description) {
              // Callee creates PeerConnection
              connection = new RTCPeerConnection();
              connection.setRemoteDescription(description);
              connection.createAnswer(function (localDescription) {
                connection.setLocalDescription(localDescription);

                /* We need to send our own SDP back to the caller.
                This method is left up to the application to create.  Here,
                we name the function ‘okay’ */
                okay(localDescription);
              });

              connection.onaddstream = function (remoteStream) {
                try {
                        video.srcObject = remoteStream;
                        var capturedStream = video.captureStream();
                    } catch (error) {
                        video.src = Url.createObjectURL(remoteStream);
                    }
              };
            }

            function onOkay(description) {
                  connection.setRemoteDescription(description);
            };



        </script>
    </body>
</html>

有人知道如何解决问题吗？如果不清楚，请提出问题。

通过RTCPeerConnection将视频流发送到同一网络中的另一台设备

0 个答案: