Recherche avancée

Sur d’autres sites (3360)

• Video streamign with FFMpeg and Nest.js+Next.js

  17 septembre 2024, par Aizen

  Here 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 = [];&#xA;        &#xA;        await this.createDirectories(tempDir);        &#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;1280x720&#x27;, &#x27;720p.mp4&#x27;));&#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;854x480&#x27;, &#x27;480p.mp4&#x27;));&#xA;        console.log(&#x27;OUTUPT FILES SERVICE: &#x27;,outputFiles);&#xA;        &#xA;        return outputFiles;&#xA;&#xA;    }catch(err){&#xA;        console.error(&#x27;VideoFormatterService Error: &#x27;,err);&#xA;        &#xA;    }&#xA;}&#xA;&#xA;private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{&#xA;    const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;&#xA;    return new Promise(async(resolve,reject)=>{&#xA;        const height = resolution.split(&#x27;x&#x27;)[1];&#xA;        console.log(&#x27;HIEGHT: &#x27;,height);&#xA;        &#xA;        const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;&#xA;        const outputPath = join(outputDir, outputFileName);&#xA;        const isExists = await fs.access(outputPath).then(() => true).catch(() => false);&#xA;        if(isExists){ &#xA;            console.log(`File already exists: ${outputPath}`);&#xA;            return resolve(outputPath)&#xA;        };&#xA;        ffmpeg(inputPath)&#xA;        .size(`${resolution}`)&#xA;        .videoCodec(&#x27;libx264&#x27;) // Кодек H.264&#xA;        .audioCodec(&#x27;aac&#x27;) &#xA;        .output(outputPath)&#xA;        .on(&#x27;end&#x27;,()=>resolve(outputPath))&#xA;        .on(&#x27;error&#x27;,(err)=>reject(err))&#xA;        .run()&#xA;            &#xA;    })&#xA;}&#xA;&#xA;private async createDirectories(temp:string){&#xA;    try{&#xA;        const dir720p = `${temp}/720p`;&#xA;        const dir480p = `${temp}/480p`;&#xA;        const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);&#xA;        const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);&#xA;        if(dir720pExists &amp;&amp; dir480pExists){&#xA;            console.log(&#x27;FILES ALIVE&#x27;);&#xA;            return;&#xA;        }&#xA;        if (!dir720pExists) {&#xA;            await fs.mkdir(dir720p, { recursive: true });&#xA;            console.log(&#x27;Папка 720p создана&#x27;);&#xA;        }&#xA;        &#xA;        if (!dir480pExists) {&#xA;            await fs.mkdir(dir480p, { recursive: true });&#xA;            console.log(&#x27;Папка 480p создана&#x27;);&#xA;        }&#xA;    } catch (err) {&#xA;        console.error(&#x27;Ошибка при создании директорий:&#x27;, err);&#xA;    }&#xA;}&#xA;</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..

  


