Recherche avancée
Médias (1)
-
Carte de Schillerkiez
13 mai 2011, par
Mis à jour : Septembre 2011
Langue : English
Type : Texte
Autres articles (67)
-
Des sites réalisés avec MediaSPIP
2 mai 2011, parCette page présente quelques-uns des sites fonctionnant sous MediaSPIP.
Vous pouvez bien entendu ajouter le votre grâce au formulaire en bas de page. -
Support audio et vidéo HTML5
10 avril 2011MediaSPIP utilise les balises HTML5 video et audio pour la lecture de documents multimedia en profitant des dernières innovations du W3C supportées par les navigateurs modernes.
Pour les navigateurs plus anciens, le lecteur flash Flowplayer est utilisé.
Le lecteur HTML5 utilisé a été spécifiquement créé pour MediaSPIP : il est complètement modifiable graphiquement pour correspondre à un thème choisi.
Ces technologies permettent de distribuer vidéo et son à la fois sur des ordinateurs conventionnels (...) -
HTML5 audio and video support
13 avril 2011, parMediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
For older browsers the Flowplayer flash fallback is used.
MediaSPIP allows for media playback on major mobile platforms with the above (...)
Sur d’autres sites (9236)
-
Video streamign with FFMpeg and Nest.js+Next.js
17 septembre 2024, par AizenHere is my problem : I have one video src 1080p (on the frontend). On the frontend, I send this video-route to the backend :


const req = async()=>{try{const res = await axios.get('/catalog/item',{params:{SeriesName:seriesName}});return {data:res.data};}catch(err){console.log(err);return false;}}const fetchedData = await req();-On the backend i return seriesName.Now i can make a full path,what the video is,and where it is,code:


const videoUrl = 'C:/Users/arMori/Desktop/RedditClone/reddit/public/videos';console.log('IT VideoURL',videoUrl);


const selectedFile = `${videoUrl}/${fetchedData.data.VideoSource}/${seriesName}-1080p.mp4`
console.log(`ITS'S SELECTED FILE: ${selectedFile}`);


Ok, I have my src 1080p, now is the time to send it to the backend :


const response = await axios.post('/videoFormat', {videoUrl:selectedFile})console.log('Это консоль лог путей: ',response.data);const videoPaths = response.data;


Backend takes it and FFMpqg makes two types of resolution,720p and 480p,save it to the temp storage on backend, and then returns two routes where these videos stores


async videoUpload(videoUrl:string){try{const tempDir = C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp;const inputFile = videoUrl;console.log('VIDEOURL: ',videoUrl);


const outputFiles = [];
 
 await this.createDirectories(tempDir); 
 outputFiles.push(await this.convertVideo(inputFile, '1280x720', '720p.mp4'));
 outputFiles.push(await this.convertVideo(inputFile, '854x480', '480p.mp4'));
 console.log('OUTUPT FILES SERVICE: ',outputFiles);
 
 return outputFiles;

 }catch(err){
 console.error('VideoFormatterService Error: ',err);
 
 }
}

private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{
 const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;
 return new Promise(async(resolve,reject)=>{
 const height = resolution.split('x')[1];
 console.log('HIEGHT: ',height);
 
 const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;
 const outputPath = join(outputDir, outputFileName);
 const isExists = await fs.access(outputPath).then(() => true).catch(() => false);
 if(isExists){ 
 console.log(`File already exists: ${outputPath}`);
 return resolve(outputPath)
 };
 ffmpeg(inputPath)
 .size(`${resolution}`)
 .videoCodec('libx264') // Кодек H.264
 .audioCodec('aac') 
 .output(outputPath)
 .on('end',()=>resolve(outputPath))
 .on('error',(err)=>reject(err))
 .run()
 
 })
}

