Due to the business of the company, we need to cooperate with flash plug-in to do live video surveillance. Flash plug-ins can only run on IE, for the front end. Ha haCopy the codeProject structures,
The original project was built with Layui + JQ. Now I’m going to separate out the big screen;
So happy, ha ha ha
React + React-mobx
React is used because I am familiar with react
Mobx was chosen because the project content was relatively simple and did not involve responsible data processing
Project encountered potholes
<object id="plugin1" type="application/x-deepcam-p2p">
<param name="onload" value="pluginLoaded" />
</object>
Copy the codeFlash section, completely separate from document flow, separate window. You cannot position any ICONS on it. This leads to many features not being implemented.
Flash tends to get stuck on web pages when users are using it frequently.
Flash video volume control, in fact, controls the volume of the entire computer system, unlike music player only control individual applications.
Concrete implementation
- A large screen adaptation
Start with BaseComponent, a component that controls the full screen
class BaseComponent extends Component { constructor(props) { super(props); this.state = { ... super.state, screenWidth: props.width || -1, screenHeight: props.height || -1, topHeight: -1 }; }resizeScreen() {
try {
const parentDom = ReactDOM.findDOMNode(this).parentNode;
let {
width,
height,
topHeight
} = this.props;
if(! width) { width = parentDom.offsetWidth; }if(! height) { height = (width * global.settings.standardHeight) / global.settings.standardWidth; }if(! topHeight && height) { topHeight = (height * 120) / global.settings.standardHeight; } global.settings.screenHeight = height; global.settings.screenWidth = width; this.setState({ screenWidth: width, screenHeight: height }) } catch (ignore) { // debugger; } } scaleHeight(height, unit) {return (height * global.settings.screenHeight) / global.settings.standardHeight + (unit ? unit : 0);
}
scaleWidth(width, unit) {
return(width * global.settings.screenWidth) / global.settings.standardWidth + (unit ? unit : 0); }}export default BaseComponent;
Copy the code//config.js global. Settings = {screenWidth: 1408, screenHeight: 768, standardWidth: 1920, 1080, // design width}Copy the codeThis works in browsers, in the entry component app.js;
let timer;
let flag = false;
class App extends BaseComponent {
constructor(props) {
super(props);
this.state = {
width: this.state.screenWidth,
height: this.state.screenHeight,
showPage: false}}componentDidMount() {
this.resizeScreen();
window.addEventListener('resize',this.handleResize();
}
handleResize = () => {
if (flag) {
clearTimeout(timer);
timer = setTimeout(() => {
this.resizeScreen();
// window.location.reload();
flag = false; }}, 100)else {
flag = true;
timer = setTimeout(() => {
this.resizeScreen();
// window.location.reload();
flag = false; }}}, 100)componentWillUnmount() {
window.removeEventListener('resize',this.handleResize);
}
render() {
const {store} = this.props;
return (
this.state.showPage ?
<div style={{marginTop: this.returnMarginByScreenRatio(),position: 'relative'}}>
<Header/>
<div style={{
width: this.scaleWidth(1920, 'px'),
height: this.scaleHeight(686, 'px')
}}>
</div> : ' '); }}export default App;
Copy the code- Using the plug-in section
Call flash API play directly,
let flag = true;
@inject('store')
@observer
class MyVideo extends React.Component {
handleChangePlugin = ({ uuid, channel_id, pasword, username }) => {
setTimeout(() => {
const plugin = document.getElementById('plugin0');
if (plugin.valid) {
plugin.set_volume(0);
let ret = plugin.connect_camera1(uuid, username, pasword, channel_id, 1);
if (ret < 0) {
console.log("connect camera err"); }}else {
console.log("Plugin is not working :(");
}
})
}
handleStopPlugin = () => {
const plugin = document.getElementById('plugin0');
if (plugin.valid) {
plugin.disconnect_all_camera();
}
}
handleChangePluginVoice = (voice) => {
const plugin = document.getElementById('plugin0');
if (plugin.valid) {
plugin.set_volume(voice);
}
}
handleChangePluginFour = ([{ uuid, pasword, username }], nPage) => {
setTimeout(() => {
const plugin = document.getElementById('plugin0');
if (plugin.valid) {
let ret = plugin.connect_camera4(uuid, username, pasword, 2, nPage);
if (ret < 0) {
console.log("connect camera err"+ ret); }}}); }componentDidMount() {
const plugin = document.getElementById('plugin1'); const flag1 = plugin && ! plugin.valid; this.props.store.handleToClose( flag1 ); } shouldComponentUpdate(nextProps) {if(! nextProps.flag1) {if(! nextProps.isVideo) { this.props.store.handleChangeIsVideo();if (nextProps.channel_num === 1) {
this.handleChangePlugin(nextProps.data[0]);
}
else{ this.handleChangePluginFour(nextProps.data, nextProps.nPage); }}if (nextProps.data.length === 0) {
this.handleStopPlugin();
}
if(nextProps.data.length > 0 && ((nextProps.data.length ! == this.props.data.length && flag) || (this.props.data[0] && this.props.data[0].name ! == nextProps.data[0].name))) { flag =false;
if (nextProps.channel_num === 1) {
this.handleChangePlugin(nextProps.data[0]);
}
else{ this.handleChangePluginFour(nextProps.data, nextProps.nPage); }}if(nextProps.voiceFlag ! == this.props.voiceFlag || nextProps.voice ! == this.props.voice) { this.handleChangePluginVoice(nextProps.voiceFlag ? nextProps.voice : 0); }if(nextProps.channel_num ! == this.props.channel_num && nextProps.data.length > 0) {if (nextProps.channel_num === 1) {
this.handleChangePlugin(nextProps.data[0]);
}
else{ this.handleChangePluginFour(nextProps.data, nextProps.nPage); }}if(nextProps.nPage ! == this.props.nPage && nextProps.channel_num === 4) { this.handleChangePluginFour(nextProps.data, nextProps.nPage); }returnnextProps.flag1 ! == this.props.flag1 || nextProps.nPage ! == this.props.nPage || nextProps.uuiD ! == this.props.uuiD || (nextProps.channel_num ! == this.props.channel_num && nextProps.data.length > 0) || nextProps.voiceFlag ! == this.props.voiceFlag || (nextProps.voice ! == this.props.voice || !! (nextProps.data.length > 0 && ((nextProps.data.length ! == this.props.data.length && flag) || (this.props.data[0] && this.props.data[0].name ! == nextProps.data[0].name))) ); }else {
return false; }}render() {
const { store, data, voice, voiceFlag, channel_num, uuiD, nPage, flag1 } = this.props;
return <MyVideoBox>
<object id="plugin1" type="application/x-deepcam-p2p" style={{
width: 0,
height: 0,
display: 'none'
}}>
<param style={{
width: 0,
height: 0,
display: 'none'
}} name="onload" value="pluginLoaded" />
</object>
<OneV id="plugin0" style={{ display: flag1 ? 'none' : 'block' }} type="application/x-deepcam-p2p">
<param name="onload" value="pluginLoaded"/> </OneV> {! flag1 ?' ' :
<XiaZhai>
<Header>
<div className="my-close" onClick={() => {
store.handleToClose(false)
}}></div>
<img src={require('./ic_tips.png')} alt=' '/> Click download & NBSP; <span onClick={() => { store.handleToClose(false)
}}><a download href="/static/templateFile/deepcam.exe"</a></span> It is recommended to use Internet Explorer to play </Header> <Content></Content> </XiaZhai>} <Process /> <Onechannel onClick={() => { store.handleChangeChannelNum(1) }} src={channel_num === 4 ? OnechannelBg : OnechannelBgH} /> <Fourchannel onClick={() => { store.handleChangeChannelNum(4) }} src={channel_num === 4 ? FourchannelBgH : FourchannelBg} /> {data.length > 0 && channel_num === 1 ? <Title>{data[0].name}</Title> :' '}
{channel_num === 1 ? <VoiceBox>
<Slider tooltipPlacement='right' value={voice} onChange={(e) => { store.handleChangeVoice(e) }} />
</VoiceBox> : ' '}
{channel_num === 1 ? <VoiceIcon src={voiceFlag ? VoiceBg : VoiceBgN} onClick={store.handleChangeVoiceFlag} /> : ' '}
<BeforeBtn src={channel_num === 1 ?
store.devicePage === 0 ? BeforeBtnBg : BeforeBtnBgH :
nPage === 0 ? BeforeBtnBg : BeforeBtnBgH
} onClick={channel_num === 1 ? () => {
store.handleChangeUuid('before');
} : () => {
store.handleChangeNPage('before');
}} />
<NextBtn src={channel_num === 1 ?
store.allDevice.length === 0 || store.allDevice.length === 1
|| store.devicePage + 1 >= store.allDevice.length ? NextBtnBgH : NextBtnBg :
uuiD === 0 || uuiD === 1
|| (nPage + 1) * 4 >= uuiD ? NextBtnBgH : NextBtnBg
}
onClick={channel_num === 1 ? () => {
store.handleChangeUuid('next');
} : () => {
store.handleChangeNPage('next');
}} />
</MyVideoBox>
}
};
export default MyVideo;
Copy the codeAlso use a dot, how to determine whether the Flash control is installed. Check whether the object is valid.
conclusion
The main reason is to work with the company’s hardware and existing SDK. If possible, use the HTML5 video tag to be silky.
Flash in 0202 has been a chicken in the ribs of the user is also relatively poor digestion performance is too big
All in all, the user experience is relatively poor