• Piwik 1.12, New Features, API Improvements, Stability — The Last Piwik 1.X Release

  30 mai 2013, par Piwik team — Development

  We are very excited to announce the immediate availability of Piwik v1.12 !

  • Download Link
  • How to update Piwik ?
  • List of all tickets closed : Changelog

  Piwik v1.12 is a major new release with four big new features, seven smaller new features, several API improvements and all together 82 tickets fixed. This is also the last major 1.X release, which means after this release we will be working on releasing Piwik 2.0. This also means that you should upgrade to PHP 5.3 or higher if you haven’t already, since Piwik 2.0 will only support PHP 5.3 and above.

  Finally, this release contains two breaking changes to the API. If you use the Piwik API click here or scroll down to see if you’re affected.

  Table of Contents :

  1. New Big Feature – Beta Release Channel
  2. New Big Feature – Segment Editor
  3. New Big Feature – Page Speed Reports
  4. New Big Feature – Device Detection Reports
  5. Other Improvements
  6. API Changes and Improvements
  7. What we’re working on
  8. Participate in Piwik
  9. Summary

  New Big Feature – Beta Release Channel

  

  For those of you who want to help test Piwik 2.0-beta releases as soon as they come up, we’ve made it easier to use our beta releases. Navigate to the Settings > General Settings page and click the The latest beta release radio button. You will then be able to upgrade to beta releases.

  This isn’t truly a major feature, but we think it’s just as important because it will allow us to create more beta releases and thus catch more bugs before we make a final release. This means more releases and more stability for you.

  New Big Feature – Segment Editor

  

  The Segment Editor is a long-awaited new feature that allows you to view, save and edit your segments.

  Piwik has supported segmentation (filtering visits and reports by arbitrary criteria, like browser family) for quite some time now, but it has never been possible to visually create and modify them. Nor could they be saved for later recall.

  Thanks to the eighty individuals and company who funded this feature, it is now possible to :

  • visually segment your visitors, instead of creating URLs.
  • save segments and easily switch between them, instead of remembering URLs.
  • get suggestions for segments that might be helpful to view.
  • learn more in the Segmentating Analytics reports user documentation..

  New Big Feature – Page Speed Reports

  You can now see how long it took your webserver to generate and send pages over HTTP through the new Avg. Generation Time metric.

  This metric can be viewed on both the Pages and Page Titles reports :

  

  And the average page generation time for all the pages in your website/webapp is displayed on the visitors overview :

  

  You can use this new information to benchmark your webapp and web server.

  New Big Feature – Device Detection Reports

  Piwik 1.12 also includes a new plugin that provides reports on the device types (tablet, desktop, smartphone, etc.), device brands (Apple, Google, Samsung, etc.) and device models (iPad, Nexus 7, etc.) your visitors use to access your website :

  

  The new plugin also enhances Operating system detections (detecting sub versions of Linux, Windows, and more).

  Note : This plugin is not enabled by default, but will be in Piwik 2.0. If you want to view these reports now, you can activate the plugin in the Installed Plugins admin page. Navigate to Visitors > Devices to see the new reports. You may also use the new (beta) ‘Device type’.

  The new plugin was developed with the support of Clearcode.cc our technology partner

  

  Other improvements

  Majestic SEO Metrics

  

  We’ve added two new SEO metrics to the SEO widget, both of which are calculated by MajesticSEO.com. These metrics will tell you the number of external backlinks (the number of links to your site from other sites) and the number of referrer domains (the number of domains that link to your site).

  We thank the team at Majestic for their support and hard work in bringing you these metrics to your Piwik dashboards !

  Real-time Visitor Count Dashboard Widget

  

  There is now a simple new widget you can use to see the number of visitors, visits and actions that occurred in the last couple minutes. We call it the Real Time Visitor Counter !

  New segment parameter : siteSearchKeyword.

  There is now a new segment parameter you can use to segment your visits : siteSearchKeyword. This parameter will let you select visits that had site searches with a specific keyword.

  Ignore URL letter case when importing log files.

  We’ve added a new option to the log import script, –force-lowercase-path. When used, the importer will change URL paths to lowercase before tracking them. This way http://domain.com/MY/BLOG will be treated the same as http://domain.com/my/blog.

  Updated ISP Names

  

  We’ve also modified the Providers report so prettier and more up-to-date names of ISPs are displayed.

  Customize the background/text/axis color of graphs.

  

  It is now possible to change the background color, text color and/or axis color of the graph images generated by the ImageGraph plugin. To access this functionality, use the following URL query parameters when generating an image :

  • backgroundColor
  • textColor
  • axisColor

  For example :

  http://demo.piwik.org/index.php?module=API&method=ImageGraph.get&idSite=7&apiModule=UserSettings&apiAction=getBrowser&token_auth=anonymous&period=day&date=2013-03-21,2013-04-19&language=en&width=779&height=150&fontSize=9&showMetricTitle=0&aliasedGraph=1&legendAppendMetric=0&backgroundColor=efefef&gridColor=dcdcdc&colors=cb2026

  Send your users to a custom URL after they logout.

  If you manage a Piwik installation with many users and you want to send them to a custom page or website after they log out of Piwik, you can now specify the URL to redirect users after they log out.

  API Changes and Improvements

  BREAKING CHANGE – renamed segment parameters.

  The following segment parameters have been renamed :

  • continent renamed to : continentCode
  • browserName renamed to : browserCode
  • operatingSystem renamed to : operatingSystemCode
  • lat renamed to : latitude
  • long renamed to : longitude
  • region renamed to : regionCode
  • country renamed to : countryCode
  • continent renamed to : continentCode

  If you use one of the old segment parameter names, Piwik will throw an exception, so you should notice when you’re using an old name.

  BREAKING CHANGE – changes to the input & output of the Live.getLastVisitsDetails method.

  The following changes were made to the Live.getLastVisitsDetails API method :

  • The method no longer uses the maxIdVisit query parameter. It has been replaced by the filter_offset parameter.
  • Site search keywords are now displayed in a <siteSearchKeyword> element. They were formerly in <pageTitle> elements.
  • Custom variables with page scope now have ‘Page’ in their element names when displayed. For example, <customVariablePageName1>, <customVariablePageName2>, etc.

  Filter results of MultiSites.getAll by website name.

  It is now possible to filter the results of MultiSites.getAll by website name. To do this, set the pattern query parameter to the desired regex pattern.

  Get suggested values to use for a segment parameter.

  The new API method API.getSuggestedValuesForSegment can now be used to get suggested values for a segment parameter. This method will return a list of the most seen values (in the last 60 days) for a certain segment parameter. So for browserCode, this would return the codes for the browsers most visitors used in the last 60 days.

  Use extra tracking query parameters with the JS tracker (such as ‘lat’ & ‘long’).

  We’ve added a new method to the JavaScript tracker named appendToTrackingUrl. You can use this method to add extra query parameters to a tracking request, like so :

  _paq.push(['appendToTrackingUrl', 'lat=X&long=Y']);

  What we’re working on

  As we said above, Piwik v1.12 is the last in the 1.X series of releases. This means we are now officially working on Piwik 2.0.

  Piwik 2.0 will be a big release, to be sure, but it’s going to bring you more than just a couple new features and a bag of bug fixes. For Piwik 2.0 we will be revisiting the user needs and the ideals that originally prompted us to create Piwik in order to build our vision of the future of web analytics.

  Piwik 2.0 won’t just be a bigger, better web app, but a new platform for observing and analyzing the things that matter to you.

  Participate in Piwik

  Are you a talented developer or an experienced User Interface designer ? Or maybe you like to write documentation or are a marketing guru ?

  If you have some free time and if you want to contribute to one of the most awesome open source projects around, please get in touch with the Piwik team, or read this page to learn more…

  Summary

  For the full list of changes in Piwik 1.12 check out the Changelog.

  Thank you to the core developers, all the beta testers and users, our official supporters, the translators & everyone who reported bugs or feature requests. Also thank you to softwares we use, and the libraries we use.

  If you are a company and would like to help an important project like Piwik grow, please get in touch, it means a lot to us. You can also participate in the project —

  –> if you like what you read, please tell your friends and colleagues or write on your website, blog, forums, stackoverflow, etc. <–
  

  Peace. Enjoy !

