Recherche avancée

Sur d’autres sites (11382)

• How Media Analytics for Piwik gives you the insights you need to measure how effective your video and audio marketing is – Part 2

  
  2 février 2017, par InnoCraft — Community

  In Part 1 we have covered some of the Media Analytics features and explained why you cannot afford to not measure the media usage on your website. Chances are, you are wasting or losing money and time by not making the most out of your marketing strategy this very second. In this part, we continue showing you some more insights you can expect to get from Media Analytics and how nicely it is integrated into Piwik.

  Video, Audio and Media Player reports

  Media Analytics adds several new reports around videos, audios and media players. They are all quite similar and give you similar insights so we will mainly focus on the Video Titles report.

  Metrics

  The above mentioned reports give you all the same insights and features so we will mainly focus on the “Video Titles” report. When you open such a report for the first time, you will see a report like this with the following metrics :

  

  • “Impressions”, the number of times a visitor has viewed a page where this media was included.
  • “Plays”, the number of times a visitor watched or listened to this media.
  • “Play rate”, the percentage of visitors that watched or listened to a media after they have visited a page where this media was included.
  • “Finishes”, the percentage of visitors who played a media and finished it.
  • “Avg. time spent”, the average amount of time a visitor spent watching or listening to this media.
  • “Avg. media length” the average length of a video or audio media file. This number may vary for example if the media is a stream.
  • “Avg completion” the percentage of how much visitors have watched of a video.

  If you are not sure what a certain metric means, simply hover the metric title in the UI and you will get a detailed explanation. By changing the visualization to the “All Columns Table” in the bottom of the report, you get to see even more metrics like “Plays by unique visitors”, “Impressions by unique visitors”, “Finish rate”, “Avg. time to play aka hesitation time”, “Fullscreen rate” and we are always adding more metrics.

  These metrics are available for the following reports :

  • “Video / Audio Titles” shows you all metrics aggregated by video or audio title
  • “Video / Audio Resource URLs” shows you all metrics aggregated by the video or audio resource URL, for example “https://piwik.org/media.mp4”.
  • “Video / Audio Resource URLs grouped” removes some information from the URLs like subdomain, file extensions and other information to get aggregated metrics when you provide the same media in different formats.
  • “Videos per hour in website’s timezone” lets you find out how your media content is consumed depending on the hour of the day. You might realize that your media is consumed very differently in the morning vs at night.
  • “Video Resolutions” lets you discover how your video is consumed depending on the resolution.
  • “Media players” report is useful if you use different media players on your websites or apps and want to see how engagement with your media compares by media player.

  Row evolution

  At InnoCraft, we understand that static numbers are not so useful. When you see for example that yesterday 20 visitors played a certain media, would you know whether this is good or bad ? This is why we always give you the possibility to see the data in relation to the recorded data in the past. To see how a specific media performs over time, simply hover a media title or media resource URL and click on the “Row Evolution” icon.

  

  Now you can see whether actually more or less visitors played your chosen video for the selected period. Simply click on any metric name and the chosen metrics will be plotted in the big evolution graph.

  This feature is similar to the Media Overall evolution graph introduced in Part 1, but shows you a detailed evolution for an individual media title or resource.

  Media details

  Now that you know some of the most important media metrics, you might want to look a bit deeper into the user behaviour. For example we mentioned before the “Avg time spent on media” metric. Such an average number doesn’t let you know whether most visitors spent about the same time watching the video, or whether there were many more visitors that watched it only for a few seconds and a few that watched it for very long.

  One of the ways to get this insight is by again hovering any media title or resource URL and clicking on the “Media details” icon. It will open a new popup showing you a new set of reports like these :

  

  The “Time spent watching” and “How far visitors reached in the media” bar charts show you on the X-Axis how much time each visitor spent on watching a video and how far in the video they reached. On the Y-Axis you see the number of visitors. This lets you discover whether your users for example jump often to the middle or end of the video and which parts of your video was seen most often.

  

  The “How often the media was watched in a certain hour” and “Which resolutions the media was watched” is similar to the reports introduced in Part 1 of the blog post. However, this time instead of showing aggregated video or audio content data, they display data for a specific media title or media resource URL.

  Segmented audience log

  In Part 1 we have already introduced the Audience Log and explained that it is useful to better understand the user behaviour. Just a quick recap : The Audience Log shows you chronologically every action a specific visitor has performed on your website : Which pages they viewed, how they interacted with your media, when they clicked somewhere, and much more.

  By hovering a media title or a media resource and then selecting “Segmented audience log” you get to see the same log, but this time it will show only visitors that have interacted with the selected media. This will be useful for you for example when you notice an unusual value for a metric and then want to better understand why a metric is like that.

  

  Applying segments

  Media Analytics lets you apply any Piwik segment to the media reports allowing you to dice your visitors or personas multiplying the value that you get out of Media Analytics. For example you may want to apply a segment and analyze the media usage for visitors that have visited your website or mobile app for the first time vs. recurring visitors. Sometimes it may be interesting how visitors that converted a specific goal or purchased something consume your media, the possibilities are endless. We really recommend to take advantage of segments to understand your different target groups even better.

  The plugin also adds a lot of new segments to your Piwik letting you segment any Piwik report by visitors that have viewed or interacted with your media. For example you could go to the “Visitors => Devices” report and apply a media segment to see which devices were used the most to view your media. You can also combine segments to see for example how often your goals were converted when a visitor viewed media for longer than 10 seconds after waiting for at least 20 seconds before playing your media and when they played at least 3 videos during their visit.

  Widgets, Scheduled Reports, and more.

  This is not where the fun ends. Media Analytics defines more than 15 new widgets that you can add to your dashboard or export it into a third party website. You can set up Scheduled Reports to receive the Media reports automatically via email or sms or download the report to share it with your colleagues. It works also very well with Custom Alerts and you can view the Media reports in the Piwik Mobile app for Android and iOS. Via the HTTP Reporting API you can fetch any report in various formats. The plugin is really nicely integrated into Piwik we would need some more blog posts to fully cover all the ways Media Analytics advances your Piwik experience and how you can use and dig into all the data to increase your conversions and sales.

  How to get Media Analytics and related features

  You can get Media Analytics on the Piwik Marketplace. If you want to learn more about this feature, you might be also interested in the Media Analytics User Guide and the Media Analytics FAQ.

