Camera view have no sound. #2

Tea-NT · 2024-04-07T09:07:35Z

感谢大佬的例子，这边跑通了，但是有一个问题是，播放摄像头画面只有画面，没有声音。
播放页面显示的的声音按钮是灰色的，无法点开，这个是什么原因哇？

测试环境是，Unity 2020.3.13f1c1
浏览器是Microsoft Edge

对了，这个项目基于Unity2018, index.html的模板跟Unity2020的不一样了。这边也修改了一下，应该后面的版本都适用。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    <style>
	/*--------- For RTSP Player ↓-----------*/
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0;
            display: none;
            z-index: 99;
        }

        .closebutton {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0;
            display: none;
            z-index: 100;
        }

        .panel {
            position: absolute;
            display: none;
            text-align: center;
            z-index: 101;
        }
        /*--------- For RTSP Player ↑-----------*/

    </style>
  </head>
  <body style="text-align: center">
    <canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: {{{ WIDTH }}}px; height: {{{ HEIGHT }}}px; background: {{{ BACKGROUND_FILENAME ? 'url(\'Build/' + BACKGROUND_FILENAME.replace(/'/g, '%27') + '\') center / cover' : BACKGROUND_COLOR }}}"></canvas>
    <div class="mask" id="mask"></div>
    <button onclick="ClosePanel()" class="closebutton"></button>
    <div class="panel">
        <video id="videoPlayer" autoplay controls muted style="width:600px;"></video>
    </div>
	<script type="text/javascript" src="res/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="res/webrtcplayer.js"></script>
    <script src="Build/{{{ LOADER_FILENAME }}}"></script>
    <script>
      createUnityInstance(document.querySelector("#unity-canvas"), {
        dataUrl: "Build/{{{ DATA_FILENAME }}}",
        frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
        codeUrl: "Build/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{ COMPANY_NAME }}}",
        productName: "{{{ PRODUCT_NAME }}}",
        productVersion: "{{{ PRODUCT_VERSION }}}",
        // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
      });
	  
	  /*--------- For RTSP Player ↓-----------*/
    var opacity = 0.68;
    var internal = 0.01;
    var timeout = 0.5;
    var player = null;

    $(document).ready(function () {
        WebRtcPlayer.setServer('localhost:8083');
        player = new WebRtcPlayer('videoPlayer', 'demo');

        //当视频加载完毕尺寸变更时需要将面板居中
        var video = document.getElementById("videoPlayer");
        video.onresize = DoPanelResize;

        //浏览器窗口大小改变时
        $(window).resize(DoPanelResize);
        //浏览器有滚动条时的操作、
        $(window).scroll(DoPanelResize);
    });
    //网页关闭事件
    $(window).unload(function () {
        alert("Goodbye!");
    });

    function ShowPanel(uuid) {
        $(".panel").css({ 'display': 'block' });
        DoPanelResize();
        player.load(uuid); // 这个参数是 UUID，绝对不能传错，否则服务器返回 500 错误
        ShowMask(null, true);
    }

    // 隐藏弹窗
    function ClosePanel() {
        $(".panel").css({ 'display': 'none' });
        ShowMask(() => {
            $(".mask").css({ 'display': 'none' });
            this.player.destroy();
        }, false);
    }
    // 居中
    function DoPanelResize() {
        if ($(".panel").css("display") != "block") return;
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();
        var scrolltop = $(window).scrollTop();
        var objLeft = (screenWidth - $(".panel").width()) / 2;//当前浏览器窗口的 宽高
        var objTop = (screenHeight - $(".panel").height()) / 2; + scrolltop;//获取当前窗口距离页面顶部高度
        $(".panel").css({ 'left': objLeft + 'px', "top": objTop + 'px' });
    }
    // 实现 蒙版的渐隐渐显
    function ShowMask(callback, isfadein) {
        var mask = document.getElementById("mask");
        mask.style.display = "block";
        var op = mask.style.opacity = isfadein ? 0.00 : 1;
        var op_temp = isfadein ? opacity : 0;
        var delay = setInterval(() => { //开启定时器
            if (isfadein) {
                if (mask.style.opacity < op_temp) {
                    op += internal;
                } else {
                    op = opacity;
                }
            } else {
                if (mask.style.opacity > op_temp) {
                    op -= internal;
                } else {
                    op = opacity;
                }
            }
            mask.style.opacity = op;
            if (Math.abs(mask.style.opacity - op_temp) < 0.001) {
                $(".closebutton").css({ 'display': isfadein ? 'block' : 'none' });
                if (callback) callback();
                clearInterval(delay); //清除定时器
            }
        }, timeout);
    }

    /*--------- For RTSP Player ↑-----------*/
    </script>
  </body>
</html>

Bian-Sh · 2024-04-07T09:21:04Z

我当时完全没有关注过声音哎，所以接下来的路可能你需要自己去走。
但是按理说应该是带有声音的，可能是声音的编码格式不支持吧
首先，你可以看看我这个项目引用的源头仓库，看看他支持的音视频编码格式是否与你的视频声音编码匹配。
其次，你需要确认你的视频输出是有收录声音的，这一点可以从2点进行判断：1. 确认硬件是否支持声音拾取，2. 通过 VLC 播放器测试播放看看有没有声音输出。
如果编码不匹配，可能就需要找 rtsp 服务器转码相关的问题：支不支持转码啊，支持什么类型的转码啊，有没有声音数据啊这些。

Bian-Sh · 2024-04-07T09:26:17Z

如果通过 vlc 播放视频有声音，但是h5音量按钮还是灰色，可能需要请教 h5 开发尝试从 web前端找问题，而 h5 我是真空地带，是帮助不了你的，如果是视频有声音，你可以抱希望是 audio 组件没有缺失配置导致，可以通过学习尝试改善就比如Html5之audio音频和video视频的控制详解（controls）

Tea-NT · 2024-04-08T01:07:39Z

如果通过 vlc 播放视频有声音，但是h5音量按钮还是灰色，可能需要请教 h5 开发尝试从 web前端找问题，而 h5 我是真空地带，是帮助不了你的，如果是视频有声音，你可以抱希望是 audio 组件没有缺失配置导致，可以通过学习尝试改善就比如Html5之audio音频和video视频的控制详解（controls）

感谢大佬回复，我这边按您指点的方法再尝试下

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Camera view have no sound. #2

Camera view have no sound. #2

Tea-NT commented Apr 7, 2024

Bian-Sh commented Apr 7, 2024

Bian-Sh commented Apr 7, 2024 •

edited

Loading

Tea-NT commented Apr 8, 2024

Camera view have no sound. #2

Camera view have no sound. #2

Comments

Tea-NT commented Apr 7, 2024

Bian-Sh commented Apr 7, 2024

Bian-Sh commented Apr 7, 2024 • edited Loading

Tea-NT commented Apr 8, 2024

Bian-Sh commented Apr 7, 2024 •

edited

Loading