private async createDirectories(temp:string){
 try{
 const dir720p = `${temp}/720p`;
 const dir480p = `${temp}/480p`;
 const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);
 const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);
 if(dir720pExists && dir480pExists){
 console.log('FILES ALIVE');
 return;
 }
 if (!dir720pExists) {
 await fs.mkdir(dir720p, { recursive: true });
 console.log('Папка 720p создана');
 }
 
 if (!dir480pExists) {
 await fs.mkdir(dir480p, { recursive: true });
 console.log('Папка 480p создана');
 }
 } catch (err) {
 console.error('Ошибка при создании директорий:', err);
 }
}
</string>

Continue frontentd code :


let videoPath;

if (quality === '720p') {
 videoPath = videoPaths[0];
} else if (quality === '480p') {
 videoPath = videoPaths[1];
}

if (!videoPath) {
 console.error('Video path not found!');
 return;
}

// Получаем видео по его пути
console.log('VIDEOPATH LOG: ',videoPath);
 
const videoRes = await axios.get('/videoFormat/getVideo', { 
 params: { path: videoPath } ,
 headers: { Range: 'bytes=0-' },
 responseType: 'blob'
 });
 console.log('Video fetched: ', videoRes);
 const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });
 const videoURL = URL.createObjectURL(videoBlob);
 return videoURL;
 /* console.log('Видео успешно загружено:', response.data); */
 } catch (error) {
 console.error('Ошибка при загрузке видео:', error);
 }
}


Here I just choose one of the route and make a new GET request (VideoRes), now in the controller in the backend, I'm trying to do a video streaming :


@Public()
 @Get('/getVideo')
 async getVideo(@Query('path') videoPath:string,@Req() req:Request,@Res() res:Response){
 try {
 console.log('PATH ARGUMENT: ',videoPath);
 console.log('VIDEOPATH IN SERVICE: ',videoPath);
 const videoSize = (await fs.stat(videoPath)).size;
 const CHUNK_SIZE = 10 ** 6;
 const range = req.headers['range'] as string | undefined;
 if (!range) {
 return new ForbiddenException('Range не найденно');
 }
 const start = Number(range.replace(/\D/g,""));
 const end = Math.min(start + CHUNK_SIZE,videoSize - 1);

 const contentLength = end - start + 1;
 const videoStream = fsSync.createReadStream(videoPath, { start, end });
 const headers = {
 'Content-Range':`bytes ${start}-${end}/${videoSize}`,
 'Accept-Ranges':'bytes',
 'Content-Length':contentLength,
 'Content-Type':'video/mp4'
 }
 
 res.writeHead(206,headers);

 // Передаем поток в ответ
 videoStream.pipe(res);
 

 // Если возникнет ошибка при стриминге, логируем ошибку
 videoStream.on('error', (error) => {
 console.error('Ошибка при чтении видео:', error);
 res.status(500).send('Ошибка при чтении видео');
 });
 } catch (error) {
 console.error('Ошибка при обработке запросов:', error);
 return res.status(400).json({ message: 'Ошибка при обработке getVideo запросов' });
 }
 }


Send to the frontend


res.writeHead(206,headers);


In the frontend, I make blob url for video src and return it


const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });const videoURL = URL.createObjectURL(videoBlob);return videoURL;


And assign src to the video :


useVideo(seriesName,quality).then(src => {
 if (src) {
 console.log('ITS VIDEOLOGISC GOIDA!');
 if(!playRef.current) return;
 
 const oldURL = playRef.current.src;
 if (oldURL && oldURL.startsWith('blob:')) {
 URL.revokeObjectURL(oldURL);
 }
 playRef.current.pause();
 playRef.current.src = '';
 setQuality(quality);
 console.log('SRC: ',src);
 
 playRef.current.src = src;
 playRef.current.load();
 console.log('ITS VIDEOURL GOIDA!');
 togglePlayPause();
 }
 })
 .catch(err => console.error('Failed to fetch video', err));


But the problem is :




Vinland-Saga:1 Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found




And I don't know why...


I tried everything, but I don't understand why src is incorrect..


-
How to get the correct result file data if I use Web Worker on ffmpeg.js ?
23 avril 2019, par SuperBerryI have tried to use FFMPEG.js (https://github.com/Kagami/ffmpeg.js) to convert mp3 files on the browser/client side, and I followed the usage of the page of Web Worker. However, the worker works well on the converting and it seems the file has been converted, but I cannot get the correct result file data back.
Here my code is :
<code class="echappe-js"><script><br />
<br />
var stdout = "";<br />
var outputhtml="";<br />
var stderr = "";<br />
var outputfile;<br />
<br />
var sampleVideoData;<br />
<br />
function retrieveSampleVideo() {<br />
var oReq = new XMLHttpRequest();<br />
oReq.open("GET", "short.mp3", true);<br />
oReq.responseType = "arraybuffer";<br />
<br />
oReq.onload = function (oEvent) {<br />
var arrayBuffer = oReq.response;<br />
if (arrayBuffer) {<br />
sampleVideoData = new Uint8Array(arrayBuffer);<br />
}<br />
};<br />
<br />
oReq.send(null);<br />
}<br />
<br />
function getDownloadLink(fileData, fileName) {<br />
var a = document.createElement('a');<br />
a.download = fileName;<br />
var blob = new Blob([fileData]);<br />
var src = window.URL.createObjectURL(blob);<br />
a.href = src;<br />
a.textContent = 'Click here to download ' + fileName + "!";<br />
document.body.appendChild(a);<br />
}<br />
<br />
var worker = new Worker("ffmpeg-worker-mp4.js");<br />
<br />
retrieveSampleVideo();<br />
<br />
var memfs =[]; <br />
<br />
//[, {name: "input.mp3", data: output}];<br />
<br />
worker.onmessage = function(e) {<br />
var msg = e.data;<br />
<br />
switch (msg.type) {<br />
case "ready":<br />
console.log("ready: " + msg.data);<br />
alert(sampleVideoData.length);<br />
memfs.push({name: "input.mp3", data: sampleVideoData});<br />
memfs.push({name: "output.mp3", data: outputfile});<br />
<br />
worker.postMessage({type: "run", MEMFS: memfs, arguments: ["-i", "input.mp3", "-y", "output.mp3"]});<br />
<br />
<br />
break;<br />
case "stdout":<br />
console.log("stdout: " + msg.data);<br />
stdout += msg.data + "\n";<br />
outputhtml+=msg.data + "<br>";<br />
<br />
break;<br />
case "stderr":<br />
console.log("stderr: " + msg.data);<br />
stderr += msg.data + "\n";<br />
outputhtml+=msg.data + "<br>";<br />
<br />
break;<br />
<br />
case "exit":<br />
<br />
console.log("Process exited with code " + msg.data);<br />
console.log(stdout);<br />
document.write(outputhtml);<br />
<br />
getDownloadLink(outputfile, "output.mp3");<br />
worker.terminate();<br />
<br />
<br />
break;<br />
}<br />
};<br />
<br />
</script>And the console output looks good :
stderr: ffmpeg version n3.1.2 Copyright (c) 2000-2016 the FFmpeg developers index.html:66:4
stderr: built with emcc (Emscripten gcc/clang-like replacement) 1.36.7 () index.html:66:4
stderr: configuration: --cc=emcc --enable-cross-compile --target-os=none --arch=x86 --disable-runtime-cpudetect --disable-asm --disable-fast-unaligned --disable-pthreads --disable-w32threads --disable-os2threads --disable-debug --disable-stripping --disable-all --enable-ffmpeg --enable-avcodec --enable-avformat --enable-avutil --enable-swresample --enable-swscale --enable-avfilter --disable-network --disable-d3d11va --disable-dxva2 --disable-vaapi --disable-vda --disable-vdpau --enable-decoder=vp8 --enable-decoder=vp9 --enable-decoder=theora --enable-decoder=mpeg2video --enable-decoder=mpeg4 --enable-decoder=h264 --enable-decoder=hevc --enable-decoder=png --enable-decoder=mjpeg --enable-decoder=vorbis --enable-decoder=opus --enable-decoder=mp3 --enable-decoder=ac3 --enable-decoder=aac --enable-decoder=ass --enable-decoder=ssa --enable-decoder=srt --enable-decoder=webvtt --enable-demuxer=matroska --enable-demuxer=ogg --enable-demuxer=avi --enable-demuxer=mov --enable-demuxer=flv --enable-demuxer=mpegps --enable-demuxer=image2 --enable-demuxer=mp3 --enable-demuxer=concat --enable-protocol=file --enable-filter=aresample --enable-filter=scale --enable-filter=crop --enable-filter=overlay --disable-bzlib --disable-iconv --disable-libxcb --disable-lzma --disable-sdl --disable-securetransport --disable-xlib --disable-zlib --enable-encoder=libx264 --enable-encoder=libmp3lame --enable-encoder=aac --enable-muxer=mp4 --enable-muxer=mp3 --enable-muxer=null --enable-gpl --enable-libmp3lame --enable-libx264 --extra-cflags=-I../lame/dist/include --extra-ldflags=-L../lame/dist/lib index.html:66:4
stderr: libavutil 55. 28.100 / 55. 28.100 index.html:66:4
stderr: libavcodec 57. 48.101 / 57. 48.101 index.html:66:4
stderr: libavformat 57. 41.100 / 57. 41.100 index.html:66:4
stderr: libavfilter 6. 47.100 / 6. 47.100 index.html:66:4
stderr: libswscale 4. 1.100 / 4. 1.100 index.html:66:4
stderr: libswresample 2. 1.100 / 2. 1.100 index.html:66:4
stderr: [mp3 @ 0x812380] Warning: not compiled with thread support, using thread emulation index.html:66:4
stderr: Input #0, mp3, from 'input.mp3': index.html:66:4
stderr: Metadata: index.html:66:4
stderr: encoder : Lavf57.66.101 index.html:66:4
stderr: Duration: 00:00:03.02, start: 0.023021, bitrate: 128 kb/s index.html:66:4
stderr: Stream #0:0: Audio: mp3, 48000 Hz, stereo, s16p, 128 kb/s index.html:66:4
stderr: Metadata: index.html:66:4
stderr: encoder : Lavc57.75 index.html:66:4
stderr: [mp3 @ 0x8240f0] Warning: not compiled with thread support, using thread emulation index.html:66:4
stderr: [libmp3lame @ 0x81b8a0] Warning: not compiled with thread support, using thread emulation index.html:66:4
stderr: [mp3 @ 0x80b0f0] Using AVStream.codec to pass codec parameters to muxers is deprecated, use AVStream.codecpar instead. index.html:66:4
stderr: Output #0, mp3, to 'output.mp3': index.html:66:4
stderr: Metadata: index.html:66:4
stderr: TSSE : Lavf57.41.100 index.html:66:4
stderr: Stream #0:0: Audio: mp3 (libmp3lame), 48000 Hz, stereo, s16p index.html:66:4
stderr: Metadata: index.html:66:4
stderr: encoder : Lavc57.48.101 libmp3lame index.html:66:4
stderr: Stream mapping: index.html:66:4
stderr: Stream #0:0 -> #0:0 (mp3 (native) -> mp3 (libmp3lame)) index.html:66:4
stderr: Press [q] to stop, [?] for help index.html:66:4
stderr: size= 47kB time=00:00:03.00 bitrate= 129.6kbits/s speed=10.9x index.html:66:4
stderr: video:0kB audio:47kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.489831% index.html:66:4
Process exited with code 0I have set the output into the memfs in the code :
memfs.push(name : "output.mp3", data : outputfile) ;
But I cannot get the result file data in outputfile to create the blob downloadd link.
-
Assertion desc failed at src/libswscale/swscale_internal.h:764
18 avril 2022, par harsh bhatnagarI am trying to implement the ffmpeg code written in C++ language .


Tutorial link : https://www.youtube.com/watch?v=W6Yx3injNZs


Github Reference : https://github.com/bartjoyce/video-app/tree/master/src


When pass the filename or Rtsp Link in the avformat_open_input funcion. It shows the strange bug not able understand the issue in the C++ code or camera setting issue .


// av_err2str returns a temporary array. This doesn't work in gcc.
// This function can be used as a replacement for av_err2str.
#include "video_reader.hpp"
static const char* av_make_error(int errnum) {
 static char str[AV_ERROR_MAX_STRING_SIZE];
 memset(str, 0, sizeof(str));
 return av_make_error_string(str, AV_ERROR_MAX_STRING_SIZE, errnum);
}

static AVPixelFormat correct_for_deprecated_pixel_format(AVPixelFormat pix_fmt) {
 // Fix swscaler deprecated pixel format warning
 // (YUVJ has been deprecated, change pixel format to regular YUV)
 switch (pix_fmt) {
 case AV_PIX_FMT_YUVJ420P: return AV_PIX_FMT_YUV420P;
 case AV_PIX_FMT_YUVJ422P: return AV_PIX_FMT_YUV422P;
 case AV_PIX_FMT_YUVJ444P: return AV_PIX_FMT_YUV444P;
 case AV_PIX_FMT_YUVJ440P: return AV_PIX_FMT_YUV440P;
 default: return pix_fmt;
 }
}

bool video_reader_open(VideoReaderState* state, const char* filename) {

 // Unpack members of state
 auto& width = state->width;
 auto& height = state->height;
 auto& time_base = state->time_base;
 auto& av_format_ctx = state->av_format_ctx;
 auto& av_codec_ctx = state->av_codec_ctx;
 auto& video_stream_index = state->video_stream_index;
 auto& av_frame = state->av_frame;
 auto& av_packet = state->av_packet;

 // Open the file using libavformat
 av_format_ctx = avformat_alloc_context();
 if (!av_format_ctx) {
 printf("Couldn't created AVFormatContext\n");
 return false;
 }

 if (avformat_open_input(&av_format_ctx, filename, NULL, NULL) != 0) {
 printf("Couldn't open video file\n");
 return false;
 }

 // Find the first valid video stream inside the file
 video_stream_index = -1;
 AVCodecParameters* av_codec_params;
 AVCodec* av_codec;
 for (int i = 0; i < av_format_ctx->nb_streams; ++i) {
 av_codec_params = av_format_ctx->streams[i]->codecpar;
 av_codec = avcodec_find_decoder(av_codec_params->codec_id);
 if (!av_codec) {
 continue;
 }
 if (av_codec_params->codec_type == AVMEDIA_TYPE_VIDEO) {
 video_stream_index = i;
 width = av_codec_params->width;
 height = av_codec_params->height;
 time_base = av_format_ctx->streams[i]->time_base;
 break;
 }
 }
 if (video_stream_index == -1) {
 printf("Couldn't find valid video stream inside file\n");
 return false;
 }

 // Set up a codec context for the decoder
 av_codec_ctx = avcodec_alloc_context3(av_codec);
 if (!av_codec_ctx) {
 printf("Couldn't create AVCodecContext\n");
 return false;
 }
 if (avcodec_parameters_to_context(av_codec_ctx, av_codec_params) < 0) {
 printf("Couldn't initialize AVCodecContext\n");
 return false;
 }
 if (avcodec_open2(av_codec_ctx, av_codec, NULL) < 0) {
 printf("Couldn't open codec\n");
 return false;
 }

 av_frame = av_frame_alloc();
 if (!av_frame) {
 printf("Couldn't allocate AVFrame\n");
 return false;
 }
 av_packet = av_packet_alloc();
 if (!av_packet) {
 printf("Couldn't allocate AVPacket\n");
 return false;
 }

 return true;
}

bool video_reader_read_frame(VideoReaderState* state, uint8_t* frame_buffer, int64_t* pts) {

 // Unpack members of state
 auto& width = state->width;
 auto& height = state->height;
 auto& av_format_ctx = state->av_format_ctx;
 auto& av_codec_ctx = state->av_codec_ctx;
 auto& video_stream_index = state->video_stream_index;
 auto& av_frame = state->av_frame;
 auto& av_packet = state->av_packet;
 auto& sws_scaler_ctx = state->sws_scaler_ctx;

 // Decode one frame
 int response;
 while (av_read_frame(av_format_ctx, av_packet) >= 0) {
 if (av_packet->stream_index != video_stream_index) {
 av_packet_unref(av_packet);
 continue;
 }

 response = avcodec_send_packet(av_codec_ctx, av_packet);
 if (response < 0) {
 printf("Failed to decode packet: %s\n", av_make_error(response));
 return false;
 }

 response = avcodec_receive_frame(av_codec_ctx, av_frame);
 if (response == AVERROR(EAGAIN) || response == AVERROR_EOF) {
 av_packet_unref(av_packet);
 continue;
 } else if (response < 0) {
 printf("Failed to decode packet: %s\n", av_make_error(response));
 return false;
 }

 av_packet_unref(av_packet);
 break;
 }

 *pts = av_frame->pts;
 
 // Set up sws scaler
 if (!sws_scaler_ctx) {
 auto source_pix_fmt = correct_for_deprecated_pixel_format(av_codec_ctx->pix_fmt);
 sws_scaler_ctx = sws_getContext(width, height, source_pix_fmt,
 width, height, AV_PIX_FMT_RGB0,
 SWS_BILINEAR, NULL, NULL, NULL);
 }
 if (!sws_scaler_ctx) {
 printf("Couldn't initialize sw scaler\n");
 return false;
 }

 uint8_t* dest[4] = { frame_buffer, NULL, NULL, NULL };
 int dest_linesize[4] = { width * 4, 0, 0, 0 };
 sws_scale(sws_scaler_ctx, av_frame->data, av_frame->linesize, 0, av_frame->height, dest, dest_linesize);

 return true;
}

bool video_reader_seek_frame(VideoReaderState* state, int64_t ts) {
 
 // Unpack members of state
 auto& av_format_ctx = state->av_format_ctx;
 auto& av_codec_ctx = state->av_codec_ctx;
 auto& video_stream_index = state->video_stream_index;
 auto& av_packet = state->av_packet;
 auto& av_frame = state->av_frame;
 
 av_seek_frame(av_format_ctx, video_stream_index, ts, AVSEEK_FLAG_BACKWARD);

 // av_seek_frame takes effect after one frame, so I'm decoding one here
 // so that the next call to video_reader_read_frame() will give the correct
 // frame
 int response;
 while (av_read_frame(av_format_ctx, av_packet) >= 0) {
 if (av_packet->stream_index != video_stream_index) {
 av_packet_unref(av_packet);
 continue;
 }

 response = avcodec_send_packet(av_codec_ctx, av_packet);
 if (response < 0) {
 printf("Failed to decode packet: %s\n", av_make_error(response));
 return false;
 }

 response = avcodec_receive_frame(av_codec_ctx, av_frame);
 if (response == AVERROR(EAGAIN) || response == AVERROR_EOF) {
 av_packet_unref(av_packet);
 continue;
 } else if (response < 0) {
 printf("Failed to decode packet: %s\n", av_make_error(response));
 return false;
 }

 av_packet_unref(av_packet);
 break;
 }

 return true;
}

void video_reader_close(VideoReaderState* state) {
 sws_freeContext(state->sws_scaler_ctx);
 avformat_close_input(&state->av_format_ctx);
 avformat_free_context(state->av_format_ctx);
 av_frame_free(&state->av_frame);
 av_packet_free(&state->av_packet);
 avcodec_free_context(&state->av_codec_ctx);
}


Bug :


[rtsp @ 0x55def0b00ac0] getaddrinfo(): Name or service not known
[rtsp @ 0x55def0b00ac0] max delay reached. need to consume packet
[rtsp @ 0x55def0b00ac0] RTP: missed 10 packets
Assertion desc failed at src/libswscale/swscale_internal.h:764
Aborted (core dumped)


Syndiquer tout le site