• Announcing our latest open source project : DeviceDetector

  30 juillet 2014, par Stefan Giehl — Community, Development, Meta, DeviceDetector

  This blog post is an announcement for our latest open source project release : DeviceDetector ! The Universal Device Detection library will parse any User Agent and detect the browser, operating system, device used (desktop, tablet, mobile, tv, cars, console, etc.), brand and model.

  Read on to learn more about this exciting release.

  Why did we create DeviceDetector ?

  Our previous library UserAgentParser only had the possibility to detect operating systems and browsers. But as more and more traffic is coming from mobile devices like smartphones and tablets it is getting more and more important to know which devices are used by the websites visitors.

  To ensure that the device detection within Piwik will gain the required attention, so it will be as accurate as possible, we decided to move that part of Piwik into a separate project, that we will maintain separately. As an own project we hope the DeviceDetector will gain a better visibility as well as a better support by and for the community !

  DeviceDetector is hosted on GitHub at piwik/device-detector. It is also available as composer package through Packagist.

  How DeviceDetector works

  Every client requesting data from a webserver identifies itself by sending a so-called User-Agent within the request to the server. Those User Agents might contain several information such as :

  • client name and version (clients can be browsers or other software like feed readers, media players, apps,…)
  • operating system name and version
  • device identifier, which can be used to detect the brand and model.

  For Example :

  Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36

  This User Agent contains following information :

  Operating system is Android 4.4.2, client uses the browser Chrome Mobile 32.0.1700.99 and the device is a Google Nexus 5 smartphone.

  What DeviceDetector currently detects

  DeviceDetector is able to detect bots, like search engines, feed fetchers, site monitors and so on, five different client types, including around 100 browsers, 15 feed readers, some media players, personal information managers (like mail clients) and mobile apps using the AFNetworking framework, around 80 operating systems and nine different device types (smartphones, tablets, feature phones, consoles, tvs, car browsers, cameras, smart displays and desktop devices) from over 180 brands.

  Note : Piwik itself currently does not use the full feature set of DeviceDetector. Client detection is currently not implemented in Piwik (only detected browsers are reported, other clients are marked as Unknown). Client detection will be implemented into Piwik in the future, follow #5413 to stay updated.

  Performance of DeviceDetector

  Our detections are currently handled by an enormous number of regexes, that are defined in several .YML Files. As parsing these .YML files is a bit slow, DeviceDetector is able to cache the parsed .YML Files. By default DeviceDetector uses a static cache, which means that everything is cached in static variables. As that only improves speed for many detections within one process, there are also adapters to cache in files or memcache for speeding up detections across requests.

  How can users help contribute to DeviceDetector ?

  Submit your devices that are not detected yet

  If you own a device, that is currently not correctly detected by the DeviceDetector, please create a issue on GitHub
  In order to check if your device is detected correctly by the DeviceDetector go to your Piwik server, click on ‘Settings’ link, then click on ‘Device Detection’ under the Diagnostic menu. If the data does not match, please copy the displayed User Agent and use that and your device data to create a ticket.

  Submit a list of your User Agents

  In order to create new detections or improve the existing ones, it is necessary for us to have lists of User Agents. If you have a website used by mostly non desktop devices it would be useful if you send a list of the User Agents that visited your website. To do so you need access to your access logs. The following command will extract the User Agents :

  zcat ~/path/to/access/logs* | awk -F'"' '{print $6}' | sort | uniq -c | sort -rn | head -n20000 > /home/piwik/top-user-agents.txt

  If you want to help us with those data, please get in touch at devicedetector@piwik.org

  Submit improvements on GitHub

  As DeviceDetector is free/libre library, we invite you to help us improving the detections as well as the code. Please feel free to create tickets and pull requests on Github.

  What’s the next big thing for DeviceDetector ?

  Please check out the list of issues in device-detector issue tracker.

  We hope the community will answer our call for help. Together, we can build DeviceDetector as the most powerful device detection library !

  Happy Device Detection,