একটি ব্লব ইউআরএল কী এবং কেন এটি ব্যবহার করা হয়?

Question

ব্লব ইউআরএল নিয়ে আমার প্রচুর সমস্যা হচ্ছে।

আমি srcইউটিউবে একটি ভিডিও ট্যাগ অনুসন্ধান করছিলাম এবং আমি দেখতে পেলাম যে ভিডিওটি srcএমন ছিল:

src="blob:https://crap.crap"

আমি srcভিডিওটিতে থাকা ব্লব ইউআরএলটি খুললাম যা এটি একটি ত্রুটি দিয়েছে। আমি লিঙ্কটি খুলতে পারি না, তবে এটি srcট্যাগ নিয়ে কাজ করছিল । এটা কিভাবে সম্ভব?

প্রয়োজনীয়তা:

• ব্লব ইউআরএল কি?
• কেন এটি ব্যবহার করা হয়?
• আমি কি একটি সার্ভারে আমার নিজের ব্লব ইউআরএল তৈরি করতে পারি?
• আপনার যদি কোনও অতিরিক্ত বিশদ থাকে

Comments

এছাড়াও stackoverflow.com/q/14952052/632951

— Pacerier

মূলত হটলিংকটি নিষিদ্ধ করে। (

— ইউটিউবের

Answer 1

ব্লব ইউআরএল (রেফ ডাব্লু 3 সি , অফিসিয়াল নাম) বা অবজেক্ট-ইউআরএলস (রেফারেন্স এমডিএন এবং পদ্ধতির নাম) একটি ব্লব বা কোনও ফাইলের সাথে ব্যবহার করা হয় ।

src = "blob: https: //crap.crap " আমি ভিডিওটির এসআরসি-তে থাকা ব্লব ইউআরএলটি খুললাম এটি একটি ত্রুটি দিয়েছে এবং আমি খুলতে পারি না তবে কীভাবে সম্ভব এটি এসআরসি ট্যাগের সাথে কাজ করছি?

ব্লব ইউআরএলগুলি কেবল ব্রাউজারের মাধ্যমে অভ্যন্তরীণভাবে তৈরি করা যায়। URL.createObjectURL()ব্লব বা ফাইল অবজেক্টের একটি বিশেষ রেফারেন্স তৈরি করবে যা পরে ব্যবহার করে প্রকাশ করা যেতে পারে URL.revokeObjectURL()। এই ইউআরএলগুলি কেবলমাত্র স্থানীয়ভাবে ব্রাউজারের একক দৃষ্টিতে এবং একই সেশনে (যেমন পৃষ্ঠা / নথির জীবন) ব্যবহার করা যেতে পারে।

ব্লব ইউআরএল কী?
কেন এটি ব্যবহার করা হয়?

ব্লব ইউআরএল / অবজেক্ট ইউআরএল হ'ল একটি ছদ্ম প্রোটোকল যা ব্লব এবং ফাইলের অবজেক্টগুলিকে ইমেজ, বাইনারি ডেটার জন্য লিঙ্কগুলি ডাউনলোড করার জন্য এবং এমন কিছুর জন্য URL উত্স হিসাবে ব্যবহার করতে দেয়।

উদাহরণস্বরূপ, আপনি কোনও চিত্র অবজেক্ট কাঁচা বাইট-ডেটা হস্তান্তর করতে পারবেন না কারণ এটি কী করতে পারে তা এটি জানেন না। এটি ইউআরএল মাধ্যমে লোড করা উদাহরণ চিত্র (যা বাইনারি ডেটা হয়) প্রয়োজন। এটি উত্স হিসাবে একটি URL প্রয়োজন যে কোনও ক্ষেত্রে প্রযোজ্য। বাইনারি ডেটা আপলোড করার পরিবর্তে, এটি আবার কোনও URL এর মাধ্যমে পরিবেশন করুন কোনও সার্ভারের মাধ্যমে না গিয়ে সরাসরি ডেটা অ্যাক্সেস করতে সক্ষম হওয়ার জন্য অতিরিক্ত স্থানীয় পদক্ষেপ ব্যবহার করা ভাল।

এটি ডেটা-ইউআরআই-এর আরও ভাল বিকল্প যা বেস -64৪ হিসাবে এনকোড করা স্ট্রিংগুলি রয়েছে । ডেটা-ইউআরআইয়ের সমস্যাটি হ'ল প্রতিটি চর জাভাস্ক্রিপ্টে দুটি বাইট নেয়। এর উপরে বেস - 64 এনকোডিংয়ের কারণে একটি 33% যুক্ত করা হয়েছে। ব্লবগুলি খাঁটি বাইনারি বাইট-অ্যারে হয় যা ডেটা-ইউআরআইয়ের মতো কোনও উল্লেখযোগ্য ওভারহেড রাখে না, যা এগুলি হ্যান্ডেল করতে দ্রুত এবং ছোট করে তোলে।

আমি কি একটি সার্ভারে আমার নিজের ব্লব ইউআরএল তৈরি করতে পারি?

না, ব্লব ইউআরএল / অবজেক্ট ইউআরএলগুলি কেবল ব্রাউজারে অভ্যন্তরীণভাবে তৈরি করা যায়। আপনি ব্লবগুলি তৈরি করতে এবং ফাইল রিডার এপিআইয়ের মাধ্যমে ফাইল অবজেক্ট পেতে পারেন, যদিও বিএলএব-র অর্থ বাইনারি লার্জ ওবজেক্ট এবং বাইট-অ্যারে হিসাবে সঞ্চিত। কোনও ক্লায়েন্ট ডেটাটিকে অ্যারেবফার বা ব্লব হিসাবে প্রেরণের জন্য অনুরোধ করতে পারে। সার্ভারের খাঁটি বাইনারি ডেটা হিসাবে ডেটা প্রেরণ করা উচিত। বাইনারি অবজেক্টগুলি বর্ণনা করার জন্য ডেটাবেসগুলি প্রায়শই ব্লব ব্যবহার করে এবং সংক্ষেপে আমরা বাইট-অ্যারেগুলি সম্পর্কে মূলত কথা বলছি।

আপনার যদি অতিরিক্ত বিবরণ থাকে

আপনাকে বাইনারি ডেটা BLOB অবজেক্ট হিসাবে সজ্জিত করতে URL.createObjectURL()হবে , তার জন্য এর জন্য স্থানীয় ইউআরএল তৈরি করতে ব্যবহার করুন :

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes

মনে রাখবেন যে URLওয়েবকিট-ব্রাউজারগুলিতে উপসর্গ থাকতে পারে, তাই ব্যবহার করুন:

var url = (URL || webkitURL).createObjectURL(...);

Comments

গত 6 ঘন্টা ধরে আমি পিএইচপি AJAX থেকে পাস করা কোনও অবজেক্ট ইউআরএলটিকে একটি চিত্র ফাইলে পরিণত করার চেষ্টা করছি .. এটি আপনার বিবরণ না পড়া পর্যন্ত হয়নি যে আমি বুঝতে পেরেছি কেন এটি ফাইলটিতে কোনও ডেটা লিখছে না .. আপনার সংক্ষিপ্ত এবং পুঙ্খানুপুঙ্খ ব্যাখ্যা আমার দুর্দশার অবসান ঘটিয়েছে। ধন্যবাদ.

— পার্টেক

@ কে 3 এন কি উত্পন্ন URL এর পরিবর্তে ব্লব URL এর সত্য উত্স পাওয়া সম্ভব? নেস্ট ক্যামের লোকেরা তাদের নিজস্ব ক্যামেরা রেকর্ডিং থেকে বিরত রাখতে একটি ব্লব ইউআরএল উত্পন্ন করে

— অ্যালেক্স কুইটনি

আমার জন্য আলোকিতকরণ "BLOB এর অর্থ বাইনারি লার্জ ওবজেক্ট কেবল"

— ক্যানব্যাক্স

ব্লব / ফাইল অবজেক্টের বিষয়বস্তু পুনরুদ্ধার করা এবং এটি (চিত্র বা ভিডিও) যা কিছু ডাউনলোড করা সম্ভব?

— ডিএফএসফট

: এটি একটি ফোঁটা ভিডিও ডাউনলোড কিভাবে হতাশ লোকদের প্রাসঙ্গিক হতে পারে stackoverflow.com/q/42901942/1530508

— ApproachingDarknessFish

Answer 2

ক্লায়েন্ট ব্রাউজারে একটি JSON ফাইল ডাউনলোড করতে ব্লব ফাইল এপিআই এবং ডেটা এপিআইয়ের মধ্যে পার্থক্যটি দেখানোর জন্য এই জাভাস্ক্রিপ্ট ফাংশনটি তৈরি করে :

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
 */

var saveAsFile = function(fileName, fileContents) {
    if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
        var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else { // Alternative 2: using Data
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
            encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
} // saveAsFile

/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));

