I have tried two use cases to play webrtc playback on videojs.
After getting MediaStream from webrtc and add like the following:
player.src({src:webRTCAdaptor.remoteVideo.srcObject});
I'm getting (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) error.
If i do like following, I'm not getting any error but video does not play either.
var vid=player.tech().el();
vid.srcObject=webRTCAdaptor.remoteVideo.srcObject;
Calling player.play() doesn't change anything.
Does anybody has any insight about it?
You can rewrite the play function to achieve，like this
if (player) {
const videoDom = player.tech().el()
videoDom && (videoDom.srcObject = stream)
player.play = () => {
videoDom.play()
}
player.play()
}
Related
I'm using react-native-track-player for my audio app. When I use TrackPlayer.setRate to set the rate to a slower speed (0.5), the audio sounds like it's coming from underwater. When I play the same audio file locally using the QuickTime Player, it doesn't sound underwater.
Anyone had the same problem, and found a solution to this?
I also got the same problem when working with react-native-track-player in ios and the solution is to use pitch alogorithm. pitchAlgorithm is only for ios.
import TrackPlayer,{ PitchAlgorithm } from 'react-native-track-player';
var track = [];
for(let i = 0; i < SoundArray.length; i++ ){
track.push({
url: SoundArray[i].sound._filename,
index: SoundArray[i].index,
duration: SoundArray[i].sound._duration,
id: SoundArray[i].index.toString(),
title: SoundArray[i].index.toString(),
artwork:"https://url_to_artwork.jpg",
album: ""
})
}
console.log('track', track);
await TrackPlayer.add(track);
await TrackPlayer.setRate(0.6);
await TrackPlayer.play();
I am using the JavaScript version of Microsoft Cognitive Services Speech SDK from https://github.com/Azure-Samples/cognitive-services-speech-sdk.
The audio is played by the browser when synthesizer.speakTextAsync is called. When the audio is too long I want to stop the audio play but I couldn't find any documentation on how to do that?
Any help is appreciated!
synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig,
SpeechSDK.AudioConfig.fromDefaultSpeakerOutput());
synthesizer.speakTextAsync(
inputText,
result => {
if (result) {
console.log(JSON.stringify(rssesult));
}
},
error => {
console.log(error);
}
);
Stopping audio playing is supported.
You need to create a SpeechSDK.SpeakerAudioDestination() object and use it to create audioConfig like this.
var player = new SpeechSDK.SpeakerAudioDestination();
var audioConfig = SpeechSDK.AudioConfig.fromSpeakerOutput(player);
var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig, audioConfig);
synthesizer.speakTextAsync(
...
);
Then you can call player.pause() and player.resume() to pause and resume the playback.
You can find more info from the doc and sample.
I am able to make a direct call between a Circuit WebClient and the example SDK app at https://output.jsbin.com/posoko.
When running the SDK example on a PC with a second camera (USB), the switching between the built-in camera and the USB camera works fine. But trying the same on my Android device (Samsung Galaxy S6) the switching does not work.
My code uses navigator.mediaDevices.enumerateDevices() to get the cameras and then uses the Circuit SDK function setMediaDevices to switch to the other camera.
async function switchCam() {
let availDevices = await navigator.mediaDevices.enumerateDevices();
availDevices = availDevices.filter(si => si.kind === 'videoinput');
let newDevice = availDevices[1]; // secondary camera
await client.setMediaDevices({video: newDevice.deviceId})
}
Can somebody explain why this doesn’t work on an Android device?
We have seen Android devices that don't allow calling navigator.getUserMedia while a video track (and therefore a stream) is still active. I tried your example above with a Pixel 2 without any issues though.
If you remove the video track from the stream and stop the track before calling client.setMediaDevices, the switch should work.
async function switchCam() {
const stream = await client.getLocalAudioVideoStream();
const currTrack = stream.getVideoTracks()[0];
console.log(`Remove and stop current track: ${currTrack.label}`);
stream.removeTrack(currTrack);
currTrack.stop();
let availDevices = await navigator.mediaDevices.enumerateDevices();
availDevices = availDevices.filter(si => si.kind === 'videoinput');
let newDevice = availDevices[1]; // secondary camera
await client.setMediaDevices({video: newDevice.deviceId})
}
There is a complete switch camera example on JSBin at https://output.jsbin.com/wuniwec/
I read the entire API and dozens of related help topics but I dont manage to get with the code to help me do what I want.
This is what I need:
The video is muted by default.
When user click on fullscreen button the video is played with full volume.
How do I code this?
I understand I can mute my video adding myPlayer.volume(0) like this:
<script>
var myPlayer = _V_("video_1");
myPlayer.volume(0);
</script>
But how do I detect whether the video is in fullscreen or not?
I found the fullscreenchange event on the API but dont manage to implement it successfully. Any help will do my day. Thank you!
Listen for the fullscreenchange event and check the isFullScreen property of the player.
var myPlayer = _V_("video_1");
myPlayer.volume(0);
var onFullScreen = function(){
if (this.isFullScreen) {
this.volume(1);
} else {
this.volume(0);
}
};
myPlayer.addEvent("fullscreenchange", onFullScreen);
https://github.com/zencoder/video-js/blob/master/docs/api.md
I'm using jquery ui tabs and video.js. I want to stop the video when I go to another tab and reset it when I come back to second tab.
As of VideoJS v4.6 you can do the following to reset the player:
player.pause().currentTime(0).trigger('loadstart');
That loadstart is the key which shows the poster image and rebinds the first play event.
u can use this for show poster or show bigplay button
$( '.backlink' ).click( function() {
// Player (this) is initialized and ready.
var myPlayer = _V_("video9");
myPlayer.currentTime(0); // 2 minutes into the video
myPlayer.pause();
myPlayer.posterImage.el.style.display = 'block';
myPlayer.bigPlayButton.show();
});
It's even easier.
let player = Video(el);
player.on('ended', () => {
player.initChildren();
});
First you need a reference to the video player.
http://videojs.com/docs/api/
var myPlayer = _V_("myVideoID");
Then you can use the API to start/stop/reset the video.
Stop:
myPlayer.pause();
Reset:
myPlayer.currentTime(0);
I'm not sure how the jquery tabs are set up, but you might be able to do:
$('.my-tab-class').click(function(){
myPlayer.pause().currentTime(0);
});
player.reset();
Life is simple.
Get the id of the video.just append _html5_api with the id since videojs appends these letters and then you could use pause and make currentTime equal to 0.
var videoStop = document.getElementById(videoId+"_html5_api");
videoStop.pause();
videoStop.currentTime= 0;
The solution I found was using the videojs api, invoke the reset function followed by initChildren for reconstruct the player structure, i'm using vesion 5.10.7.
videojs('sublime_video', {}, function () {
var videoPlayer = this;
videoPlayer.width(screen.width / 2);
videoPlayer.height(720);
videoPlayer.on("ended", function(){
videoPlayer.reset().initChildren();
});
});
I was looking for a way to reintialize the VideoJS plugin then I found this :-
var player = videojs('my-player');
player.on('ended', function() {
this.dispose();
});
Just dispose off the video and init again.
Source:- https://docs.videojs.com/tutorial-player-workflows.html#dispose