• NodeJS : Fail to write byte array input from webcam to ffmpeg spawn process

  23 mai 2024, par Thanesh Prabaghan

  I'm using NodeJS server to display an HTML page which has webcam option. Once user visited to my NodeJS server, it will serve html page. User can allow webcam option and see webcam view on the page.

  


  In the backend, I send webcam stream (byte array) using socket.io. I receive byte array successfully in backend with the help of socket.io. BUT MY PROBLEM IS, I can't pipe this byte array to the ffmpeg spawn process. I don't know how to properly pipe this data to the ffmpeg. Once it done, all my problem will be solved.

  


  On the other side, I have node-media-server as RTMP server to publish this stream to VLC player and other devices. Kindly help me to complete this task. I will attach all my code to this question. Kindly run this in your environment and answer the question.

  


  MY HTML PAGE

  


  &#xA;&#xA;  &#xA;    &#xA;      &#xA;&#xA;      &#xA;&#xA;      <code class="echappe-js">&lt;script src=&quot;https://cdn.socket.io/4.7.5/socket.io.min.js&quot; &amp;#xA;        integrity=&quot;integrity_code&quot; &amp;#xA;        crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;&#xA;    &#xA;    &#xA;      
  &#xA;        &#xA;&#xA;        &lt;script&gt;&amp;#xA;          const socket = io(&amp;#x27;http://localhost:8080/&amp;#x27;);&amp;#xA;          var video = document.getElementById(&quot;video&quot;);&amp;#xA;&amp;#xA;          if (navigator.mediaDevices.getUserMedia) {&amp;#xA;            navigator.mediaDevices.getUserMedia({ video: true, audio:true })&amp;#xA;            .then(function (stream) {&amp;#xA;              const recorder = new MediaRecorder(stream);&amp;#xA;&amp;#xA;              recorder.ondataavailable = event =&gt; {&amp;#xA;                socket.emit(&amp;#x27;VideoStream&amp;#x27;, event.data);&amp;#xA;              };&amp;#xA;              recorder.start(1000);      &amp;#xA;              video.srcObject = stream;&amp;#xA;            }).catch(function (error) {&amp;#xA;              console.log(&quot;Something went wrong!&quot;);&amp;#xA;            });&amp;#xA;         }  &amp;#xA;       &lt;/script&gt;&#xA;    &#xA;&#xA;&#xA;
  

  


  FFMPEG IMPLEMENTATION

  


  const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
const path = require('node:path'); 
const { spawn } = require('node:child_process');

let cmd = spawn('ffmpeg.exe', [
    '-c:v', 'copy', '-preset', 'ultrafast', '-tune', 'zerolatency',
    '-c:a', 'aac', '-strict', '-2', '-ar', '44100', '-b:a', '64k',
    '-y',
    '-use_wallclock_as_timestamps', '1',
    '-async', '1',
    '-flush_packets', '1',
    '-rtbufsize', '1000',
    '-bufsize', '1000',
    '-f', 'flv',
     '-i','-',
    'rtmp://localhost:1935',
  ]);

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + 'index.html'));
});

io.on('connection', (socket) => {
  socket.on("VideoStream", (data) => {
    cmd.stdin.write(data);
  });
});

server.listen(8080, () => {
  console.log('listening on *:8080');
});

```
**NODE MEDIA SERVER IMPLEMENTATION**

```
const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config)
nms.run();
```




  


• Convert Blob audio file to mp3 type in typescript

  6 avril 2022, par I. Albuquerque

  I'm trying to convert a blob audio file to .mp3 type which is generated from MediaRecorder it is returning with webm type and I have tried other types in MimeType(attribute in MediaRecorder to set the type) but they are not supported so I have tried ffmpeg npm library but it was asking for path of the file but i'm not saving it so that also didn't work for me. Any suggestion and answer that will help !!

  


  Here is how i get audio

  


  getAudio(){
  navigator.mediaDevices.getUserMedia({ audio: true})
    .then( stream => {
      console.log(stream)
      this.mediaRecord = new MediaRecorder(stream)

      this.mediaRecord.ondataavailable = (data: { data: any; }) => {
        console.log(data)
        this.chunks.push(data.data)
      }

      this.mediaRecord.onstop = () => {
        const blob = new Blob(this.chunks, { type: 'audio/mp3'})
        const reader = new window.FileReader()
        reader.readAsDataURL(blob)
        reader.onloadend = () => {
          const teste:any = this.$el.querySelector('#teste')
          teste.src = reader.result //render.result e o local onde o audio fica armazenado
          this.ArquivoAudio = blob
          console.log(reader.result)
        }
      }
    }, err => {
      console.log(err)
      alert('voce deve permitir a captura de audio')
    })
},