ফাংশন যেমন বলা হয় saveAsFile('out.json', jsonString);। এটি ব্রাউজার দ্বারা তত্ক্ষণাত্ স্বীকৃত একটি বাইটস্ট্রিম তৈরি করবে যা উত্পন্ন ফাইলটি সরাসরি ফাইল এপিআই ব্যবহার করে ডাউনলোড করবে URL.createObjectURL।

এর মধ্যে else, hrefউপাদান প্লাস ডেটা এপিআইয়ের মাধ্যমে প্রাপ্ত একই ফলাফলটি দেখা সম্ভব , তবে এটির বেশ কয়েকটি সীমাবদ্ধতা রয়েছে যা ব্লব এপিআইয়ের নয়।

Comments

আপনি কি টুইট থেকে কোনও ভিডিও সংরক্ষণের জন্য এটিকে মানিয়ে নিতে পারেন?

— লজিকব্লোক

Answer 3

ব্লব ইউআরএল কী? কেন এটি ব্যবহার করা হয়?

BLOB কেবল বাইট সিকোয়েন্স। ব্রাউজার এটিকে বাইট স্ট্রিম হিসাবে স্বীকৃতি দেয়। এটি উত্স থেকে বাইট স্ট্রিম পেতে ব্যবহৃত হয়।

