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

wqnecbli  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(139)
  • ----------介绍----------------------
    我正在一个体育馆里做一个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>

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

fafcakar

fafcakar1#

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

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

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段发送到服务器!

相关问题