CEF Tutorial - Revision history

CrosRoad95 at 13:48, 31 May 2021

2021-05-31T13:48:01Z

@@ Line 137: / Line 137: @@
 ===google.com doesn't work (even though I requested google.com)===
 Google redirects to a country-specific website by default. If you want to prevent Google from doing this, load the following URL: https://www.google.com/ncr
 =Scripting functions=

Cristiano Cardoso: [+] link to translated pt_BR page

2021-02-16T22:05:46Z

[+] link to translated pt_BR page

← Older revision		Revision as of 22:05, 16 February 2021
Line 144:		Line 144:

	[[Category:Tutorials]]		[[Category:Tutorials]]

			[[pt-br:Tutorial_CEF]]

506: /* How to load local resources in local HTML files */

2020-09-22T10:40:19Z

How to load local resources in local HTML files

← Older revision		Revision as of 10:40, 22 September 2020
Line 54:		Line 54:

	==How to load local resources in local HTML files==		==How to load local resources in local HTML files==
	Imagine you want to load an image or play a video from your MTA resource. This is possible via a custom URI scheme named '''''http://mta/'''''		Imagine you want to load an image or play a video from your MTA resource. This is possible via a custom URI scheme named '''''"http://mta/"'''''

	===Example===		===Example===

506 at 10:37, 22 September 2020

2020-09-22T10:37:38Z

← Older revision		Revision as of 10:37, 22 September 2020
Line 54:		Line 54:

	==How to load local resources in local HTML files==		==How to load local resources in local HTML files==
	Imagine you want to load an image or play a video from your MTA resource. This is possible via a custom URI scheme named '''''~~mtalocal~~://'''''		Imagine you want to load an image or play a video from your MTA resource. This is possible via a custom URI scheme named '''''http://mta/'''''

	===Example===		===Example===

Haxardous at 19:44, 19 April 2020

2020-04-19T19:44:00Z