একটি ব্লব অবজেক্টটি অপরিবর্তনীয়, কাঁচা ডেটার একটি ফাইলের মতো বস্তুর প্রতিনিধিত্ব করে। ব্লব এমন ডেটা উপস্থাপন করে যা জাভাস্ক্রিপ্ট-নেটিভ ফর্ম্যাটে অগত্যা নয়। ফাইল ইন্টারফেসটি ব্লবের উপর ভিত্তি করে ব্লব কার্যকারিতা উত্তরাধিকার সূত্রে প্রাপ্ত এবং ব্যবহারকারীর সিস্টেমে ফাইলগুলি সমর্থন করার জন্য এটি প্রসারিত করে।

আমি কি একটি সার্ভারে আমার নিজের ব্লব ইউআরএল তৈরি করতে পারি?

হ্যাঁ আপনি এখানে সার্ভারাল উপায়গুলি ব্যবহার করতে পারেন উদাহরণস্বরূপ http://php.net/manual/en/function.ibase-blob-echo.php চেষ্টা করুন

আরও পড়ুন

• https://developer.mozilla.org/pl/docs/Web/API/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://url.spec.whatwg.org/#urls

Comments

আমি কী বিএলওএল ইউআরএল ব্যবহার করে কোনও সুবিধা পেতে পারি?

— ওয়াকাস তাহির

আপনি পড়তে পারেন এই আপনার উত্তর পেতে। স্পষ্টতই এখানে বিভিন্ন উপকারিতা আছে

— রবার্ট

আপনি BLOB- এর সাথে অবজেক্ট-ইউআরএল মিশ্রণ করছেন। অবজেক্ট-ইউআরএল হ'ল বিডিব্লুগুলিকে ইউআরআই উত্স হিসাবে ব্যবহারের অনুমতি দেওয়ার জন্য একটি সিডো প্রোটোকল।

এই উত্তরের সাথে কিছু উল্লেখযোগ্য ত্রুটি রয়েছে। মূলত পূর্ববর্তী মন্তব্যে নির্দেশিত হিসাবে কিছু খুব ভিন্ন ধারণা মিশ্রিত হয় ... এবং তারপরে একটি অসম্পূর্ণ এবং ভুল উত্তরে সংক্ষেপিত হয়।

— trs

Answer 4

আমি উভয় কেস পরিচালনা করার জন্য ওয়ার্কিং সলিউশনটি পরিবর্তন করেছি .. যখন ভিডিও আপলোড করা হয় এবং যখন চিত্র আপলোড করা হয় .. আশা করি এটি কিছুটা সহায়তা করবে।

এইচটিএমএল

<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>

জাভাস্ক্রিপ্ট

var fileEl = document.querySelector("input");

fileEl.onchange = function(e) {


    var file = e.target.files[0]; // selected file

    if (!file) {
        console.log("nothing here");
        return;
    }

    console.log(file);
    console.log('file.size-' + file.size);
    console.log('file.type-' + file.type);
    console.log('file.acutalName-' + file.name);

    let start = performance.now();

    var mime = file.type, // store mime for later
        rd = new FileReader(); // create a FileReader

    if (/video/.test(mime)) {

        rd.onload = function(e) { // when file has read:


            var blob = new Blob([e.target.result], {
                    type: mime
                }), // create a blob of buffer
                url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
                video = document.createElement("video"); // create video element
            //console.log(blob);
            video.preload = "metadata"; // preload setting

            video.addEventListener("loadedmetadata", function() { // when enough data loads
                console.log('video.duration-' + video.duration);
                console.log('video.videoHeight-' + video.videoHeight);
                console.log('video.videoWidth-' + video.videoWidth);
                //document.querySelector("div")
                //  .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
                (URL || webkitURL).revokeObjectURL(url); // clean up

                console.log(start - performance.now());
                // ... continue from here ...

            });
            video.src = url; // start video load
        };
    } else if (/image/.test(mime)) {
        rd.onload = function(e) {

            var blob = new Blob([e.target.result], {
                    type: mime
                }),
                url = URL.createObjectURL(blob),
                img = new Image();

            img.onload = function() {
                console.log('iamge');
                console.dir('this.height-' + this.height);
                console.dir('this.width-' + this.width);
                URL.revokeObjectURL(this.src); // clean-up memory
                console.log(start - performance.now()); // add image to DOM
            }

            img.src = url;

        };
    }

    var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
    rd.readAsArrayBuffer(chunk); // read file object

};

jsFizz url

https://jsfiddle.net/PratapDessai/0sp3b159/

Comments

1. আপনার কোড ইনডেন্টেশন উদ্দেশ্য কি? কোডের যৌক্তিক কাঠামোটি হাইলাইট করতে অন্য প্রত্যেকে ইন্ডেন্টেশন ব্যবহার করে। 2. আপনার জেএসফিডেল কিছুই করে না। আমি একটি চিত্র এবং একটি ভিডিও আপলোড করার চেষ্টা করেছি।

— 7vujy0f0hy