Recently, I sorted out some independent projects and considered recording my feelings in the form of audio and video. At first, I used the screen recording software of Mac system, and later I planned to develop an online audio and video recording tool with web front-end technology.

Before I can do anything, I must first be stimulated by something concrete, to develop a vague and unintelligible concept, to think deeply and discover that the concept has some great or small significance for me or for the environment, thus arousing me to have the power of action to make the concept into reality. Maybe I don’t know what I can achieve in the end, so I’ll do a feasibility study first and revise the concept as I go along, from vague to clear. In this cycle, a concept may be divided into many sub-concepts. Study and revise again, finally understand what, also more firm.

Technical feasibility

After reading a lot of documents published by authoritative organizations and absorbing previous attempts. After analysis, the current Web front-end technology stack can realize online recording of audio and video. I have divided the recordable media sources into three categories. The first category is the most commonly used — camera and microphone sources. The second type is the screen display media source, that is, the screen recording ability, screen recording includes the recording of the entire screen and the recording of a single application window; The third category is to return HTML5 element media sources, which can record HTML5 elements such as video and canvas as media sources.

Understanding the boundaries of current Web front-end technology, combined with my original desire to record and share my thoughts in audio and video format, requires screen recording, video recording and audio recording. That is to say, my requirements relate to the first two of the above three categories of media sources — camera, microphone and screen display. This allows me to record what I’m doing on my computer, occasionally using a camera and microphone to record video and audio 📹.

Once the goal is clear again, try to make a demo and use Chrome as a debugging tool, ignoring other browser compatibility issues and solutions. Just to experience the latest front-end technology. Note that only web pages accessed using HTTPS have the permission to access media device sources. My blog site can be accessed using either HTTP or HTTPS.

Provide Web API details for reference:

  1. Media Capture and Streams API (Media Stream)
  2. MediaDevices.getUserMedia()
  3. MediaStream Recording API

Cut the bullshit and put the code in

Here are the utility functions in my code to get the audio and video stream.

function getUserMediaStream(constraints, cb) {
  navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => { cb(null, stream); })
    .catch(err => { cb(err, null); });
}
Copy the code

Here are the utility functions defined in my code to get the screen display media stream.

function getDisplayMediaStream(cb) { navigator.mediaDevices.getDisplayMedia() .then(stream => { cb(null, stream); }) .catch(err => { cb(err, null); })}Copy the code

The following is the buffer to dataUrl utility function defined in my code.

function bufferToDataUrl(buffer, cb) {
  let blob = new Blob(buffer, { type: "video/webm" });
  let reader = new FileReader();
  reader.onload = function() { cb(reader.result) };
  reader.readAsDataURL(blob);
}
Copy the code

Below is the dataUrl file transfer utility function defined in my code.

function dataUrlToFile(dataUrl) {
  let binary = atob(dataUrl.split(",")[1]);
  let data = [];
  for (var i = 0; i < binary.length; i++)
    data.push(binary.charCodeAt(i));

  return new File([new Uint8Array(data)], "recorded-video.webm", {
    type: "video/webm"
  });
}
Copy the code

Write in the last

I find that writing articles is one of the best ways to organize ideas. When the flash of light in the brain, like a cat suddenly appeared to a basket of wool ball 🧶 knocked to the ground. When I stepped curiously into this possibly fleeting light, I was like a cat jumping to the ground. When I want to explore this insight, just like the dishonest cat 🐱 to roll the ball of wool on the ground 🧶 get seven and eight fold chaos. When I try to calm down 🤫 (I know I can’t control my emotions when inspiration comes) and try to get my thoughts out in words, it’s really damn painful to be honest. This process is similar to my need to sort out the messy wool that 🐱 cat has scattered all over the floor. The most difficult and crucial part is finding where the thread ends are. Putting ideas into words is the process of finding threads and smoothing the wool.

I needed more patience, and the thread got knotted. It’s like the idea suddenly disappears and you forget where you just thought of it (apart from psychological factors, I don’t know if it has anything to do with physical factors). I could only retrace my steps from the source of my thoughts, hoping to revive them and untangle them.

I’ve found that an easier way to organize my thoughts than writing is to doodle — a brain map. I draw whatever COMES to mind, and what I end up with is a continuum of ideas. The adorable child still retains the primitive instinct of a primitive man to paint inside the cave walls.

Even more difficult than writing text is recording video, because video includes audio description, visual description and text description, which is one more track than the first two (text and graffiti). To be honest, even when an idea is so familiar in my head that I am immediately asked to describe it with my voice, I am momentarily speechless. Any skill that requires hard work takes practice.

Words, sounds, pictures, each track can be singled out as an independent form of expressing ideas. And do they add or subtract together? At present, most of my articles have two forms of communication: text and picture, but sound is missing. This is my original intention to research and develop an online audio and video processing tool that I think is easy to use.

Finally, I like the inquisitive cat 🐱, who often intrudes into me unannounced, even if it knocks over a floor of wool 🧶, but also brings something to me.

  1. You know what’s right and what’s wrong? !
  2. You know the only one who can decide what you do is you? !
  3. Did you know that most people’s attitude to everything about you is apathy, at best a spectator mentality? !

What elude discussion is the truth, which needs careful consideration. Pending is the dispute, need to take a long-term view.