How to Create Screen Recorder Website || With Advance Features || In Blogger || By Techno Sahil ||

Hello Friends तो जैसा कि आप लोग जानते हैं कि बहुत सारे लोग Blogging के द्वारा पैसे गवा रहे है। अपने पैसों को बेस्ट कर रहे हैं। उन्हें समझ नहीं आ रहा है कि कैसे Blogger पर Traffic लाया, कैसे Adsense का Approval ले।



तो ऐसे समय में मैंने आपके लिए Screen Recorder Tool Website का Script  लाया है। इसके बारे में आप Article लिख सकते है की कैसे लोगो इसे Use करना है और इसे अपने Blogger के Site पर लगाकर आप पैसे कमा सकते हैं। इस तरह की Website पर जल्दी Adsense Approval होता है। तो कैसे  आपको इसे Blogger में Create करना है और कैसे Code को Copy करना है यह सब Process मैं आपको इस Article में बताऊंगा।

So friends इस कोड को Copy करने के लिए आपको नीचे दिए गए Steps को पूरा करना होगा।


Screen Recorder Tool

बहुत सारे दोस्तों को शायद पता भी नाम हो की ये Screen Recorder क्या होता है? तो मैं आपको बता देना चाहता हूँ की किसी भी Blog Post या Blog Page में जो Source Code उपलब्ध करवाया जाता है. और उसे जिस Format में Post में Add किया जाता है उसे हम Screen Recorder के नाम से जानते है.

पंरतु अब समय के साथ साथ सब कुछ Advance होता जा रहा है. ऐसे में अब Normal Screen Recorder को भी Advance बना दिया गया है. अब इसमें आपको Screen Recorder with 3d Background भी देखने को मिल जाता है. और इसका फायदा यह है की सभी Codes तो अच्छे दिखते ही है लेकिन उसके साथ-साथ Text Area Box और Site भी अच्छे दिखते है। जिसके कारण Sites पर ज्यादा से ज्यादा Traffic आते हैं



इन्हें भी पढ़े:-




Steps To Get The Code:-

● नीचे दिए गए Download Button पर Click करें

तो यह आपको एक नये Page पर Redirect कर देगा

● अब आपको नीचे से Scroll करके Continue Download पर Click करना है।

● अब आप नीचे Scroll करके Captcha को Solve कर दें और Click Here To Download पर Click करें।

● फिर आपको Countdown Timer मतलब की उल्टी गिनती करता हुआ बक्सा एक गोल घेरे में दिख रहा होगा तब तक Wait करें और फिर Get Link पर Click करें।

● अब आपको Blue या Green Colour के बक्से में Code दिख रहा होगा।

● अब आप Code को Copy कर ले।


 <!DOCTYPE html>
<html>
<head>
  <title>[Best] Online Screen Recorder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="A free online screen recorder is one of the best tools to capture a screen in just a couple of clicks. No software installation needed. Use our online video recorder for free as many times as you want – no need to pay anything!"/>
	<meta name="robots" content="index,follow" />
	<meta name="keywords" content="A free online screen recorder is one of the best tools to capture a screen in just a couple of clicks. No software installation needed. Use our online video recorder for free as many times as you want – no need to pay anything!" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
  <style>
  * {
margin: 0;
padding: 0;
}

.mt-5, .my-5 {
    margin-top: 0rem!important;
}

#hd {    
  width:100%;    
  height:390px;      
  margin:0 0 50px 0;    
  }  
    
h1 {
  color: red;
}
    body {
  color: blue;
}
  </style>
</head>

<body>
   <div style="position: relative; background-image: linear-gradient(to right, #e1ed00, #c2ed00, #96ed00, #4bed00, #00ed00); min-height: 99vh;">
       <center>
            <div class="container">
    <h1>[Best] Online Screen Recorder</h1>
              </center>
              <br />
    <h3 style="text-align:center;">
    A free online screen recorder is one of the best tools to capture a screen in just a couple of clicks. No software installation needed. Use our online video recorder for free as many times as you want – no need to pay anything! </h3>

    <hr />
          <br />
<center>
  <video width="320" height="240" autoplay></video><br>
<button id="shareScreen">Capture Screen</button>
<button id="rec" disabled>Record</button>
<button id="stop" disabled>Stop</button>
<a id="downloadLink" download="mediarecorder.webm" name="mediarecorder.webm" href></a>
<div id="error"></div>
</center>
         </div></div>
    <script src="
https://yourjavascript.000webhostapp.com/upload/e8726e5d9f147.js
"></script>

  
      <script id="rendered-js" >
var shareBtn = document.querySelector("button#shareScreen");
shareBtn.onclick = shareScreen;

var recBtn = document.querySelector("button#rec");
recBtn.onclick = onBtnRecordClicked;

var stopBtn = document.querySelector("button#stop");
stopBtn.onclick = onBtnStopClicked;

var videoElement = document.querySelector("video");
videoElement.style.backgroundColor = "black";

var downloadLink = document.querySelector("a#downloadLink");

var mediaRecorder;
var localStream = null;
document.getElementById("error").innerHTML = "";

