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.
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.liveStreams.list({
"part": [
"snippet,cdn,contentDetails,status"
//"cdn"
],
"mine": true
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
var responseData = JSON.stringify(response);
alert(responseData);
//alert(response.result.items);
var itemsArr = response.result.items;
var itemObj = itemsArr[0];
alert('streamName = ' + itemObj.cdn.ingestionInfo.streamName);
//alert(responseData.result);
//var result = responseData.result;
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});
});
<script src="https://apis.google.com/js/api.js"></script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
I am new to YouTube live streaming. I am doing it through my application. I have gone through various question/answers on this portal but couldn't find/understand a way to get it.
Is there any way (with YouTube Data API v3) to get live stream tiny URL (something like https://youtu.be/OHi8m4o8XeQ) so that I can share my live stream to my audiences?
I have got a stream key/name (20 character alphanumeric key with four - in between) from YouTube Data API v3, that I will use to stream to YouTube.
I am adding one screenshot for reference. I want the tiny url (something like https://youtu.be/someid) in upper right side.
Yes, take your channel url and add /live .
YouTube's shortened URL associated to a given video -- identified by its ID VIDEO_ID -- is of form:
https://youtu.be/VIDEO_ID,
where (usually, though not officially documented as such) VIDEO_ID obeys to the following regex pattern:
^[0-9a-zA-Z_-]{11}$.
In the case of live streaming, for to be able to share the shortened URL of one such stream you've created, you should obtain the video ID associated to that stream.
That video ID is to be found as the value of the property id of the LiveBroadcasts resource that is bound to your live stream.
I have a page where users can paste a Youtube video url and then I need to extract the video's ID in order to get the video's thumbnail image. The hard part is to get a reliable way of extracting the video ID from the video url. There are a number of regex solutions here but for me none of these are 100% reliable. Here's a few:
JavaScript REGEX: How do I get the YouTube video id from a URL?
Youtube API - Extract video ID
It's like a contest of who has a longer regex. I feel like the right way would be to get this information from Youtube's api, but looking at it, seems like this option is not available:
https://developers.google.com/apis-explorer/#p/youtube/v3/
As you can see everything is based on the video id. I find it ridiculous that I need the actual video ID to get any information about the video since no real world user will ever even know what the video id is. Vimeo has this feature built into their API. Here is an example:
https://vimeo.com/api/oembed.json?url=https://vimeo.com/29474908
Does anyone have a solution for this that does not involve some regular expression?
Doing a search with the API works with different YouTube URL types. The URL is passed as the query term q.
https://www.googleapis.com/youtube/v3/search/?key=<YOUR_KEY>&part=snippet&q=youtu.be/M7lc1UVf-VE
Maybe some case could result in more than one item, but the normal search result is just one match:
{
kind: "youtube#searchListResponse",
etag: ""m2yskBQFythfE4irbTIeOgYYfBU/j2Px-5q--mgJEsrfjg4L0Mgn_L8"",
regionCode: "ES",
pageInfo: {
totalResults: 1,
resultsPerPage: 5
},
items: [
{
kind: "youtube#searchResult",
etag: ""m2yskBQFythfE4irbTIeOgYYfBU/_1gFVi_i_djlS4OZWPGtcZ3iSLQ"",
id: {
kind: "youtube#video",
videoId: "M7lc1UVf-VE"
},
snippet: {
publishedAt: "2013-04-10T17:25:04.000Z",
channelId: "UC_x5XG1OV2P6uZZ5FSM9Ttw",
title: "YouTube Developers Live: Embedded Web Player Customization",
description: "On this week's show, Jeff Posnick covers everything you need to know about using player parameters to customize the YouTube iframe-embedded player.",
thumbnails: {
default: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/default.jpg",
width: 120,
height: 90
},
medium: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/mqdefault.jpg",
width: 320,
height: 180
},
high: {
url: "https://i.ytimg.com/vi/M7lc1UVf-VE/hqdefault.jpg",
width: 480,
height: 360
}
},
channelTitle: "Google Developers",
liveBroadcastContent: "none"
}
}
]
}
I tested with some of the URL variations from this answer and most worked:
var urls = [
'//www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=channel',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'https://www.youtube.com/ytscreeningroom?v=NRHVzbJVx8I', // <---- invalid
'https://youtu.be/M7lc1UVf-VE',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=youtu.be',
'https://youtu.be/M7lc1UVf-VE',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=channel',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&playnext_from=TL&videos=osPknwzXEas&feature=sub',
'https://www.youtube.com/ytscreeningroom?v=M7lc1UVf-VE', // <---- invalid
'https://www.youtube.com/embed/M7lc1UVf-VE?rel=0',
'https://www.youtube.com/watch?v=M7lc1UVf-VE',
'https://youtube.com/v/M7lc1UVf-VE?feature=youtube_gdata_player',
'https://youtube.com/vi/M7lc1UVf-VE?feature=youtube_gdata_player', // <---- invalid
'https://youtube.com/?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://www.youtube.com/watch?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtube.com/?vi=M7lc1UVf-VE&feature=youtube_gdata_player', // <---- invalid
'https://youtube.com/watch?v=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtube.com/watch?vi=M7lc1UVf-VE&feature=youtube_gdata_player',
'https://youtu.be/M7lc1UVf-VE?feature=youtube_gdata_player'
];
var my_key = '<YOUR_KEY>';
function getUri(uri){
$.get('https://www.googleapis.com/youtube/v3/search/?key='+my_key+'&part=snippet&q='+uri, function(data) {
if(data.items.length !== 0)
console.log(data.items[0].snippet.publishedAt);
else
console.warn('no items for',uri)
});
}
for (i = 0; i < urls.length; ++i) {
getUri(urls[i]);
}
I want to make a react-native app that is able to:
show live streaming
upload live streaming
save streaming
I have a rtmp url and a playback url. I tried to achieve my goals using "react-native-video-stream" however stream doesn't start and there is no apparent errors.
How can I live stream videos in my app and which library should be used.
Please provide an example / demo app which does live streaming
I found one simple platform called mux to create live stream, upload and save it to play later. react-native-nomediaclient will help you to stream your video. On other side you can just user react-native-video to play the stream.
Here is the blog of whole process.
There are others also platform to create stream. But, the point is that you can stream from any of them using react-native-nomediaclient library.
Update:
Here is the nomediaclient configuration to create live stream using mux :
<NodeCameraView
style={styles.nodeCameraView}
ref={(vb) => { this.vb = vb }}
outputUrl = {`rtmp://live.mux.com/app/${this.state.streamId}`}
camera={{ cameraId: 0, cameraFrontMirror: true }}
audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }}
video={{
preset: 4,
bitrate: 2000000,
profile: 2,
fps: 30,
videoFrontMirror: false
}}
autopreview={true}
/>
To get streamId :
createLive = async () => {
const auth = {
username: MUX_ACCESS_TOKEN,
password: MUX_SECRET
};
const param = { "reduced_latency": true, "playback_policy": "public", "new_asset_settings": { "playback_policy": "public" } }
const res = await axios.post('https://api.mux.com/video/v1/live-streams', param, { auth: auth }).catch((error) => {
throw error;
});
console.log(res.data.data);
const data = res.data.data;
this.setState({
streamId: data.stream_key
});
}
Update 2
I have also find another platform which is better than Mux called Bambuser. It provide easiest installation process for your react native application. It also has many advance features like, you can stream on multiple platform at a time. It provides high quality audio and video streaming with minimum lag time. I have used in my app and it's working without any issues.
Here is the library that you can use with your react-native application :
react-native-bambuser-player : Which allows you to play stream in your user side app.
react-native-bambuser-broadcaster : Using this library you create your broadcaster app to stream video for you user side app.
Follow the installation steps properly and you good to go.
Also if you don't want to build your broadcaster app, they also provide their own app to create live stream. It's has most of all feature that should be in broadcast app. You have to just login in app and it start stream for your player app.
Bambuser (Android)
Bambuser (iOS)
It also gives 14 days free trial to testing.
Sample Code
import Bambuser player :
import RNBambuserPlayer from 'react-native-bambuser-player';
Declare const for your credential :
const BambuserApplicationIds = {
android: 'ANDROID_APPLICATION_ID', // your bambuser android application id
ios: 'IOS_APPLICATION_ID' // your bambuser ios application id
}
const BambuserResourceUri = 'YOUR_BAMBUSER_RESOURCE_URI';
Here is the detail about how you can get applicationId and resourceUri.
render the Bambuser Player view :
<RNBambuserPlayer
style={{ flex: 1 }}
ref={ref => {
this.myPlayerRef = ref;
}}
applicationId={
Platform.OS === 'ios'
? BambuserApplicationIds.ios
: BambuserApplicationIds.android
}
requiredBroadcastState={
RNBambuserPlayer.REQUIRED_BROADCAST_STATE.LIVE
}
videoScaleMode={RNBambuserPlayer.VIDEO_SCALE_MODE.ASPECT_FILL}
resourceUri={BambuserResourceUri}
onTotalViewerCountUpdate={viewer => {
this.setState({ views: viewer }); // handle views update here
}}
onPlaying={() => {
// code to handle when playing stream
}}
onPlaybackError={error => {
// handle when some error occures
Alert.alert('Error', error.message);
}}
onPlaybackComplete={() => {
// this method called when stream is complete. Write some code to handle stream complete like :
this.setState({ isPlaying: false, isLiveEnded: true }, () => {
this.props.navigation.setParams({ isLive: false });
});
}}
onStopped={() => {
// called when stream stops.
this.setState({ isPlaying: false }, () => {
this.props.navigation.setParams({ isLive: false });
});
}}
/>
You can read here more about props.
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