javascript textTrack()videojs为空(m3u8播放列表)

wqnecbli 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(138)

----------介绍----------------------
我正在一个体育馆里做一个IP摄像机项目，一共有16个摄像机，每个摄像机拍摄一个设备，然后在本地网络上用rtsp播放它的内容，所有的rtsp流都通过ffmpeg保存为一个m3u8播放列表在网络服务器上，使用的ffmpeg命令是：ffmpeg -v详细信息-rtsp_transport tcp -i rtsp：//id：mdp@192.168.0.%%x：554/h265Preview_01_main -预设超快-Map0 -Map-0：a -c：v复制-c：a复制-f hls -hls时间1 -段时间2 -hls列表大小2000 -hls标记删除段+附加列表+省略尾列表C：[...]\WebServer\数据%%x\Rec.m3u8
Web服务器显示各设备区域的网页，然后通过video-js播放视频。
到目前为止，一切正常（除了在检索不同的视频流时出现一些错误/数据损坏）。
我的担心来自我想补充的一个特点。
事实上，我希望能够提取视频的一部分，然后能够恢复此提取并将其发布在网络上。
一开始我看了看MediaCapture API，但它与所使用的平板电脑（iOS 12. 5）不兼容。
------------问题---------------------
所以我试着恢复当前读取的片段，然后发送一个php请求在服务器上启动一个脚本，该脚本将恢复此片段和后续片段（取决于所需的录制时间），并将它们合并到一个mp4视频中。
我的问题是我无法检索这些信息......
我设置了useCueTags：true，但textTracks（）保持为空...
如果有人能帮我看看我做错了什么，谢谢：）
以下是其中一个网页的示例

<?php include('../Headers.php'); ?>
<body>
<section>
    <button id="pointer">Point de Sauvegarde</button>
    <button id="download">Enregistrement du point de sauvegarde</button>
    <div class="slidecontainer">
        <input type="range" min="10" max="100" value="50" step="10" class="slider" id="TempoRec">           
        <pre id="slideroutput">
        </pre>
    </div>
</section>
<section>
    <div class="gauche">
        <video-js id="player" class="video-js vjs-fluid" controls preload="auto">
        </video-js>
    </div>
    <div class="droite">
        <video id="recording" controls loop  muted></video>
    </div>
</section>
<?php include('../footer.php'); ?>      
<script src="http://127.0.0.1/dist/video-js/video.js"></script>
<script src="http://127.0.0.1/dist/videojs-seek-buttons.min.js"></script>
<script src="http://127.0.0.1/dist/videojs-frame-by-frame.js"></script>
<script>
    var player = videojs('player',{liveui:true,playbackRates: [0.1,0.3,0.5,1],controlBar: {volumePanel:false,muteToggle:false}});
    player.src({
        src:'http://127.0.0.1/Data/12/ZoneArc.m3u8',
        type:'application/x-mpegURL',
        nativeTextTracks: false,
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        overrideNative: true,
        useCueTags: true
    });
    player.seekButtons({
        forward: 5,
        back: 10
    });
    player.frametoframe({
        forward: 0.1,
        back: 0.1
    });
    let tracks = player.textTracks();
    var segmentMetadataTrack;
    console.log(tracks.length); 
    for (let i = 0; i < tracks.length; i++) {
    if (tracks[i].label === 'segment-metadata'){
        segmentMetadataTrack = tracks[i];
        let previousPlaylist;
        segmentMetadataTrack.on('cuechange', function(){
            let activeCue = segmentMetadataTrack.activeCues[0];
            if (activeCue) {
              if (previousPlaylist !== activeCue.value.uri) {
                console.log('Switched from rendition ' + previousPlaylist +
                            ' to rendition ' + activeCue.value.playlist);
              }
              previousPlaylist = activeCue.value.uri;
            }
        });
      }
    }   
    
</script>
</body></html>

我期望变量轨道将被填充至少段元数据轨道，但它保持空无论我做什么...

JavaScript

来源：https://stackoverflow.com/questions/75181551/texttrack-videojs-is-empty-m3u8-playlist

2条答案

按热度按时间

fafcakar1#

你可以为loadedmetadata添加一个监听器，然后检查曲目。如果你检查得太早，曲目可能还没有添加。

player.on('loadedmetadata', function() {
  console.log(player.textTracks().length);
});

赞(0）回复(0）举报 2023-01-29

4c8rllxm2#

谢谢@misterben，现在工作起来很有魅力！
脚本现在是这样的：

<script>
    var player = videojs('player',{liveui:true,playbackRates: [0.1,0.3,0.5,1],controlBar: {volumePanel:false,muteToggle:false}});
    player.src({
        src:'http://127.0.0.1/Data/12/ZoneArc.m3u8',
        type:'application/x-mpegURL',
        nativeTextTracks: false,
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        overrideNative: true,
        useCueTags: true
    });
    player.seekButtons({
        forward: 5,
        back: 10
    });
    player.frametoframe({
        forward: 0.1,
        back: 0.1
    });
    player.on('loadedmetadata',function(){
        let tracks = player.textTracks();
        var segmentMetadataTrack;
        console.log(tracks.length); 
        for (let i = 0; i < tracks.length; i++) {
        if (tracks[i].label === 'segment-metadata'){
            segmentMetadataTrack = tracks[i];
            let previousPlaylist;
            segmentMetadataTrack.on('cuechange', function(){
                let activeCue = segmentMetadataTrack.activeCues[0];
                if (activeCue) {
                  if (previousPlaylist !== activeCue.value.uri) {
                    console.log('Switched from semgent ' + previousPlaylist +
                                ' to rendition ' + activeCue.value.uri);
                  }
                  previousPlaylist = activeCue.value.uri;
                }
            });
          }
        }   
    }); 
</script>

现在需要通过php将当前的ts段发送到服务器！

赞(0）回复(0）举报 2023-01-29

我来回答

javascript textTrack()videojs为空(m3u8播放列表)

2条答案

相关问题

热门标签

最新问答