← Older revision		Revision as of 19:44, 19 April 2020
Line 12:		Line 12:
	local browser = createBrowser(800, 600, true, true)		local browser = createBrowser(800, 600, true, true)

	-- "Wait" for the browser (this is necessary, because CEF runs in a secondary thread and hence requires the 'asynchronous' event mechanism)		-- "Wait" for the browser (this is necessary because CEF runs in a secondary thread and hence requires the 'asynchronous' event mechanism)
	addEventHandler("onClientBrowserCreated", browser,		addEventHandler("onClientBrowserCreated", browser,
	function()		function()
Line 25:		Line 25:
	This means the domain you want to load has to meet at least one of the following requirements:		This means the domain you want to load has to meet at least one of the following requirements:
	it is whitelisted globally by the MTA team (you can create a post in [this topic] to suggest a new domain to be whitelisted) - '''TODO: Add forum URL here*'''		it is whitelisted globally by the MTA team (you can create a post in [this topic] to suggest a new domain to be whitelisted) - '''TODO: Add forum URL here*'''
	*the domain was ~~requsted~~ via requestBrowserDomains/Browser.requestDomains and accepted by the player '''before'''		*the domain was requested via requestBrowserDomains/Browser.requestDomains and accepted by the player '''before'''
	*the domain is on the user's whitelist (MTA settings => Tab: Browser => Whitelist)		*the domain is on the user's whitelist (MTA settings => Tab: Browser => Whitelist)

	Apart from these options a domain might be blacklisted due to malicious content. Such domains cannot be requested.		Apart from these options, a domain might be blacklisted due to malicious content. Such domains cannot be requested.

	=Local vs remote mode=		=Local vs remote mode=
Line 104:		Line 104:
	mta.triggerEvent(string event, var parameter1, var parameter2, var parameter3, ...)		mta.triggerEvent(string event, var parameter1, var parameter2, var parameter3, ...)
	</syntaxhighlight>		</syntaxhighlight>
	The source of this event is always the browser element ~~which~~ triggered the event.		The source of this event is always the browser element that triggered the event.

	An example is available here:		An example is available here:
Line 121:		Line 121:
	This is for example true for '''WebGL'''.		This is for example true for '''WebGL'''.

	Another problematic feature is '''Adobe Flash'''. Adobe Flash is enabled by default, but you should avoid using it due to the fact that plugins can be disabled in the settings on the one hand (Java is disabled completely by the way) and Flash is very restrictive on the other hand. Restrictive means it runs in a separate process, uses a very old interface and offers therefore just a few ways to control it.		Another problematic feature is '''Adobe Flash'''. Adobe Flash is enabled by default, but you should avoid using it due to the fact that plugins can be disabled in the settings on the one hand (Java is disabled completely by the way) and Flash is very restrictive on the other hand. Restrictive means it runs in a separate process uses a very old interface and offers therefore just a few ways to control it.
	As a consequence you cannot control the volume of flash objects. Fortunately, HTML5 is an even better replacement and provides a very good audio and video interface (http://www.w3schools.com/tags/ref_av_dom.asp) which even supports 3D sound (@all bored people among us: Feel free to write a 3D sound 'wrapper' that maps the GTA onto HTML5 coordinates :P).		As a consequence, you cannot control the volume of flash objects. Fortunately, HTML5 is an even better replacement and provides very good audio and video interface (http://www.w3schools.com/tags/ref_av_dom.asp) which even supports 3D sound (@all bored people among us: Feel free to write a 3D sound 'wrapper' that maps the GTA onto HTML5 coordinates :P).

	=Advanced usage=		=Advanced usage=
	Since our CEF implementation does not do z-ordering by default, you have to provide your own z-ordering mechanism.		Since our CEF implementation does not do z-ordering by default, you have to provide your own z-ordering mechanism.
	You can find a basic implementation of such a mechanism here: https://github.com/Jusonex/mtasa_cef_tools		You can find a basic implementation of such a mechanism here: https://github.com/Jusonex/mtasa_cef_tools
	There are also a few utility functions ~~which~~ allow you to integrate these classes easily into your own object-oriented UI system.		There are also a few utility functions that allow you to integrate these classes easily into your own object-oriented UI system.
	I'll provide some code to use CEF along with CEGUI soon too.		I'll provide some code to use CEF along with CEGUI soon too.

Line 136:		Line 136:
	=Troubleshooting=		=Troubleshooting=
	===google.com doesn't work (even though I requested google.com)===		===google.com doesn't work (even though I requested google.com)===
	Google redirects to a country specific website by default. If you want to prevent Google from doing this, load the following URL: https://www.google.com/ncr		Google redirects to a country-specific website by default. If you want to prevent Google from doing this, load the following URL: https://www.google.com/ncr

	=Scripting functions=		=Scripting functions=

Myonlake: /* Javascript to Lua */

2020-04-19T12:08:19Z

Javascript to Lua

← Older revision		Revision as of 12:08, 19 April 2020
Line 101:		Line 101:
	You are able to trigger a client event via the Javascript method ''triggerEvent'' which is part of the static class/namespace ''mta''.		You are able to trigger a client event via the Javascript method ''triggerEvent'' which is part of the static class/namespace ''mta''.
	The syntax is as follows:		The syntax is as follows:
	<syntaxhighlight lang="~~lua~~">~~[javascript]~~		<syntaxhighlight lang="javascript">
	mta.triggerEvent(string event, var parameter1, var parameter2, var parameter3, ...)		mta.triggerEvent(string event, var parameter1, var parameter2, var parameter3, ...)
	</syntaxhighlight>		</syntaxhighlight>

IDannz: /* HTML */

2019-10-22T01:50:35Z

HTML

← Older revision		Revision as of 01:50, 22 October 2019
Line 77:		Line 77:
	====HTML====		====HTML====
	This is the most interesting part:		This is the most interesting part:
	<syntaxhighlight lang="~~lua~~">~~[html]~~		<syntaxhighlight lang="html">
	<!DOCTYPE HTML>		<!DOCTYPE HTML>
	<html>		<html>

Jusonex at 09:34, 18 August 2015

2015-08-18T09:34:45Z

← Older revision		Revision as of 09:34, 18 August 2015
Line 67:		Line 67:

	-- Load HTML UI		-- Load HTML UI
	webView:loadURL("html/myVideo.html")		webView:loadURL("http://mta/local/html/myVideo.html")

	end		end
Line 83:		Line 83:
	<body>		<body>
	<video width="640" height="480" controls>		<video width="640" height="480" controls>
	<source src="~~mtalocal~~://~~media~~/myVideo.webm" type="video/webm"/>		<source src="http://mta/local/myVideo.webm" type="video/webm"/>
	</video>		</video>
	</body>		</body>

Qaisjp: OOP "create" remove

2015-05-30T14:34:32Z

OOP "create" remove

← Older revision		Revision as of 14:34, 30 May 2015
Line 61:		Line 61:
	<syntaxhighlight lang="lua">		<syntaxhighlight lang="lua">
	-- Create a browser (local mode is also required to access local data)		-- Create a browser (local mode is also required to access local data)
	local webView = Browser~~.create~~(640, 480, true, true)		local webView = Browser(640, 480, true, true)

	addEventHandler("onClientBrowserCreated", webView,		addEventHandler("onClientBrowserCreated", webView,

Jusonex at 13:14, 30 May 2015

2015-05-30T13:14:30Z

← Older revision		Revision as of 13:14, 30 May 2015
Line 109:		Line 109:
	* https://github.com/Jusonex/mtasa_cef_tools/blob/master/webui/examples/html/ui2.html#L66		* https://github.com/Jusonex/mtasa_cef_tools/blob/master/webui/examples/html/ui2.html#L66
	* https://github.com/Jusonex/mtasa_cef_tools/blob/master/webui/examples/Main.lua#L35-L40		* https://github.com/Jusonex/mtasa_cef_tools/blob/master/webui/examples/Main.lua#L35-L40

			=Debugging=
			The ''web development mode'' can be enabled as follows (type it in the client's F8 console):
			<syntaxhighlight lang="lua">start runcode
			crun setDevelopmentMode(true, true)
			debugscript 3</syntaxhighlight>
			Now, you should be able to see web errors and blocked domains/URLs in the debug window at the bottom.

	=Things you should keep in mind while working with CEF=		=Things you should keep in mind while working with CEF=
Line 126:		Line 133:
	Creating lots of browsers does not influence MTA directly (except the fact MTA has to copy the texture data in the main/GTA thread due to technical restrictions), because one part of CEF runs in another process and the other part in a secondary thread.		Creating lots of browsers does not influence MTA directly (except the fact MTA has to copy the texture data in the main/GTA thread due to technical restrictions), because one part of CEF runs in another process and the other part in a secondary thread.
	So if you do not want to show the browser, it is definitely the best to destroy the browser. If you cannot destroy the browser (imagine you have to save the website's state for some reason), you can save a lot of resources by disabling rendering via [[setBrowserRenderingPaused]]. This will stop CEF from rendering new frames/processing input and MTA from copying the texture data.		So if you do not want to show the browser, it is definitely the best to destroy the browser. If you cannot destroy the browser (imagine you have to save the website's state for some reason), you can save a lot of resources by disabling rendering via [[setBrowserRenderingPaused]]. This will stop CEF from rendering new frames/processing input and MTA from copying the texture data.

			=Troubleshooting=
			===google.com doesn't work (even though I requested google.com)===
			Google redirects to a country specific website by default. If you want to prevent Google from doing this, load the following URL: https://www.google.com/ncr

	=Scripting functions=		=Scripting functions=