Uploading a video to youtube from browser

问题

Im OK authorized.

I have 2 button's like this on my page:

<input type="file" id="fileToSend"/>
<input type="button" onclick="upload()" value="Upload" id="btnSend"/>

I want to upload the selected file to youtube when I click the "Upload" button. Im calling a function like this:

function upload() {
    var fileStream;
    var video = document.getElementById("fileToSend");
    var file = video.files[0];
    console.log(file);
    console.log("Nombre: " + file.name);
    var r = new FileReader();
    r.onload = function () {
        console.log("fileStream creado");
        fileStream = r.result;
        //console.log("FileStream: " + fileStream);
    };

    console.log("Creando fileStream..");
    r.readAsBinaryString(file);


    gapi.client.load('youtube', 'v3',
        function() {
            var request = gapi.client.youtube.videos.insert({
                part: 'snippet, status',
                resource: {
                    snippet: {
                        title: 'Video Test Title 5',
                        description: 'Video Test Description',
                        tags: ['Tag 1', 'Tag 2'],
                        categoryId: "22"
                    },
                    status: {
                        privacyStatus: "private"
                    }
                }
            }, fileStream);
            request.execute(function (response) {
                console.log("executing..");
                var result = response.result;
                console.log(response);
                if (result) {
                    console.log("execute completed");
                    document.write(result);
                }
            });
        });
}

The problem is I get al error on the response object, "mediaBodyRequired", It's like I'm not sending the fileStream correctly.

回答1:

Is there a reason you can't just use the YouTube upload widget?
https://developers.google.com/youtube/youtube_upload_widget

Anyways, straight from the API reference
https://developers.google.com/youtube/v3/docs/videos/insert

badRequest  mediaBodyRequired   The request does not include the video content.

Another resource:
https://developers.google.com/api-client-library/javascript/samples/samples

回答2:

There are two options for using v3 insert. The request must either:

have the media file as the body which precludes sending any other POST parameters, or
use multipart form encoding in two parts. One part is the file to upload and the other part is a file-like JSON blob that includes any parameters you want to send.

I never did get this working using the official JavaScript client, but wrote up a pretty detailed explanation of how this can work using regular XmlHttpRequest: http://lithostech.com/2013/10/upload-google-youtube-api-v3-cors/

Here's an example of the first method where the file itself is the whole request body:

// where videoFile is a http://www.w3.org/TR/FileAPI/#dfn-file
var invocation = new XMLHttpRequest();
invocation.setRequestHeader('Authorization', 'Bearer ' + token);
invocation.open('POST', "https://www.googleapis.com/upload/youtube/v3/videos?part=snippet", true);
invocation.send(videoFile);

来源：https://stackoverflow.com/questions/16890408/uploading-a-video-to-youtube-from-browser

标签

javascript

upload

youtube-api

youtube-javascript-api