I have been trying to get the list of subscriptions of my channel but unfortunately I get errors every time I run my code, I am describing each step below:
Step 1: I created this channel: My YouTube Channel
Step 2: I enabled the YouTube Data API V3 in Google Developer Console
Step 3: I created API Key and Google OAuth 2.0 Client ID, you can see the following screenshot:
Step 4: I checked the YouTube API Reference and checked some parameters here and got a successful response with all the subscriptions of my channel: YouTube API Reference for my Channel
Step 5: I copied the following code from the YouTube API Reference and placed my own API Key and Google OAuth 2.0 Client ID after I got a successful response for my channel:
<script src="https://apis.google.com/js/api.js"></script>
<script>
/**
* Sample JavaScript code for youtube.subscriptions.list
* See instructions for running APIs Explorer code samples locally:
* https://developers.google.com/explorer-help/code-samples#javascript
*/
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
gapi.client.setApiKey("YOUR_API_KEY");
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.youtube.subscriptions.list({
"part": [
"subscriberSnippet,contentDetails"
],
"channelId": "UCLlE_JEV7I0pQ7fhY4BIrrQ"
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
});
Step 6: Then I added the following buttons in my HTML code:
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
Step 7: When I execute the code, I get the following error messages:
Error 1:
"You have created a new client application that uses libraries for user authentication or
authorization that will soon be deprecated. New clients must use the new libraries instead;
existing clients must also migrate before these libraries are deprecated. See the [Migration
Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more
information."
Step 8: Then I click the authorize and load button and sign in to my channel and allow any requested rights. After that, when I click the execute button, then I get the following error:
"The requester is not allowed to access the requested subscriptions."
This is worth mentioning that this is my own channel, I login when required and I allow any rights that are requested. I also use my own Google Developer Console account, my own API Key and my own OAuth 2.0 Client ID. I have enabled the YouTube Data API V3 and I have set up everything properly. I can get the proper result from the YouTube API reference but I can't get it using JS.
Any help is appreciated in advance.
error one.
You have created a new client application that uses libraries for user authentication or
authorization that will soon be deprecated. New clients must use the new libraries instead;
existing clients must also migrate before these libraries are deprecated. See the Migration
Guide for more
information.
The code you are using is using the old google sign-in. You need to change this and use the new Google authorization library Authorizing for Web
Error two:
The requester is not allowed to access the requested subscriptions.
This error is a little harder to understand. First off when the authorization request pops up it should be asking you to pick a user and then a channel Make sure you select the channel that maps to the channel id you are selecting UCLlE_JEV7I0pQ7fhY4BIrrQ The YouTube data api is channel based you only have access to the single channel.
You are also using the "https://www.googleapis.com/auth/youtube.readonly" scope and the subscriptions list method documentation says it needs https://www.googleapis.com/youtube/v3/subscriptions which doesnt exist so I used https://www.googleapis.com/auth/youtube, but i would expect a different error message if this was the issue.
Notes:
I login when required and I allow any rights that are requested.
Make sure its to the correct channel.
I also use my own Google Developer Console account, my own API Key and my own OAuth 2.0 Client ID. I have enabled the YouTube Data API V3 and I have set up everything properly.
This has nothing to do with your access the client id, and api key just identify your application to Google they dont grant it access to anything. Thats what authorization is doing.
YouTube data api QuickStart for Authorizing for Web
Here is my QuickStart for this api.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Data API Quickstart</title>
<meta charset="utf-8" />
</head>
<body>
<p>YouTube Data API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<script type="text/javascript">
/* exported gapiLoaded */
/* exported gisLoaded */
/* exported handleAuthClick */
/* exported handleSignoutClick */
// TODO(developer): Set to client ID and API key from the Developer Console
const CLIENT_ID = '[Redacted]';
const API_KEY = '[Redacted]';
// Discovery doc URL for APIs used by the quickstart
const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest';
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
const SCOPES = 'https://www.googleapis.com/auth/youtube';
let tokenClient;
let gapiInited = false;
let gisInited = false;
document.getElementById('authorize_button').style.visibility = 'hidden';
document.getElementById('signout_button').style.visibility = 'hidden';
/**
* Callback after api.js is loaded.
*/
function gapiLoaded() {
gapi.load('client', initializeGapiClient);
}
/**
* Callback after the API client is loaded. Loads the
* discovery doc to initialize the API.
*/
async function initializeGapiClient() {
await gapi.client.init({
apiKey: API_KEY,
discoveryDocs: [DISCOVERY_DOC],
});
gapiInited = true;
maybeEnableButtons();
}
/**
* Callback after Google Identity Services are loaded.
*/
function gisLoaded() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPES,
callback: '', // defined later
});
gisInited = true;
maybeEnableButtons();
}
/**
* Enables user interaction after all libraries are loaded.
*/
function maybeEnableButtons() {
if (gapiInited && gisInited) {
document.getElementById('authorize_button').style.visibility = 'visible';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick() {
tokenClient.callback = async (resp) => {
if (resp.error !== undefined) {
throw (resp);
}
document.getElementById('signout_button').style.visibility = 'visible';
document.getElementById('authorize_button').innerText = 'Refresh';
await listSubscriptions();
};
if (gapi.client.getToken() === null) {
// Prompt the user to select a Google Account and ask for consent to share their data
// when establishing a new session.
tokenClient.requestAccessToken({prompt: 'consent'});
} else {
// Skip display of account chooser and consent dialog for an existing session.
tokenClient.requestAccessToken({prompt: ''});
}
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick() {
const token = gapi.client.getToken();
if (token !== null) {
google.accounts.oauth2.revoke(token.access_token);
gapi.client.setToken('');
document.getElementById('content').innerText = '';
document.getElementById('authorize_button').innerText = 'Authorize';
document.getElementById('signout_button').style.visibility = 'hidden';
}
}
/**
* Print metadata for first 10 Albums.
*/
async function listSubscriptions() {
let response;
try {
response = await gapi.client.youtube.subscriptions.list({
'pageSize': 10,
'part' :[ "snippet,subscriberSnippet,contentDetails" ],
"channelId": "UCyqzvMN8newXIxyYIkFzPvA",
'fields': 'items(id,snippet(title))',
});
} catch (err) {
document.getElementById('content').innerText = err.message;
return;
}
const subscriptions = response.result.items;
if (!subscriptions || subscriptions.length == 0) {
document.getElementById('content').innerText = 'No subscriptions found.';
return;
}
// Flatten to string to display
const output = subscriptions.reduce(
(str, subscription) => `${str}${subscription.snippet.title} (${subscription.id}\n`,
'albums:\n');
document.getElementById('content').innerText = output;
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
</body>
</html>
I am trying to implement a webchat with Twilio Programmable Video and its Javascript SDK.
So far I have managed to create a Room (in the backend) and connect the current user to the room.
The video is streamed from the local webcam (on a PC) to a div which is called 'remote-media-div'.
When the user is connected and video is seen on the screen, Twilio inserts a tag and a tag into remote-media-div
I would like to let the users choose the camera if they have more than one. I get the list of cameras and show it in a drop-down. When I select the webcam I run the below code to switch the stream to a newly selected camera. The second webcam's recording light is turned on but the video is still being received from the previous camera. What am I doing wrong?
let currentStream = null;
$.ajax({
url: `/operations/Room/Create`,
type: 'POST',
contentType: "application/json",
success: function (result) {
var roomName = result.room.name;
var token = result.room.token;
Twilio.Video.connect(token,
{
name: `${roomName}`,
audio: true,
maxAudioBitrate: 16000,
video: { height: 1000, frameRate: 24, width: 1000 },
networkQuality: {local:1, remote: 1}
}
).then(function(room) {
currentStream= room.stream;
navigator.mediaDevices.enumerateDevices().then(gotDevices);
const localParticipant = room.localParticipant;
localParticipant.tracks.forEach(publication => {
const track = publication.track;
document.getElementById('remote-media-div').appendChild(track.attach());
});
}, function(error) {
console.error('Unable to connect to Room: ' + error.message);
});
},
error: function (error) {
console.log(error);
}
});
When the drop-down changes, I switch the media stream.
function stopMediaTracks(stream) {
stream.getTracks().forEach(track => {
track.stop();
});
}
var cameraId = 1; // new Camera Id
const videoConstraints = {};
videoConstraints.deviceId = { exact:cameraId };
const constraints = {
video: videoConstraints,
audio: true
};
if (currentStream) {
stopMediaTracks(currentStream);
}
debugger;
const video = document.getElementsByTagName('video');
navigator.mediaDevices
.getUserMedia(constraints)
.then(stream => {
currentStream = stream;
video.srcObject = stream;
return navigator.mediaDevices.enumerateDevices();
})
.catch(error => {
console.error(error);
});
This code, as I said, does not turn the previous camera off. And the video (my own picture) keeps coming from the previous camera although the new camera is on too.
I have looked at the sample codes on GitHub and I don't seem to have done it incorrectly.
Twilio developer evangelist here.
I think I know the sample code on GitHub that you are looking at (I think it's mine 😉) but you have missed that there is a sample Video Chat available there too.
First, I can tell you that you are not seeing the first stream end because you are trying to set currentStream to room.stream which doesn't exist. This means stopMediaTracks is never called.
Secondly, you are not applying the new video stream to the room, so it won't be seen by other participants in the call. You need to turn the new camera stream into a LocalVideoTrack and then publish the track to the room.
I recommend you read through this blog post on changing cameras during a Twilio video call and check this example code for changing a camera during a Twilio Video call.
I've created an app that allows users to upload their images to a Google Cloud Storage bucket - which is then used in social media sharing previews.
The image is uploaded directly to the bucket from the user's browser - using the Firebase API.
What I also want to do is - when an image is saved - to automatically post that image on my app's twitter feed.
The way I've done this is to use a Cloud Function trigger on Cloud Storage - which downloads the image and then uploads via the Twitter API.
There's essentially an unnecessary double handling of traffic here is there a way to just give the Twitter API the public location of the file and have it source the file directly?
Here's my code for the current solution:
class Defferred {
constructor() {
const that = this;
this.prom = new Promise((resolve, reject) => {
that.resolve = resolve;
that.reject = reject;
});
}
}
exports.onNewImage = functions.storage.object().onFinalize((object) => {
const prom = new Defferred();
bucket.file(object.name).download((err, file, response) => {
if (err) {
return prom.reject(err);
} else {
twitterClient.post('media/upload', {
media: file
}, (err, media, response) => {
if (!err) {
let status = {
status: "Somebody created this at https://geoplanets.io #geometry #geometricart",
media_ids: media.media_id_string
}
twitterClient.post('statuses/update', status, (error, tweet, response) => {
if (!error) {
return prom.resolve(response);
} else {
return prom.reject(error);
}
});
} else {
return prom.reject(err);;
}
});
}
});
return prom.prom;
});
Is there an alternative way of doing this that doesn't involve downloading the file? - A good answer would highlight the relevant parts of the API documentation that highlight how I would go about working this out myself.
The Twitter node api doesn't have a way to simply pass an URL for media upload. The example they give shows what you're doing now - sending the full content with the request.
The node client is just a wrapper around the REST API, and if you read its docs, you'll see that you have to provide the file content directly to the POST.
Yes!
We can upload media using URL of file by making the downstream of a file.
First we need to make Axios request to have a buffer of it then we can pass it with file type using
twitter-api-v2
use it in this package or REST API
const client = new TwitterApi({
appKey: CONSUMER_KEY,
appSecret: CONSUMER_SECRET,
accessToken: oauth_token,
accessSecret: oauth_token_secret,
});
const url = 'URL OF THE FILE';
const downStream = await axios({
method: 'GET',
responseType: 'arraybuffer',
url: url,
}).catch(function (error) {
res.send({error:error});
});
const mediaId = await client.v1.uploadMedia(downStream.data,{ mimeType: 'png'});
const newTweet = await client.v1.tweet('Hello link tweet!', { media_ids: mediaId });
sample Image
I'm a relatively new programmer trying to create an ios video-streaming app in swift. I've written the backend in node.js and have a mongoose connection to a mongoDB. I've been able to upload videos to the database using the following code and gridfs
function (req, res, next) {
req.pipe(gfs.createWriteStream({ filename: 'filename'}));
res.send("success");
};
I'm attempting to stream the videos using the following code
gfs.findOne({_id: req.params.id}, function (err, file) {
if (err) {
return res.status(400).send(err);
} else if (!file) {
return res.status(404).send(' ');
} else {
res.header("Content-Type","video/mp4");
res.header("X-Content-Type-Options", "nosniff");
res.header("Accept-Ranges", "bytes");
res.header("Content-Length",file.length);
var readStream = gfs.createReadStream({_id: file._id});
readStream.on('open', function () {
console.log('Starting download...');
});
readStream.on('data', function (chunk) {
console.log('Loading...');
});
readStream.on('end', function () {
console.log('Video is ready to play');
});
readStream.on('error', function (err) {
console.log('There was an error with the download' + err);
res.end();
});
readStream.pipe(res);
}
});
When I run a server on localhost and attempt to access the videos via google chrome, all I get is the default playback screen but no video. However, ultimately I am trying to playback on an ios app. When I try the same thing on swift (using the local host url passed in to mpmovieplayer), there is also no video playback. I know the get request is going through because my console outputs the proper response with the filesize. I have even been fiddling with alamofire on the front end and can see the hexadecimal representation of the video in the response data. Can anybody help with this code? Do I need to update my res.header to fit some IOS specification? Should I even be using alamofire at all for this? Thanks in advance for your responses.
With Youtube api v2, there's easy way to get videos. Just send a query like this:
http://gdata.youtube.com/feeds/mobile/videos?max-results=5&alt=rss&orderby=published&author=OneDirectionVEVO
The Youtube api v2 also has an interactive demo page for building query:
http://gdata.youtube.com/demo/index.html
With Youtube api v3, I don't know the corresponding way. Please point me the way with api v3.
Thank you!
The channels#list method will return a JSON with some information about the channel, including the playlist ID for the "uploads" playlist:
https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=OneDirectionVEVO&key={YOUR_API_KEY}
With the playlist ID you can get the videos with the playlistItems#list method:
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUbW18JZRgko_mOGm5er8Yzg&key={YOUR_API_KEY}
You can test those at the end of the documentation pages.
This should do it. This code just gets and outputs the title but you can get any details you want
// Get Uploads Playlist
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part : 'contentDetails',
forUsername : 'USER_CHANNEL_NAME',
key: 'YOUR_API_KEY'},
function(data) {
$.each( data.items, function( i, item ) {
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
});
}
);
//Get Videos
function getVids(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part : 'snippet',
maxResults : 20,
playlistId : pid,
key: 'YOUR_API_KEY'},
function(data) {
var results;
$.each( data.items, function( i, item ) {
results = '<li>'+ item.snippet.title +'</li>';
$('#results').append(results);
});
}
);
}
<!--In your HTML -->
<ul id="results"></ul>
If quota cost is a consideration, it may be beneficial to follow this simple algorithm.
First grab the data from https://www.youtube.com/feeds/videos.xml?channel_id=... This is a simple XML feed which will give you the video ID's, but you cannot specify further 'parts' (stats, etc).
Using the video ID's from that list, do a query on the /videos API endpoint which allows for a comma-separated-list of video ID's which should only result in 1 quota cost, plus 0-2 for any additional part parameters. As #chrismacp points out, using the /search endpoint is simpler but has a quota cost of 100, which can add up quickly.
There is a resource consideration here (cpu, memory, etc) as you are making a second call, but I believe in many scenarios this can be a useful method.
Things have changed alot in V3 of the API. Here is a video that walks you through the v3 API calls needed to get a list of the videos uploaded in a given channel, with live demos using the API Explorer.
YouTube Developers Live: Getting a Channel's Uploads in v3 - https://www.youtube.com/watch?v=RjUlmco7v2M
In case it helps anyone here this is what I discovered and so far seems to be working well for me. I am authenticating the member via OAuth 2.0 prior to making this request, which will give me the authenticated members videos. As always, your personal mileage may vary :D
curl https://www.googleapis.com/youtube/v3/search -G \
-d part=snippet \
-d forMine=true \
-d type=video \
-d order=date \
-d access_token={AUTHENTICATED_ACCESS_TOKEN}
The equivalent of the request you posted is actually a search in the 3.0 api, not a playlist request. It's easier too to do it that way. You do need to excange the username for a channel ID though.
ex. GET https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUGhCVGZ0ZSpe5hJHWyiLwHA&key={YOUR_API_KEY}
Here is some code using the offical Google APIs Node library (https://github.com/google/google-api-nodejs-client)
const readJson = require("r-json");
const google = require('googleapis');
const Youtube = google.youtube('v3');
// DONT store your credentials in version control
const CREDENTIALS = readJson("/some/directory/credentials.json");
let user = "<youruser>";
let numberItems = 10;
let channelConfig = {
key: CREDENTIALS.youtube.API_KEY,
part: "contentDetails",
forUsername: user
};
Youtube.channels.list(channelConfig, function (error, data) {
if (error) {
console.log("Error fetching YouTube user video list", error);
return;
}
// Get the uploads playlist Id
let uploadsPlaylistId = data.items[0].contentDetails.relatedPlaylists.uploads;
let playlistConfig = {
part : 'snippet',
maxResults : size,
playlistId : uploadsPlaylistId,
key: CREDENTIALS.youtube.API_KEY
};
// Fetch items from upload playlist
Youtube.playlistItems.list(playlistConfig, function (error, data) {
if (error) {
console.log("Error fetching YouTube user video list", error);
}
doSomethingWithYourData(data.items);
});
});
An alternative method may be to get the playlists for the currently oauth authenticated user via: property mine=true
where the oauth access_token is retrieved following authentification:
https://developers.google.com/youtube/v3/guides/authentication
https://www.googleapis.com/youtube/v3/playlists?part=id&mine=true&access_token=ya29.0gC7xyzxyzxyz
Please don't use playlistitems.list if you want to get the videos of playlist with more then 300 videos. You can try it live in google link "https://developers.google.com/youtube/v3/docs/playlistItems/list" in "Try it" section. It returns undefined.
I have used in my project also. It returns undefined only.
In PHP:
I used pageToken attribute to go to all page of playlist.I hope it can help you.
//step 1: get playlist id
$response = file_get_contents("https://www.googleapis.com/youtube/v3/channels?key={$api_key}&forUsername={$channelName}&part=contentDetails");
$searchResponse = json_decode($response,true);
$data = $searchResponse['items'];
$pid = $data[0]['contentDetails']['relatedPlaylists']['uploads'];
//step 2: get all videos in playlist
$nextPageToken = '';
while(!is_null($nextPageToken)) {
$request = "https://www.googleapis.com/youtube/v3/playlistItems?key={$api_key}&playlistId={$pid}&part=snippet&maxResults=50&pageToken=$nextPageToken";
$response = file_get_contents($request);
$videos = json_decode($response,true);
//get info each video here...
//go next page
$nextPageToken = $videos['nextPageToken'];
}
In node.js, it can be achieved with following code.
Requires authKey and channelId as options object parameter.
cb callback is called after data is fetched.
async function fetchChannelInfo(options) {
const channelUrl = `https://www.googleapis.com/youtube/v3/channels?part=contentDetails,statistics&id=${
options.channelId
}&key=${options.authKey}`;
const channelData = await axios.get(channelUrl);
return channelData.data.items[0];
}
function fetch(options, cb) {
fetchChannelInfo(options).then((channelData) => {
options.playlistId = channelData.contentDetails.relatedPlaylists.uploads;
const paylistUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${
options.playlistId
}&key=${options.authKey}`;
axios
.get(paylistUrl)
.then((response) => {
const payloadData = ;
const videoList = [];
response.data.items.forEach((video) => {
videoList.push({
publishedAt: video.snippet.publishedAt,
title: video.snippet.title,
thumbnails: thumbnails,
videoId: video.snippet.resourceId.videoId,
});
});
cb(null, videoList);
})
.catch((err) => {
cb(err, null);
});
});
}
Note: axios is used for RESTful requests. To install
npm install axios
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part: 'snippet,contentDetails,statistics,brandingSettings',
id: viewid,
key: api},
function(data){
$.each(data.items, function(i, item){
channelId = item.id;
pvideo = item.contentDetails.relatedPlaylists.uploads;
uploads(pvideo);
});
});
Uploads Function can be
function uploads(pvideo){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part: 'snippet',
maxResults:12,
playlistId:pvideo,
key: api},
function(data){
$.each(data.items, function(i, item){
videoTitle = item.snippet.title;
videoId = item.id;
description = item.snippet.description;
thumb = item.snippet.thumbnails.high.url;
channelTitle = item.snippet.channelTitle;
videoDate = item.snippet.publishedAt;
Catagoryid = item.snippet.categoryId;
cID = item.snippet.channelId;
})
}
);
}
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$(".form-control").click(function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 20,
order: "viewCount",
publishedAfter: "2017-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("tpl/item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId ,"descrip":item.snippet.description ,"date":item.snippet.publishedAt ,"channel":item.snippet.channelTitle ,"kind":item.id.kind ,"lan":item.id.etag}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("YOUR API KEY .... USE YOUR KEY");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}
Check the Complete code here https://thecodingshow.blogspot.com/2018/12/youtube-search-api-website.html