This seems to be a recurring issue as there have been a number of similar posts on the YouTube API Google Group over the past couple of years. Using the YouTube iFrame API (only tried HTML5 not Flash) the onStateChange event fires correctly (and calls the specified handler), but the data property passed is undefined. I'm running OS X Mountain Lion and the error occurs using both Chrome (23.0.1271.64) and Safari (6.0.2).
Any thoughts on what the issue might be would be most appreciated.
Selected code snippets
myapplication.controllers.Player = function(containerId, videoId) {
[...]
this.player = new YT.Player(this.currentView_.playerContainer_, {
videoId: videoId,
playerVars: { 'showinfo': 0, 'modestbranding': 1, 'rel': 0 },
suggestedQuality: 'medium'
});
[...]
goog.events.listen(this.player, 'onStateChange', this.onPlayerStateChange_,
false, this);
[...]
};
myapplication.controllers.Player.prototype.onPlayerStateChange_ = function(e) {
if (e.data == 1) {
this.startTimer_(100);
} else {
this.stopTimer_();
};
};
Related
I have updated Youtube video by using Youtube data api.I got successful response from api. I have updated my video title and also added cards with api. I can see title was updated instantly but not able to find added cards on Youtube video.
I have tried below given code with node.js api.I have not received any errors and api call was success. But video title was updated successfully from same api and cards are not visible on video
async function addInfoCardsToVideo(videoId) {
try {
// First, retrieve the video's current metadata
const video = await youtube.videos.list({
part: 'snippet',
id: 'myexistingvideoid', // This is my existing Youtube video id
});
// Next, construct the new metadata object with the info card data
const infoCard = {
kind: 'youtube#video',
videoId: videoId,
card: {
teaser: {
startTimeMs: 10000, // The time in milliseconds where the teaser begins
endTimeMs: 30000, // The time in milliseconds where the teaser ends
},
cards: [
{
teaserTitle: 'Info Card Title',
teaserDurationMs: 5000, // The duration of the teaser in milliseconds
teaserStartTimeMs: 20000, // The time in milliseconds where the teaser should be displayed
type: 'video',
videoId: 'othervideoid', // The video ID for the video you want to link to
},
],
},
};
// Update the video's metadata to add the info card
const update = await youtube.videos.update({
part: 'snippet',
resource: {
id: videoId,
snippet: {
...video.data.items[0].snippet,
localized: {
...video.data.items[0].snippet.localized,
},
cards: infoCard,
title:'updated video title'
},
},
});
console.log(`Successfully updated video: ${videoId}`);
} catch (err) {
console.error(`Error updating video: ${err}`);
}
}
addInfoCardsToVideo('myexistingvideoid') //passing my existing Youtube video id ]
Kindly help
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'm setting up a prototype for using Opentok Webrtc in Safari IOS11 for the Iphone. It all worked fine, untill today (and I don't remember changing anything). The error I'm receiving is
OT.Publisher Access Denied: Permission Denied: End-user denied permission to hardware devices (getUserMedia error:
NotAllowedError)
You would say this is local, but i've tried it with the phone of a colleague and the same error now occurred. So it should be somewhere in the code or OpenTok library in my opinion.
Any idea?
// Handling all of our errors here by alerting them
function handleError(error) {
if (error) {
alert(error.message);
}
}
// make the agent id dynamic alteron, now hardcoded
var agentIdAvailable = '007';
var SERVER_BASE_URL = 'https://XXX.herokuapp.com';
fetch(SERVER_BASE_URL + '/room/'+ agentIdAvailable).then(function(res) {
return res.json()
}).then(function(res) {
apiKey = res.apiKey;
sessionId = res.sessionId;
token = res.token;
initializeSession();
}).catch(handleError);
function initializeSession() {
var session = OT.initSession(apiKey, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
});
// Create a publisher
var publisher = OT.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
}, handleError);
// Connect to the session
session.connect(token, function(error) {
// If the connection is successful, initialize a publisher and publish to the session
if (error) {
handleError(error);
} else {
session.publish(publisher, handleError);
console.log('*** publishing', publisher);
}
});
}
I had the same problem with vonage (old opentok). There is an article that was the solution of my problem: https://video-api.support.vonage.com/hc/en-us/articles/4983310908948-Issue-with-screensharing-with-embedded-iFrames
I had forget to put "display-capture" on the iframe (to allow screen share), therefore this exactly error message that you mentioned happened to me, but not in safari (i was trying on chrome)
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.
I'm building an app for iOS using Phonegap and I've run into some problems. The app runs fine on both a simulator and real device until I close the app using the multi-tasking shutdown (double tap home button sequence..)
Upon reopening the app I find that it becomes unresponsive and you can't interact with it in any way. I've spent a fair amount of time trying to debug this and I've had no joy.
Error wise I have been getting the error Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1 appear in the xcode console. After lots of googling it seems that this is caused due to hash tags within the URLs (something that I'm using for scrolling down to links both on the same and different pages). Most of the suggestions recommend updating phonegap/cordova to the latest version. I was previously on 2.8 and I went up to 2.9 and it still didn't work, i'm now on 3 and i'm still getting the same issues.
I've checked the cordova git and updated my CDVWebViewDelegate.m file several times with supposed fixes, nothing seems to work. I had a previous version of the app working on earlier versions of Cordova/Phonegap but I've recently upgraded and i'd rather not downgrade to get it to work..
I should probably note that I'm using zepto for my ajax calls and not JQM, for the hash tag scrolling i'm using the following code (figured this may help given it seems to be a hash issue..)
Hash Change function
// Ajax
var wrap = $('#contentScroller .scroller')
// get href
$('a.ajax').click(function () {
location.hash = $(this).attr('href').match(/(^.*)\./)[1]
return false
})
// load page
function hashChange() {
var page = location.hash.slice(1)
if (page != "" && window.location.hash) {
wrap.hide();
spinner.spin(target);
//setTimeout(function () {
wrap.load('pages/' + page + ".html .page-wrapper")
contentScroller.scrollTo(0,0);
refreshScroll();
//}, 1500);
snapper.close();
$(menuBtn).removeClass('active');
}else{
wrap.hide();
spinner.spin(target);
//setTimeout(function () {
wrap.load('pages/Welcome.html .page-wrapper')
refreshScroll();
//}, 1500);
snapper.close();
$(menuBtn).removeClass('active');
}
}
// check for hash change
if ("onhashchange" in window) {
$(window).on('hashchange', hashChange).trigger('hashchange')
} else { // lame browser
var lastHash = ''
setInterval(function () {
if (lastHash != location.hash)
hashChange()
lastHash = location.hash
contentScroller.scrollTo(0,0);
}, 100)
}
Scrolling
$(document)
.on('ajaxStart', function () {
wrap.hide();
})
.on('ajaxStop', function () {
//wrap.show();
})
.on('ajaxSuccess', function () {
//setTimeout(function () {
spinner.stop();
wrap.fadeIn(700);
refreshScroll();
//}, 1000);
// Local storage scrollTo
var storage = window.localStorage;
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('a.scroll-link').click(function (event) {
event.preventDefault();
url = url.replace('home.html?firstrun#', "");
url = url.replace(url, url+".html");
var myHref = $(this).attr('href');
if (url == myHref) {
var sameScroll = $(this).attr('data-scroll-same-page');
sameScroll = sameScroll.replace(sameScroll, "a#" + sameScroll);
contentScroller.scrollToElement(sameScroll, 1500);
} else {
var diffScroll = $(this).attr("data-scroll-diff-page");
storage.setItem("key", diffScroll);
//Alter value for iScroll
var value = window.localStorage.getItem("key");
value = value.replace(value, "a#" + value);
location.hash = $(this).attr('href').match(/(^.*)\./)[1]
$(window).on('hashchange', hashChange).trigger('hashchange')
// Scroll to element after .5 second
setTimeout(function () {
contentScroller.scrollToElement(value, 1500);
return false;
}, 2000)
// Clear local storage to prevent scrolling on page reload
localStorage.clear();
}
Sample link
<a href="IndexOfTerms.html" class="ajax scroll-link" data-scroll-diff-page="First_year_allowance">
this will then pass the attr "first_year_allowance" through to the IndexOfTerms pages and then scroll down to the element that has that id
Can anybody shed some light on how I might be able to fix this? It's really starting to annoy me so I'd quite like to get a fix pretty sharpish!
Note: Libraries used: iScroll, Zepto, fastclick, snapjs, spinjs
Thanks!