I'm developing a web application using angularjs, I need to add a window that shows a live RTSP streaming.I can be done that with JSMpeg js library. In the server side I found this nodejs example
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp_url',
wsPort: 8081,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
in the browser side first i tried a simple HTML5 :
<html>
<body>
<div>
<canvas id="canvas" width="1920" height="1080" style="display: block; width: 40%;"></canvas>
</div>
</body>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
//var ws = new WebSocket('ws://localhost:9999');
player = new JSMpeg.Player('ws://localhost:9999', {
canvas: document.getElementById('canvas'), autoplay: true, audio: false, loop: true
})
</script>
This HTML5 page works fine and I got in my web page a live streaming. After that I tried to adapt this HTML code to angularJS:
I added the canvas tag to the corresponding html file:
<canvas id="canvas" width="502" height="237" style="display: block; width: 40%;"></canvas>
Then I tried controller as follow:
var streamingcanvas = document.getElementById("canvas");
let player = new JSMpeg.Player('ws://localhost:8081', {
canvas: streamingcanvas, autoplay: true, audio: false, loop: true
})
the result I get is that no streaming in my web page an no errors in the console.
what's missing in my code?
Related
I've cloned the repository from https://github.com/microsoft/BotFramework-WebChat and was able to build the project after some changes with the below npm command
npm run build
However, this build has not generated the botchat.css and botchat.js files that the earlier versions of web chat used to generate. The reason for my custom build is that I need to be able to display HTML formatting on the web chat. Any steps on how to get the .css and .js files would be really helpful.
Suggestions from #tdurnford on WebChat repo worked out well. Giving the final html code below:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
<script src="https://unpkg.com/markdown-it#8.4.2/dist/markdown-it.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<script>
</script>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
// const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
window.WebChat.renderWebChat(
{
username: username,
userID: userid,
locale: 'en-US',
directLine: window.WebChat.createDirectLine({
secret: [YOUR_SECRET],
}),
renderMarkdown: markdownIt.render.bind(markdownIt),
styleOptions: {
bubbleMaxWidth: 1200,
botAvatarInitials: 'M',
userAvatarInitials: 'V',
}
// Passing 'styleOptions' when rendering Web Chat
},
document.getElementById('webchat')
);
</script>
</body>
</html>
Setting the markdown renderer with html:true is the the key here.
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
Web Chat no longer generates custom CSS files from the build. I would recommend looking at the Web Chat v3 to v4 Migration Sample and Web Chat's other customization samples - specifically the Custom Branding Styling sample.
I'm trying to get a pie chart. However, it isn't working too well. The page is completely blank.
I'm using node.js. I have chart.js installed though npm. I run this html on my ejs file, and it is just a blank page.
<code>
<html>
<head>
<script src="../node_modules/chart.js/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data, pieOptions);
</script>
</body>
</html>
</code>
I didn't read too deeply into your code but I noticed that you have your node.js code in the head of the file. Unfortunately, node.js cannot be executed in the browser, but is used for server side implementation of code. What does your console say?
Here is what I had to do.
I copied the Charts.min.js file from the node_modules to the public folder.
Other than that, I have the canvas at the top. Also, I had to change the:
var ctx = document.getElementById("myChart").getContext("2d");
to
var ctx = document.getElementById('myChart').getContext('2d');
I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.
I have 2 Dojo Dijit ContentPane's side by side. I want to show/hide one of them, and have the other one stretch dynamically as needed. I am using an ESRI mapping example which uses 'dijit.layout.BorderContainer'. The "divRightMenu" will show/hide itself correctly, but, when opened, rather than pushing the "mapDiv" Div, it just appears on top of it. I want the "mapDiv" div to dynamically resize itself depending on the visible state of the "divRightMenu" div.
I'm including the full page code below - I have already experimented with style.Display = Block / None, style.Visibility = Visible/Hidden, as well as trying to dynamically set the width of divRightMenu from 1 pixel to 150 pixels. In all cases, divRightMenu appears "on top of" mapDiv, rather than "pushing" it like I want. If I change the code so that divRightMenu is visible by default on page load, then what happens when i hide it is it disappears, but the blank spot it once occupied still remains. Surely this is something simple I'm missing?
In the past (standard CSS), I would combine "float:left/right" with "overflow:hidden", and display:block/none, and could easily achieve the effect I'm after, but with Dojo/Dijit i'm not sure what i'm missing. I experimented with various combinations of float/overflow on the inline styling of the 2 DIV tags in question, but was unable to get it to work. I also noted that one poster mentioned that he programmatically created his dijit ContentPanes on the fly to overcome the issue, but I was hoping for a solution other than this (i need all the settings from the div's content to be retained between showing/hiding the div, and i'm not sure if re-creating it on the fly will allow for this).
Here are the 2 threads I found that touch on the topic:
Dojo Toggle Hide and Show Divs
Toggling the display of a Dojo dijit
These mainly deal with being able to hide the div or not. In my case I'm able to hide/show it, but just not able to get the desired auto-resize behavior from the remaining DIV.
In any case, full code sample is included below - any help would be appreciated:
Main Index.htm Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
}
function ToggleVisibility(id)
{
//if (dijit.byId(id).domNode.style.width == '150px') {
if (dijit.byId(id).domNode.style.display == 'block') {
dijit.byId(id).domNode.style.display = 'none';
//dijit.byId(id).domNode.style.width = "1px";
//dojo.style(id, "visibility", "hidden");
}
else {
//dijit.byId(id).domNode.style.width = "150px";
dijit.byId(id).domNode.style.display = 'block';
//dojo.style(id, "visibility", "visible");
}
dijit.byId(id).resize();
//dijit.byId("mapDiv").resize();
}
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script src="layout.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
<!--TOPMOST LAYOUT CONTAINER-->
<div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
<!--HEADER SECTION-->
<div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top">
<div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top">Logo Here</div>
<div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top">Menu Here | <input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/></div>
</div>
<!--CENTER SECTION-->
<!--CENTER CONTAINER-->
<div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"></div>
<!--RIGHT CONTAINER-->
<div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right">
Right Menu
</div>
<!--FOOTER SECTION-->
<div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
Footer Here
</div>
</div>
</body>
</html>
layout.js Code:
dojo.require("esri.map");
var resizeTimer;
var map;
function init() {
var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
wkid: 4326
}));
map = new esri.Map("mapDiv", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
resizeMap();
});
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
//show map on load
dojo.addOnLoad(init);
layout.css Code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#FFF;
color:#999;
font-size:16pt;
font-weight:bold;
}
#headerArea {
text-align:left;
}
#navMenuArea {
text-align:right;
/*background:url(toolbar_bg.png) repeat #6788a2;*/
}
#topmenu {
background-color:#FFF;
color:#999;
font-size:16pt;
text-align:right;
font-weight:bold;
}
#footer {
background-color:#FFF;
color:#999;
font-size:10pt;
text-align:center;
}
Use a dijit/layout/BorderContainer, place the 2 contentpanes inside it, setting one of the 2 containers' region property to "center" and the other one to "right".
When you want to resize one of the contentpanes, call their "resize" method with an object containing the "w" property.
After calling resize on the contentpane, call "layout" on the border container.
Example :
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
var container = new BorderContainer({
design : "headline",
gutters : false
}, "container");
var pane1 = new ContentPane({
region : "center",
id : "pane1"
});
var pane2 = new ContentPane({
region : "right",
id : "pane2"
});
var toolbar = new ContentPane({
region : "bottom",
id : "toolbar"
});
var btn = new Button({
label : "Change right side",
onClick : function(){
pane2.resize({ w : Math.random() * pane2.get("w") });
container.layout();
}
});
toolbar.addChild(btn);
container.addChild(pane1);
container.addChild(pane2);
container.addChild(toolbar);
container.startup();
});
See this fiddle : http://jsfiddle.net/psoares/vEsy7/
I know I can use the following in the body to autoplay the sound on page load if embedded in the body, but I wanna try this dynamically.
What I mean by dynamically is to find the audio file, and play onload using JavaScript, or JQuery.
Can anyone help?
<audio preload="auto" tabindex="0" autoplay="true" loop="true">
<source src="shorttones.mp3" type="audio/mpeg" />
<source src="shorttones.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
I tried this, not working.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/buzz.js" type="text/javascript"></script>
<script type="text/javascript">
if (!buzz.isSupported()) {
alert("Your browser does not support the audio element, ogg, or mp3.");
return;
}
buzz.defaults.formats = [ 'ogg', 'mp3' ];
buzz.defaults.preload = 'metadata';
var mySound = new buzz.sound( "sounds/highpitchsound");
mySound.play();
mySound.loop();
</script>
</head>
</html>
If you mean playing without the autoplay, this would be one approach:
<html><body onload="playSound();">
<audio id="noise"></audio>
</body>
<script>
function playSound(){
var snd=document.getElementById('noise');
canPlayMP3 = (typeof snd.canPlayType === "function" && snd.canPlayType("audio/mpeg") !== "");
snd.src=canPlayMP3?'shorttones.mp3':'shorttones.ogg';
snd.load();
snd.play();
}
</script></html>
You might want to take a look at buzz.js: http://buzz.jaysalvat.com/
if (!buzz.isSupported()) {
alert("Your browser does not support the audio element, ogg, or mp3.");
return;
}
var sound = new buzz.sound( "shorttones", {
formats: [ "ogg", "mp3" ]
});
sound.play();