function shareScreen() {
  console.log("shareScreen");
  document.getElementById("error").innerHTML = "";
  var screenConstraints = { video: true, audio: true };
  navigator.mediaDevices.getDisplayMedia(screenConstraints).then(function (screenStream) {
    /* use the screen & audio stream */

    var micConstraints = { audio: true };
    navigator.mediaDevices.getUserMedia(micConstraints).then(function (micStream) {
      /* use the microphone stream */

      //create a new stream in which to pack everything together
      var composedStream = new MediaStream();

      //add the screen video stream
      screenStream.getVideoTracks().forEach(function (videoTrack) {
        composedStream.addTrack(videoTrack);
      });

      //create new Audio Context
      var context = new AudioContext();

      //create new MediaStream destination. This is were our final stream will be.
      var audioDestinationNode = context.createMediaStreamDestination();

      //check to see if we have a screen stream and only then add it
      if (screenStream && screenStream.getAudioTracks().length > 0) {
        //get the audio from the screen stream
        const systemSource = context.createMediaStreamSource(screenStream);

        //set it's volume (from 0.1 to 1.0)
        const systemGain = context.createGain();
        systemGain.gain.value = 1.0;

        //add it to the destination
        systemSource.connect(systemGain).connect(audioDestinationNode);

      }

      //check to see if we have a microphone stream and only then add it
      if (micStream && micStream.getAudioTracks().length > 0) {
        //get the audio from the microphone stream
        const micSource = context.createMediaStreamSource(micStream);

        //set it's volume
        const micGain = context.createGain();
        micGain.gain.value = 1.0;

        //add it to the destination
        micSource.connect(micGain).connect(audioDestinationNode);
      }

      //add the combined audio stream
      audioDestinationNode.stream.getAudioTracks().forEach(function (audioTrack) {
        composedStream.addTrack(audioTrack);
      });

      //pass over to function that shows the stream and activates the recording controls
      onCombinedStreamAvailable(composedStream);

    }).catch(function (err) {
      console.log(err);
      document.getElementById("error").innerHTML = "You need a microphone to run the screen recorder";
    });
  }).catch(function (err) {
    console.log(err);
    document.getElementById("error").innerHTML = "You need to share your screen to run the screen recorder";
  });
}

function onCombinedStreamAvailable(stream) {
  console.log("onCombinedStreamAvailable");
  localStream = stream;

  videoElement.srcObject = localStream;
  videoElement.play();
  videoElement.muted = true;
  recBtn.disabled = false;
  shareBtn.disabled = true;
  stopBtn.disabled = true;
}

function onBtnRecordClicked() {
  console.log("onBtnRecordClicked");
  if (localStream != null) {
    mediaRecorder = new MediaRecorder(localStream);
    mediaRecorder.onstop = function () {
      console.log("mediaRecorder.onstop");

      var blob = new Blob(chunks, { type: "video/webm" });
      chunks = [];
      var videoURL = window.URL.createObjectURL(blob);

      downloadLink.href = videoURL;
      videoElement.src = videoURL;
      downloadLink.innerHTML = "Download";
    };

    let chunks = [];
    mediaRecorder.ondataavailable = function (e) {
      chunks.push(e.data);
    };

    mediaRecorder.start(2);
    console.log(mediaRecorder.state);

    recBtn.style.background = "red";
    recBtn.style.color = "black";

    recBtn.disabled = true;
    shareBtn.disabled = true;
    stopBtn.disabled = false;
  } else {
    console.log("localStream is missing");
  }
}

function onBtnStopClicked() {
  mediaRecorder.stop();
  console.log(mediaRecorder.state);
  console.log("recorder stopped");
  recBtn.style.background = "";
  recBtn.style.color = "";
}
//# sourceURL=pen.js
    </script>

</body>
</html>


अब रही बात की इस Script को कहां पर Paste करना है कैसे Screen Recorder Website बनाना है। तो Screen Recorder Website बनाने के लिए आपको नीचे दिए गए Steps को पुरा करना होगा।


Steps to Create Screen Recorder Website:-


● अब आप Blogger के Dashboard में जाए या फिर blogger लिखकर Search करे।

● आप New Blog पर Click करें और फिर नाम Create कर Subdomain Create करके Save करें।

● यहाँ तक आपका काम हो गया है आपका Blogger का Website Create हो गया है।

● अब आप Theme पर Click कर Simple Blog के Theme को Choose कर Apply करें।

● अब Arrow पर Click कर Mobile Settings में जाकर Mobile View से Desktop View कर दें।

● फिर से Arrow पर Click करके Switch to first generation classic theme पर Click करके Without A backup को Choose करे।

● अब Edit Html पर Click कर Select All करके Code को Paste कर दे।

● अब Save के Icon पर Click कर Save कर दे।

Congratulations your Screen Recorder Website has been created successfully.


Important Notice:- अगर आपको इसे अपने दुसरे Site पर लगाना है तो इस Tool का Use करे।

IFrame Generator Tool

निस्कर्ष:- तो दोस्तों आपको Screen Recorder Script For Blogger के बारे में यह Article  कैसा लगा Comment में जरूर बताएं। या आप भी किसी प्रकार का सुझाव देना चाहते हैं, तो आप नीचे Comment Box में अपनी राय हमसे Share कर सकते हैं।

Post a Comment

0 Comments