Fatal编程技术网
  • javascript/
  • Javascript 无法在客户端上抛出音频文件（Node.js+；heroku）

Javascript 无法在客户端上抛出音频文件（Node.js+；heroku）

javascript html node.js heroku socket.io

Javascript 无法在客户端上抛出音频文件（Node.js+；heroku）,javascript,html,node.js,heroku,socket.io,Javascript,Html,Node.js,Heroku,Socket.io,我在我的web应用程序上有一个小问题 server.js var express = require("express"); var app = express(); var http = require("http").Server(app); var io = require("socket.io")(http); var Log = require('log'), log = new Log('debug'); // set port var port = process.env.P

我在我的web应用程序上有一个小问题

server.js

var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);

var Log = require('log'),
log = new Log('debug');

// set  port
var port = process.env.PORT || 3000

//allow all the static files
app.use(express.static(__dirname + "/public"));

//routes
app.get("/", function(req,res){
res.render("index.html");
//res.sendHeader(200,{"Content-type": "video/mp4"});
})

io.on('connection',function(socket){
//this is how to deliver the data
socket.on('stream',function(image){
    socket.broadcast.emit('stream',image);
})
})

http.listen(port, function(){
console.log("App is runnin")
})

Teacherlive.html

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Teacher Live</title>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js">    
</script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>

<video src="" id="video" style="width:680px;height:320px;" autoplay="true">
</video>

<canvas style = "display:none;" id="preview"></canvas>
<div id="logger"></div>

<script type="text/javascript">
    var canvas = document.getElementById("preview");
    var context = canvas.getContext("2d");

    canvas.width = 800;
    canvas.height = 600;

    context.width = canvas.width;
    context.height = canvas.height;

    var video = document.getElementById("video");

    var socket = io();

    function logger(msg){
        $("#logger").text(msg);
    }

    function loadCam(stream){
        video.src = window.URL.createObjectURL(stream);
        logger("Camera successfully loads");
    }

    function loadFail(){
        logger("Camera can't be loaded");
    }

    function viewVideo(video,context){
        context.drawImage(video,0,0,context.width,context.height);
        socket.emit('stream',canvas.toDataURL('image/webp'));
    }

    $(function(){
    navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){
            navigator.getUserMedia(
                {
                    video : true,
                    audio : true
                },
                loadCam,loadFail);
        }

        setInterval(function(){
            viewVideo(video,context);
        },70);

    });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Student Feed</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js">
</script>
<!--<script src="/socket.io/socket.io.js"></script>-->
</head>
<body>

<img id="play">
<div id = "logger"></div>

<script>
    var socket = io();


    socket.on('stream',function(image){
        var img = document.getElementById("play");
        img.src = image;
        var log =  document.getElementById("logger");
        log.text(image);
    });


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


教师生活
var canvas=document.getElementById（“预览”）；
var context=canvas.getContext（“2d”）；
画布宽度=800；
帆布高度=600；
context.width=canvas.width；
context.height=canvas.height；
var video=document.getElementById（“视频”）；
var socket=io（）；
函数记录器（msg）{
$（“#记录器”）.text（msg）；
}
函数loadCam（流）{
video.src=window.URL.createObjectURL（流）；
记录器（“摄像机成功加载”）；
}
函数loadFail（）{
记录器（“摄像机无法加载”）；
}
功能viewVideo（视频、上下文）{
drawImage（视频，0,0，context.width，context.height）；
emit（'stream'，canvas.toDataURL（'image/webp'））；
}
$（函数（）{
navigator.getUserMedia=（navigator.getUserMedia | | navigator.webkitGetUserMedia | | | navigator.mozGetUserMedia | | navigator.msgGetUserMedia）；
if（navigator.getUserMedia）{
navigator.getUserMedia(
{
视频：没错，
音频：正确
},
loadCam，loadFail）；
}
setInterval（函数（）{
viewVideo（视频、上下文）；
},70);
});

Studentfeed.html

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Teacher Live</title>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js">    
</script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>

<video src="" id="video" style="width:680px;height:320px;" autoplay="true">
</video>

<canvas style = "display:none;" id="preview"></canvas>
<div id="logger"></div>

<script type="text/javascript">
    var canvas = document.getElementById("preview");
    var context = canvas.getContext("2d");

    canvas.width = 800;
    canvas.height = 600;

    context.width = canvas.width;
    context.height = canvas.height;

    var video = document.getElementById("video");

    var socket = io();

    function logger(msg){
        $("#logger").text(msg);
    }

    function loadCam(stream){
        video.src = window.URL.createObjectURL(stream);
        logger("Camera successfully loads");
    }

    function loadFail(){
        logger("Camera can't be loaded");
    }

    function viewVideo(video,context){
        context.drawImage(video,0,0,context.width,context.height);
        socket.emit('stream',canvas.toDataURL('image/webp'));
    }

    $(function(){
    navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){
            navigator.getUserMedia(
                {
                    video : true,
                    audio : true
                },
                loadCam,loadFail);
        }

        setInterval(function(){
            viewVideo(video,context);
        },70);

    });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Student Feed</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js">
</script>
<!--<script src="/socket.io/socket.io.js"></script>-->
</head>
<body>

<img id="play">
<div id = "logger"></div>

<script>
    var socket = io();


    socket.on('stream',function(image){
        var img = document.getElementById("play");
        img.src = image;
        var log =  document.getElementById("logger");
        log.text(image);
    });


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


学生饲料

这是Teacherlive.html。当我打开它时，里面有视频和音频，但问题是。
问题出现在studentfeed.html中，因为teacherlive的音频无法将其发送到studentfeed.html

如果没有一行代码，请不要期待任何有用的答案：pI将编辑我的答案，对不起，你是说你的问题：p@JaromandaX对不起，我整整两天没睡觉。哈哈