Question

我想在从hls服务器生成的每个视频文件中添加水印。为了做到这一点，我正在使用流利的ffmpeg js componnent。这是我的hls服务器后端代码

 self.provider.getSegmentStream(req, function (err, stream) {



res.setHeader('Content-Type', CONTENT_TYPE.SEGMENT)
res.statusCode = 200
var proc = ffmpeg(req.filePath). videoFilters(
 {
filter: 'drawtext',
options: {
  text: 'VERY LONG TEXT VERY VERY VERY VERY LOL!!!',
  fontsize: 36,
  fontcolor: 'white',
  x: '(main_w/2-text_w/2)',
  y: '(text_h/2)+15',
  shadowcolor: 'black',
  shadowx: 2,
  shadowy: 2
}}

 ) 

.videoCodec('libx264')

 .audioBitrate('128k')

 .audioCodec('aac')

.format('mpegts')
.on('end', function(stdout, stderr) {
console.log('Transcoding succeeded !',req.filePath);

})

.on('error', function(err) {
 console.log('an error happened: ' + err.message);
 }).pipe(res ,{end:true})

在我的客户中，我正在使用以下代码：

if(Hls.isSupported())
{
  console.log('hls is suported');
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://serverip:8182/streams/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function()
    {
        video.play();
    });
}
else if (video.canPlayType('application/vnd.apple.mpegurl'))
{
  console.log('hls isnot suported');

    video.src = 'http://serverip/streams/stream.m3u8';
    video.addEventListener('canplay',function()
    {
        video.play();
    });
}

但是我有问题，因为它只播放第一个ts文件，但是在hls停止后，在控制台中出现了这个错误：

Uncaught RangeError: Source is too large
at Uint8Array.set (<anonymous>)
at e.remuxAudio (blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1)
at e.remux (blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1)
at e.append (blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1)
at e.pushDecrypted (blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1)
at e.push (blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1)
at blob:null/44d66ff1-a411-411b-842b-4904552a58a4:1

我应该怎么做

ffmpeg到hls无法正确运行，并显示错误：未捕获RangeError：源太大

0 个答案: