Recherche avancée
Médias (91)
-
#3 The Safest Place
16 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#4 Emo Creates
15 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#2 Typewriter Dance
15 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
#1 The Wires
11 octobre 2011, par
Mis à jour : Février 2013
Langue : English
Type : Audio
-
ED-ME-5 1-DVD
11 octobre 2011, par
Mis à jour : Octobre 2011
Langue : English
Type : Audio
-
Revolution of Open-source and film making towards open film making
6 octobre 2011, par
Mis à jour : Juillet 2013
Langue : English
Type : Texte
Autres articles (23)
-
L’utiliser, en parler, le critiquer
10 avril 2011La première attitude à adopter est d’en parler, soit directement avec les personnes impliquées dans son développement, soit autour de vous pour convaincre de nouvelles personnes à l’utiliser.
Plus la communauté sera nombreuse et plus les évolutions seront rapides ...
Une liste de discussion est disponible pour tout échange entre utilisateurs. -
MediaSPIP version 0.1 Beta
16 avril 2011, parMediaSPIP 0.1 beta est la première version de MediaSPIP décrétée comme "utilisable".
Le fichier zip ici présent contient uniquement les sources de MediaSPIP en version standalone.
Pour avoir une installation fonctionnelle, il est nécessaire d’installer manuellement l’ensemble des dépendances logicielles sur le serveur.
Si vous souhaitez utiliser cette archive pour une installation en mode ferme, il vous faudra également procéder à d’autres modifications (...) -
Soumettre bugs et patchs
10 avril 2011Un logiciel n’est malheureusement jamais parfait...
Si vous pensez avoir mis la main sur un bug, reportez le dans notre système de tickets en prenant bien soin de nous remonter certaines informations pertinentes : le type de navigateur et sa version exacte avec lequel vous avez l’anomalie ; une explication la plus précise possible du problème rencontré ; si possibles les étapes pour reproduire le problème ; un lien vers le site / la page en question ;
Si vous pensez avoir résolu vous même le bug (...)
Sur d’autres sites (3416)
-
HLS video not playing in Angular using Hls.js
5 avril 2023, par Jose A. MataránI am trying to play an HLS video using Hls.js in an Angular component. Here is the component code :


import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import Hls from 'hls.js';

@Component({
 selector: 'app-ver-recurso',
 templateUrl: './ver-recurso.component.html',
 styleUrls: ['./ver-recurso.component.css']
})
export class VerRecursoComponent implements AfterViewInit {
 @ViewChild('videoPlayer') videoPlayer!: ElementRef<htmlvideoelement>;
 hls!: Hls;

 ngAfterViewInit(): void {
 this.hls = new Hls();

 const video = this.videoPlayer.nativeElement;
 const watermarkText = 'MARCA_DE_AGUA';

 this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
 this.hls.loadSource(`http://localhost:8080/video/playlist.m3u8?watermarkText=${encodeURIComponent(watermarkText)}`);
 });

 this.hls.attachMedia(video);
 }

 loadVideo() {
 const watermarkText = 'Marca de agua personalizada';
 const video = this.videoPlayer.nativeElement;
 const hlsBaseUrl = 'http://localhost:8080/video';

 if (Hls.isSupported()) {
 this.hls.loadSource(`${hlsBaseUrl}/playlist.m3u8?watermarkText=${encodeURIComponent(watermarkText)}`);
 this.hls.attachMedia(video);
 this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
 video.play();
 });
 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 video.src = `${hlsBaseUrl}/playlist.m3u8?watermarkText=${encodeURIComponent(watermarkText)}`;
 video.addEventListener('loadedmetadata', () => {
 video.play();
 });
 }
 }
}
</htmlvideoelement>

I'm not sure what's going wrong, as the requests to the playlist and the segments seem to be working correctly, but the video never plays. Is there anything obvious that I'm missing here ?


On the backend side, I have a Spring Boot application that generates and returns the playlist file, as you can see.


@RestController
public class VideoController {
 @Autowired
 private VideoService videoService;

 @GetMapping("/video/{segmentFilename}")
 public ResponseEntity<resource> getHlsVideoSegment(@PathVariable String segmentFilename, @RequestParam String watermarkText) {
 String inputVideoPath = "/Users/jose/PROYECTOS/VARIOS/oposhield/oposhield-back/repo/202204M-20230111.mp4";
 String hlsOutputPath = "/Users/jose/PROYECTOS/VARIOS/oposhield/oposhield-back/repo/temporal";
 String segmentPath = Paths.get(hlsOutputPath, segmentFilename).toString();

 if (!Files.exists(Paths.get(hlsOutputPath, "playlist.m3u8"))) {
 videoService.generateHlsStream(inputVideoPath, watermarkText, hlsOutputPath);
 }

 // Espera a que esté disponible el segmento de video necesario.
 while (!Files.exists(Paths.get(segmentPath))) {
 try {
 Thread.sleep(1000);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 }

 Resource resource;
 try {
 resource = new UrlResource(Paths.get(segmentPath).toUri());
 } catch (Exception e) {
 return ResponseEntity.badRequest().build();
 }

 return ResponseEntity.ok()
 .contentType(MediaType.parseMediaType("application/vnd.apple.mpegurl"))
 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"")
 .body(resource);
 }

 @GetMapping("/video/{segmentFilename}.ts")
 public ResponseEntity<resource> getHlsVideoTsSegment(@PathVariable String segmentFilename) {
 String hlsOutputPath = "/Users/jose/PROYECTOS/VARIOS/oposhield/oposhield-back/repo/temporal";
 String segmentPath = Paths.get(hlsOutputPath, segmentFilename + ".ts").toString();

 // Espera a que esté disponible el segmento de video necesario.
 while (!Files.exists(Paths.get(segmentPath))) {
 try {
 Thread.sleep(1000);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 }

 Resource resource;
 try {
 resource = new UrlResource(Paths.get(segmentPath).toUri());
 } catch (Exception e) {
 return ResponseEntity.badRequest().build();
 }

 return ResponseEntity.ok()
 .contentType(MediaType.parseMediaType("video/mp2t"))
 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"")
 .body(resource);
 }
</resource></resource>

package dev.mataran.oposhieldback.service;


import org.springframework.stereotype.Service;

import java.io.BufferedReader;
import java.io.InputStreamReader;

import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

@Service
public class VideoService {
 private Process process;
 private ExecutorService executorService = Executors.newSingleThreadExecutor();

 public void generateHlsStream(String inputVideoPath, String watermarkText, String outputPath) {
 Runnable task = () -> {
 try {
 if (process != null) {
 process.destroy();
 }

 String hlsOutputFile = outputPath + "/playlist.m3u8";
 String command = String.format("ffmpeg -i %s -vf drawtext=text='%s':x=10:y=10:fontsize=24:fontcolor=white -codec:v libx264 -crf 21 -preset veryfast -g 50 -sc_threshold 0 -map 0 -flags -global_header -hls_time 4 -hls_list_size 0 -hls_flags delete_segments+append_list -f hls %s", inputVideoPath, watermarkText, hlsOutputFile);
 process = Runtime.getRuntime().exec(command);
 BufferedReader reader = new BufferedReader(new InputStreamReader(process.getErrorStream()));
 String line;
 while ((line = reader.readLine()) != null) {
 System.out.println(line);
 }
 } catch (Exception e) {
 e.printStackTrace();
 }
 };
 executorService.submit(task);
 }
}


-
Why does File upload for moving image and Audio to tmp PHP folder work on Windows but only image upload portion works on Mac using MAMP ?
31 mai 2021, par YazdanSo according to my colleague who tested this on Windows says it works perfectly fine , but in my case when I use it on a Mac with MAMP for Moodle , the image files get uploaded to the correct destination folder without an issue whereas the audio files don't move from the tmp folder to the actual destination folder and to check if this was the case ... I just changed and gave a fixed path instead of
$fileTmpLocand the file made it to the correct destination. Sorry I know the first half of the code isn't the main issue but I still wanted to post the whole code so one could understand it easily, moreover I am just beginning to code so please "have a bit of patience with me" . Thanks in advance


// this file contains upload function 
// checks if the file exists in server
include("../db/database.php");
require_once(dirname(__FILE__) . '/../../../config.php');
global $IP;

$ajaxdata = $_POST['mediaUpload'];

$FILENAME = $ajaxdata[1];
$IMAGE=$ajaxdata[0];
// an array to check which category the media belongs too
$animal= array("bird","cat","dog","horse","sheep","cow","elephant","bear","giraffe","zebra");
$allowedExts = array("mp3","wav");
$temp = explode(".", $_FILES["audio"]["name"]);
$extension = end($temp);



$test = $_FILES["audio"]["type"]; 


if (
 $_FILES["audio"]["type"] == "audio/wav"||
 $_FILES["audio"]["type"] == "audio/mp3"||
 $_FILES["audio"]["type"] == "audio/mpeg"
 &&
 in_array($extension, $allowedExts)
 )
 {

 // if the name detected by object detection is present in the animal array
 // then initialize target path to animal database or to others
 if (in_array($FILENAME, $animal)) 
 { 
 $image_target_dir = "image_dir/";
 $audio_target_dir = "audio_dir/";
 } 
 else
 { 
 $image_target_dir = "other_image_dir/";
 $audio_target_dir = "other_audio_dir/";
 } 
 // Get file path
 
 $img = $IMAGE;
 // decode base64 image
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $image_data = base64_decode($img);

 //$extension = pathinfo( $_FILES["fileUpload"]["name"], PATHINFO_EXTENSION ); // jpg
 $image_extension = "png";
 $image_target_file =$image_target_dir . basename($FILENAME . "." . $image_extension);
 $image_file_upload = "http://localhost:8888/moodle310/blocks/testblock/classes/".$image_target_file;
 
 
 $audio_extension ="mp3";
 $audio_target_file= $audio_target_dir . basename($FILENAME. "." . $audio_extension) ;
 $audio_file_upload = "http://localhost:8888/moodle310/blocks/testblock/classes/".$audio_target_file;

 // file size limit
 if(($_FILES["audio"]["size"])<=51242880)
 {

 $fileName = $_FILES["audio"]["name"]; // The file name
 $fileTmpLoc = $_FILES["audio"]["tmp_name"]; // File in the PHP tmp folder
 $fileType = $_FILES["audio"]["type"]; // The type of file it is
 $fileSize = $_FILES["audio"]["size"]; // File size in bytes
 $fileErrorMsg = $_FILES["audio"]["error"]; // 0 for false... and 1 for true
 
 if (in_array($FILENAME, $animal)) 
 { 
 $sql = "INSERT INTO mdl_media_animal (animal_image_path,animal_name,animal_audio_path) VALUES ('$image_file_upload','$FILENAME','$audio_file_upload')";
 } else {
 $sql = "INSERT INTO mdl_media_others (others_image_path,others_name,others_audio_path) VALUES ('$image_file_upload','$FILENAME','$audio_file_upload')";
 }

 // if file exists
 if (file_exists($audio_target_file) || file_exists($image_target_file)) {
 echo "alert";
 } else {
 // write image file
 if (file_put_contents($image_target_file, $image_data) ) {
 // ffmpeg to write audio file
 $output = shell_exec("ffmpeg -i $fileTmpLoc -ab 160k -ac 2 -ar 44100 -vn $audio_target_file");
 echo $output;
 
 // $stmt = $conn->prepare($sql);
 $db = mysqli_connect("localhost", "root", "root", "moodle310"); 
 // echo $sql;
 if (!$db) {
 echo "nodb";
 die("Connection failed: " . mysqli_connect_error());
 }
 // echo"sucess";
 if(mysqli_query($db, $sql)){
 // if($stmt->execute()){
 echo $fileTmpLoc;
 echo "sucess"; 
 echo $output;
 }
 else {
 // echo "Error: " . $sql . "<br />" . mysqli_error($conn);
 echo "failed";
 }

 }else {
 echo "failed";
 }

 
 
 
 }
 
 // $test = "ffmpeg -i $outputfile -ab 160k -ac 2 -ar 44100 -vn bub.wav";
 } else
 {
 echo "File size exceeds 5 MB! Please try again!";
 }
}
else
{
 echo "PHP! Not a video! ";//.$extension." ".$_FILES["uploadimage"]["type"];
 }

?>


I am a student learning frontend but a project of mine requires a fair bit of backend. So forgive me if my question sounds silly.


What I meant by manually overriding it was creating another folder and a index.php file with
echo "hello"; $output = shell_exec("ffmpeg -i Elephant.mp3 -ab 160k -ac 2 -ar 44100 -vn bub.mp3"); echo $output;so only yes in this caseElephant.mp3was changed as the initial tmp path so in this case as suggested by Mr.CBroe the permissons shouldn't be an issue.

Okay I checked my
Apache_error.logonly to find out ffmpeg is indeed the culprit ... I had installedffmpegglobally so I am not sure if it is an access problem but here is a snippet of the log

I checked my php logs and found out that
FFmpegis the culprit.
Attached is a short log file

[Mon May 31 18:11:33 2021] [notice] caught SIGTERM, shutting down
[Mon May 31 18:11:40 2021] [notice] Digest: generating secret for digest authentication ...
[Mon May 31 18:11:40 2021] [notice] Digest: done
[Mon May 31 18:11:40 2021] [notice] Apache/2.2.34 (Unix) mod_ssl/2.2.34 OpenSSL/1.0.2o PHP/7.2.10 configured -- resuming normal operations
sh: ffmpeg: command not found
sh: ffmpeg: command not found
sh: ffmpeg: command not found


-
webrtc to rtmp send video from camera to rtmp link
14 avril 2024, par Leo-Mahendrai cant send the video from webrtc which is converted to bufferd data for every 10seconds and send to server.js where it takes it via websockets and convert it to flv format using ffmpeg.


i am trying to send it to rtmp server named restreamer for start, here i tried to convert the buffer data and send it to rtmp link using ffmpeg commands, where i initially started to suceesfully save the file from webrtc to mp4 format for a duration of 2-3 minute.


after i tried to use webrtc to send video data for every 10 seconds and in server i tried to send it to rtmp but i cant send it, but i can see the connection of rtmp url and server is been taken place but i cant see the video i can see the logs in rtmp server as


2024-04-14 12:35:45 ts=2024-04-14T07:05:45Z level=INFO component="RTMP" msg="no streams available" action="INVALID" address=":1935" client="172.17.0.1:37700" path="/3d30c5a9-2059-4843-8957-da963c7bc19b.stream" who="PUBLISH"
2024-04-14 12:35:45 ts=2024-04-14T07:05:45Z level=INFO component="RTMP" msg="no streams available" action="INVALID" address=":1935" client="172.17.0.1:37716" path="/3d30c5a9-2059-4843-8957-da963c7bc19b.stream" who="PUBLISH"
2024-04-14 12:35:45 ts=2024-04-14T07:05:45Z level=INFO component="RTMP" msg="no streams available" action="INVALID" address=":1935" client="172.17.0.1:37728" path="/3d30c5a9-2059-4843-8957-da963c7bc19b.stream" who="PUBLISH" 


my frontend code


const handleSendVideo = async () => {
 console.log("start");
 
 if (!ws) {
 console.error('WebSocket connection not established.');
 return;
 }
 
 try {
 const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
 const mediaRecorder = new MediaRecorder(videoStream);
 
 const requiredFrameSize = 460800;
 const frameDuration = 10 * 1000; // 10 seconds in milliseconds
 
 mediaRecorder.ondataavailable = async (event) => {
 if (ws.readyState !== WebSocket.OPEN) {
 console.error('WebSocket connection is not open.');
 return;
 }
 
 if (event.data.size > 0) {
 const arrayBuffer = await event.data.arrayBuffer();
 const uint8Array = new Uint8Array(arrayBuffer);
 
 const width = videoStream.getVideoTracks()[0].getSettings().width;
 const height = videoStream.getVideoTracks()[0].getSettings().height;
 
 const numFrames = Math.ceil(uint8Array.length / requiredFrameSize);
 
 for (let i = 0; i < numFrames; i++) {
 const start = i * requiredFrameSize;
 const end = Math.min((i + 1) * requiredFrameSize, uint8Array.length);
 let frameData = uint8Array.subarray(start, end);
 
 // Pad or trim the frameData to match the required size
 if (frameData.length < requiredFrameSize) {
 // Pad with zeros to reach the required size
 const paddedData = new Uint8Array(requiredFrameSize);
 paddedData.set(frameData, 0);
 frameData = paddedData;
 } else if (frameData.length > requiredFrameSize) {
 // Trim to match the required size
 frameData = frameData.subarray(0, requiredFrameSize);
 }
 
 const dataToSend = {
 buffer: Array.from(frameData), // Convert Uint8Array to array of numbers
 width: width,
 height: height,
 pixelFormat: 'yuv420p',
 mode: 'SendRtmp'
 };
 
 console.log("Sending frame:", i);
 ws.send(JSON.stringify(dataToSend));
 }
 }
 };
 
 // Start recording and send data every 10 seconds
 mediaRecorder.start(frameDuration);
 
 console.log("MediaRecorder started.");
 } catch (error) {
 console.error('Error accessing media devices or starting recorder:', error);
 }
 };


and my backend


wss.on('connection', (ws) => {
 console.log('WebSocket connection established.');

 ws.on('message', async (data) => {
 try {
 const parsedData = JSON.parse(data);

 if (parsedData.mode === 'SendRtmp' && Array.isArray(parsedData.buffer)) {
 const { buffer, pixelFormat, width, height } = parsedData;
 const bufferArray = Buffer.from(buffer);

 await sendRtmpVideo(bufferArray, pixelFormat, width, height);
 } else {
 console.log('Received unknown or invalid mode or buffer data');
 }
 } catch (error) {
 console.error('Error parsing WebSocket message:', error);
 }
 });

 ws.on('close', () => {
 console.log('WebSocket connection closed.');
 });
 });
 const sendRtmpVideo = async (frameBuffer, pixelFormat, width, height) => {
 console.log("ffmpeg data",frameBuffer)
 try {
 const ratio = `${width}x${height}`;
 const ffmpegCommand = [
 '-re',
 '-f', 'rawvideo',
 '-pix_fmt', pixelFormat,
 '-s', ratio,
 '-i', 'pipe:0',
 '-c:v', 'libx264',
 '-preset', 'fast', // Specify the preset for libx264
 '-b:v', '3000k', // Specify the video bitrate
 '-loglevel', 'debug',
 '-f', 'flv',
 // '-flvflags', 'no_duration_filesize', 
 RTMPLINK
 ];


 const ffmpeg = spawn('ffmpeg', ffmpegCommand);

 ffmpeg.on('exit', (code, signal) => {
 if (code === 0) {
 console.log('FFmpeg process exited successfully.');
 } else {
 console.error(`FFmpeg process exited with code ${code} and signal ${signal}`);
 }
 });

 ffmpeg.on('error', (error) => {
 console.error('FFmpeg spawn error:', error);
 });

 ffmpeg.stderr.on('data', (data) => {
 console.error(`FFmpeg stderr: ${data}`);
 });

 ffmpeg.stdin.write(frameBuffer, (err) => {
 if (err) {
 console.error('Error writing to FFmpeg stdin:', err);
 } else {
 console.log('Data written to FFmpeg stdin successfully.');
 }
 ffmpeg.stdin.end(); // Close stdin after writing the buffer
 });
 } catch (error) {
 console.error('Error in sendRtmpVideo:', error);
 }
 };



Syndiquer tout le site
